डेटा लाते समय React Redux ऐप में लोडिंग इंडिकेटर कैसे दिखाएं? [बन्द है]

Question

मैं रिएक्ट / रिडक्स के लिए नया हूं। मैं APIs को संसाधित करने के लिए Redux ऐप में एक भ्रूण एपि मिडलवेयर का उपयोग करता हूं। यह ( redux-api-मिडलवेयर है ) है। मुझे लगता है कि यह async एपीआई कार्रवाई करने का अच्छा तरीका है। लेकिन मुझे कुछ ऐसे मामले मिलते हैं, जो अपने आप हल नहीं हो सकते।

मुखपृष्ठ के रूप में ( जीवनचक्र ) में कहा गया है, एक CCH_API क्रिया को FSA क्रिया भेजने के साथ समाप्त होने के साथ एक API API जीवनचक्र शुरू होता है।

इसलिए मेरा पहला मामला एपीआई को लाते समय प्री-लोडर को दिखा / छिपा रहा है। मिडलवेयर शुरुआत में एक एफएसए कार्रवाई शुरू करेगा और अंत में एक एफएसए कार्रवाई भेजेगा। दोनों क्रियाएं रिड्यूसर द्वारा प्राप्त की जाती हैं जो केवल कुछ सामान्य डेटा प्रोसेसिंग करना चाहिए। कोई UI ऑपरेशन, कोई और ऑपरेशन नहीं। शायद मुझे राज्य में प्रसंस्करण की स्थिति को बचाना चाहिए, फिर स्टोर अपडेट करते समय उन्हें प्रस्तुत करना चाहिए।

लेकिन यह कैसे करें? पूरे पृष्ठ पर एक प्रतिक्रिया घटक प्रवाह? अन्य क्रियाओं से स्टोर अपडेट के साथ क्या होता है? मेरा मतलब है कि वे राज्य की तुलना में घटनाओं की तरह हैं!

इससे भी बदतर स्थिति, मुझे क्या करना चाहिए जब मुझे मूल पुष्टिकरण संवाद या चेतावनी संवाद का उपयोग Redux / प्रतिक्रिया ऐप्स में करना है? उन्हें कहां रखा जाना चाहिए, कार्रवाई या फिर रिड्यूसर?

शुभकामनाएँ! उत्तर देने की इच्छा।

Comments

इस प्रश्न के अंतिम संपादन को वापस ले लिया क्योंकि इसने नीचे दिए गए प्रश्न और उत्तरों के पूरे बिंदु को बदल दिया।

— ग्रीग बी

एक घटना राज्य का परिवर्तन है!

— 架构 模式 企业

शोधकर्ता पर एक नज़र डालें। github.com/orar/questrar

— Orar

Answer 1

मेरा मतलब है कि वे राज्य की तुलना में घटनाओं की तरह हैं!

मैं ऐसा नहीं कहूंगा। मुझे लगता है कि लोडिंग संकेतक यूआई का एक बड़ा मामला है जिसे आसानी से राज्य के कार्य के रूप में वर्णित किया जाता है: इस मामले में, बूलियन चर के। हालांकि यह उत्तर सही है, मैं इसके साथ जाने के लिए कुछ कोड प्रदान करना चाहूंगा।

में asyncRedux रेपो में उदाहरण , कम करने अद्यतन करता है एक क्षेत्र कहा जाता हैisFetching :

case REQUEST_POSTS:
  return Object.assign({}, state, {
    isFetching: true,
    didInvalidate: false
  })
case RECEIVE_POSTS:
  return Object.assign({}, state, {
    isFetching: false,
    didInvalidate: false,
    items: action.posts,
    lastUpdated: action.receivedAt

घटक connect()रिक्स्ट रेडक्स से स्टोर की स्थिति की सदस्यता के लिए उपयोग करता है और रिटर्न वैल्यू के isFetchingहिस्से के रूप में रिटर्न करता हैmapStateToProps() ताकि यह जुड़े घटक के प्रॉपर में उपलब्ध हो:

function mapStateToProps(state) {
  const { selectedReddit, postsByReddit } = state
  const {
    isFetching,
    lastUpdated,
    items: posts
  } = postsByReddit[selectedReddit] || {
    isFetching: true,
    items: []
  }

  return {
    selectedReddit,
    posts,
    isFetching,
    lastUpdated
  }
}

अंत में, घटक "लोड हो रहा है ..." लेबल को प्रस्तुत करने के लिए फ़ंक्शन में प्रोप का उपयोग करता हैisFetchingrender() (जो इसके बजाय एक स्पिनर हो सकता है):

{isEmpty
  ? (isFetching ? <h2>Loading...</h2> : <h2>Empty.</h2>)
  : <div style={{ opacity: isFetching ? 0.5 : 1 }}>
      <Posts posts={posts} />
    </div>
}

इससे भी बदतर स्थिति, मुझे क्या करना चाहिए जब मुझे मूल पुष्टिकरण संवाद या चेतावनी संवाद का उपयोग Redux / प्रतिक्रिया ऐप्स में करना है? उन्हें कहां रखा जाना चाहिए, कार्रवाई या फिर रिड्यूसर?

कोई भी दुष्प्रभाव (और एक संवाद दिखाना सबसे निश्चित रूप से एक पक्ष प्रभाव है) reducers में नहीं है। निष्क्रिय राज्य के बिल्डरों के रूप में reducers के बारे में सोचो। वे वास्तव में "करते" नहीं हैं।

यदि आप एक चेतावनी दिखाना चाहते हैं, तो या तो किसी कार्रवाई को भेजने से पहले एक घटक से करें, या किसी एक्शन निर्माता से ऐसा करें। जब तक किसी कार्रवाई को भेजा जाता है, तब तक इसके जवाब में साइड इफेक्ट्स करने के लिए बहुत देर हो चुकी होती है।

हर नियम के लिए, एक अपवाद है। कभी-कभी आपके पक्ष प्रभाव तर्क इतना जटिल है कि आप वास्तव में चाहते हैं विशिष्ट कार्रवाई प्रकार के लिए या विशिष्ट reducers के लिए या तो उन्हें जोड़ी को। इस मामले में Redux Saga और Redux Loop जैसी उन्नत परियोजनाएं देखें । ऐसा केवल तब करें जब आप वेनिला रेडक्स के साथ सहज हों और बिखरे हुए साइड इफेक्ट्स की वास्तविक समस्या हो, जिसे आप अधिक प्रबंधनीय बनाना चाहेंगे।

Comments

क्या होगा अगर मेरे पास कई भ्रूण हैं? हालांकि एक चर पर्याप्त नहीं होगा।

— philk

@ स्फ़ील अगर आपके पास एक से अधिक भ्रूण हैं तो आप उन्हें Promise.allएक ही वादे के साथ जोड़ सकते हैं और फिर सभी भ्रूणों के लिए एक ही क्रिया को भेज सकते हैं। या आपको isFetchingअपने राज्य में कई चर बनाए रखने होंगे ।

— सेबेस्टियन लॉर्बर

कृपया मेरे द्वारा लिंक किए गए उदाहरण पर ध्यान दें। एक से अधिक isFetchingझंडे। यह उन वस्तुओं के हर सेट के लिए सेट किया जाता है, जिन्हें लाया जा रहा है। जिसे लागू करने के लिए आप reducer संरचना का उपयोग कर सकते हैं।

— दान अब्रामोव

ध्यान दें कि यदि अनुरोध विफल हो जाता है, और RECEIVE_POSTSकभी ट्रिगर नहीं होता है, तो लोडिंग साइन तब तक बना रहेगा जब तक कि आपने error loadingसंदेश दिखाने के लिए किसी प्रकार का टाइमआउट नहीं बनाया है ।

— जेम्स ११

@ टॉमी - मैं स्पष्ट रूप से अपने उपयोग की जाने वाली संपत्तियों में से सभी को ब्लैक लिस्ट कर देता हूं, मैं जो भी रिडक्स दृढ़ता का उपयोग कर रहा हूं।

— दुहसेकोह

Answer 2

महान जवाब दान अब्रामोव! बस यह जोड़ना चाहता हूं कि मैं अपने एप्स में कमोबेश यही कर रहा था (बूलियन के रूप में इसे रखना) और इसे एक साथ एक पूर्णांक बनाने के लिए एक पूर्णांक (जो बकाया अनुरोधों की संख्या के रूप में पढ़ना समाप्त करता है) को समाप्त करने के लिए एक साथ अनुरोध।

बूलियन के साथ:

अनुरोध 1 शुरू -> स्पिनर पर -> अनुरोध 2 शुरू -> अनुरोध 1 छोर -> स्पिनर बंद -> अनुरोध 2 छोर

पूर्णांक के साथ:

अनुरोध 1 शुरू -> स्पिनर पर -> अनुरोध 2 शुरू -> अनुरोध 1 छोर -> अनुरोध 2 छोर -> स्पिनर बंद

case REQUEST_POSTS:
  return Object.assign({}, state, {
    isFetching: state.isFetching + 1,
    didInvalidate: false
  })
case RECEIVE_POSTS:
  return Object.assign({}, state, {
    isFetching: state.isFetching - 1,
    didInvalidate: false,
    items: action.posts,
    lastUpdated: action.receivedAt

Comments

यह वाजिब है। हालाँकि, अक्सर आप ध्वज के अतिरिक्त कुछ डेटा संग्रहीत करना चाहते हैं । इस बिंदु पर आपको isFetchingध्वज के साथ एक से अधिक ऑब्जेक्ट की आवश्यकता होगी । यदि आप मेरे द्वारा जुड़े उदाहरण को करीब से देखेंगे तो आप देखेंगे कि एक वस्तु नहीं है, isFetchedबल्कि कई हैं: एक प्रति उपखंड (जो कि उस उदाहरण में लाया जा रहा है)।

— दान अब्रामोव

ओह। हाँ, मैंने देखा कि नहीं हालांकि मेरे मामले में मेरे पास राज्य में एक वैश्विक isFetching प्रविष्टि है और एक कैश प्रविष्टि है जहां भ्रूण का डेटा संग्रहीत है, और मेरे उद्देश्यों के लिए मुझे केवल वास्तव में परवाह है कि कुछ नेटवर्क गतिविधि हो रही है, यह वास्तव में मायने नहीं रखता है

— नूनो कैम्पस

हां! यह इस बात पर निर्भर करता है कि क्या आप UI में एक या कई स्थानों पर फ़्रेचिंग संकेतक दिखाना चाहते हैं। वास्तव में आप दो दृष्टिकोणों को जोड़ सकते हैं और स्क्रीन के शीर्ष पर कुछ प्रगति पट्टी के लिए एक वैश्विक और दोनों सूचियों और पृष्ठों के लिए fetchCounterकई विशिष्ट isFetchingझंडे हैं।

— दान अब्रामोव

यदि मेरे पास एक से अधिक फ़ाइल में POST अनुरोध हैं, तो मैं इसकी वर्तमान स्थिति पर नज़र रखने के लिए isFetching की स्थिति कैसे निर्धारित करूंगा?

— user989988

Answer 3

मैं कुछ जोड़ना चाहूंगा। वास्तविक विश्व उदाहरण isFetchingस्टोर में एक फ़ील्ड का उपयोग करके यह दर्शाता है कि आइटम का संग्रह कब लाया जा रहा है। किसी भी संग्रह को सामान्यीकृत किया जाता हैpagination reducer के जो आपके घटकों को राज्य को ट्रैक करने के लिए जोड़ा जा सकता है और दिखा सकता है कि क्या संग्रह लोड हो रहा है।

मेरे साथ ऐसा हुआ कि मैं एक विशिष्ट संस्था के लिए विवरण लाना चाहता था जो पेजिंग पैटर्न में फिट नहीं होती है। मैं एक राज्य का प्रतिनिधित्व करना चाहता था अगर विवरण सर्वर से प्राप्त किया जा रहा है, लेकिन मैं यह भी नहीं चाहता था कि उसके लिए एक reducer हो।

इसे हल करने के लिए मैंने एक और जेनेरिक रिड्यूसर जोड़ा fetching। यह पेजेशन रिड्यूसर के समान फैशन में काम करता है और यह जिम्मेदारी है कि वह क्रियाओं का एक सेट देखें और जोड़े के साथ नए राज्य का निर्माण करें [entity, isFetching]। यह connectकिसी भी घटक के लिए reducer को अनुमति देता है और यह जानने के लिए कि क्या ऐप वर्तमान में केवल एक संग्रह के लिए नहीं बल्कि एक विशिष्ट इकाई के लिए डेटा ला रहा है।

Comments

जवाब के लिए धन्यवाद! व्यक्तिगत वस्तुओं के लोडिंग और उनकी स्थिति को संभालने के बारे में शायद ही कभी चर्चा की जाती है!

— गिलाद पेलेग

जब मेरे पास एक घटक होता है जो दूसरे के त्वरित और गंदे तरीके से कार्रवाई पर निर्भर करता है तो आपके नक्शे में है। comments.isFetching - अब आप दोनों घटकों के लिए यूजर इंटरेक्शन को ब्लॉक कर सकते हैं जब दोनों में से किसी एक को अपडेट किया जा रहा हो।

— फिलिप मर्फी

Answer 4

मैं अब तक इस सवाल पर नहीं हुआ था, लेकिन जब से कोई जवाब स्वीकार नहीं किया है मैं अपनी टोपी में फेंक दूँगा। मैंने इस बहुत काम के लिए एक उपकरण लिखा: प्रतिक्रिया-लोडर-फैक्ट्री । यह अब्रामोव के समाधान की तुलना में थोड़ा अधिक चल रहा है, लेकिन यह अधिक मॉड्यूलर और सुविधाजनक है, क्योंकि मैं इसे लिखने के बाद सोचना नहीं चाहता था।

चार बड़े टुकड़े हैं:

• फ़ैक्टरी पैटर्न: यह आपको उसी फ़ंक्शन को जल्दी से कॉल करने की अनुमति देता है, जो बताता है कि आपके घटक के लिए "लोड हो रहा है", और कौन सी कार्रवाई को भेजना है। (यह मानता है कि घटक उन कार्यों को शुरू करने के लिए जिम्मेदार है, जिन पर वह इंतजार करता है।)const loaderWrapper = loaderFactory(actionsList, monitoredStates);
• आवरण: कारखाना जो उत्पादन करता है वह एक "उच्च क्रम घटक" होता है (जैसे कि connect()Redux में क्या रिटर्न), ताकि आप इसे अपने मौजूदा सामान पर लगा सकें।const LoadingChild = loaderWrapper(ChildComponent);
• क्रिया / रिड्यूसर इंटरैक्शन: रैपर यह देखने के लिए जांचता है कि क्या किसी रिड्यूसर को प्लग किया गया है जिसमें ऐसे कीवर्ड हैं जो यह बताते हैं कि इसे उस कंपोनेंट से गुजरना नहीं चाहिए जिसके लिए डेटा की आवश्यकता है। आवरण द्वारा भेजे गए कार्यों से संबंधित खोजशब्दों (जिस तरह से redux-api-मिडलवेयर प्रेषण ACTION_SUCCESSऔर ACTION_REQUESTउदाहरण के लिए) का उत्पादन करने की उम्मीद है । (आप कार्रवाई कहीं और भेज सकते हैं और सिर्फ रैपर से मॉनिटर कर सकते हैं यदि आप चाहते थे, तो निश्चित रूप से।)
• थ्रॉबर: डेटा आपके घटक पर निर्भर करता है, जबकि आप जिस घटक को दिखाना चाहते हैं वह तैयार नहीं है। मैंने इसमें थोड़ा सा जोड़ा, ताकि आप इसे रिग किए बिना इसका परीक्षण कर सकें।

मॉड्यूल स्वयं redux-api-मिडलवेयर से स्वतंत्र है, लेकिन मैं इसे इसके साथ उपयोग करता हूं, इसलिए यहां README का कुछ नमूना कोड है:

एक लोडर के साथ एक घटक इसे लपेटता है:

import React from 'react';
import { myAsyncAction } from '../actions';
import loaderFactory from 'react-loader-factory';
import ChildComponent from './ChildComponent';

const actionsList = [myAsyncAction()];
const monitoredStates = ['ASYNC_REQUEST'];
const loaderWrapper = loaderFactory(actionsList, monitoredStates);

const LoadingChild = loaderWrapper(ChildComponent);

const containingComponent = props => {
  // Do whatever you need to do with your usual containing component 

  const childProps = { someProps: 'props' };

  return <LoadingChild { ...childProps } />;
}

लोडर को मॉनिटर करने के लिए एक रिड्यूसर (हालाँकि आप चाहें तो इसे अलग तरह से वायर कर सकते हैं):

export function activeRequests(state = [], action) {
  const newState = state.slice();

  // regex that tests for an API action string ending with _REQUEST 
  const reqReg = new RegExp(/^[A-Z]+\_REQUEST$/g);
  // regex that tests for a API action string ending with _SUCCESS 
  const sucReg = new RegExp(/^[A-Z]+\_SUCCESS$/g);

  // if a _REQUEST comes in, add it to the activeRequests list 
  if (reqReg.test(action.type)) {
    newState.push(action.type);
  }

  // if a _SUCCESS comes in, delete its corresponding _REQUEST 
  if (sucReg.test(action.type)) {
    const reqType = action.type.split('_')[0].concat('_REQUEST');
    const deleteInd = state.indexOf(reqType);

    if (deleteInd !== -1) {
      newState.splice(deleteInd, 1);
    }
  }

  return newState;
}

मैं निकट भविष्य में उम्मीद करता हूं कि मैं मॉड्यूल में टाइमआउट और त्रुटि जैसी चीजें जोड़ूंगा, लेकिन पैटर्न बहुत अलग नहीं होगा।

---

आपके प्रश्न का संक्षिप्त उत्तर है:

1. रेंडरिंग कोड को बाँधना - घटक के चारों ओर एक आवरण का उपयोग करें जिसे आपको डेटा के साथ प्रस्तुत करना होगा जैसे मैंने ऊपर दिखाया था।
2. एक reducer जोड़ें जो आपके द्वारा आसानी से पचने योग्य ऐप के बारे में अनुरोधों की स्थिति बना देता है, इसलिए आपको यह सोचने की ज़रूरत नहीं है कि क्या हो रहा है।
3. घटनाओं और राज्य वास्तव में अलग नहीं हैं।
4. आपके बाकी अंतर्ज्ञान मुझे सही लगते हैं।

Answer 5

क्या मैं केवल एक सोच हूं कि लोडिंग संकेतक Redux स्टोर में नहीं हैं? मेरा मतलब है, मुझे नहीं लगता कि यह प्रति राज्य के अनुप्रयोग का हिस्सा है।

अब, मैं Angular2 के साथ काम करता हूं, और मैं क्या करता हूं कि मेरे पास "लोड हो रही" सेवा है जो RxJS BehaviourSubjects के माध्यम से विभिन्न लोडिंग संकेतकों को उजागर करती है। मुझे लगता है कि तंत्र एक ही है, मैं सिर्फ Redux में जानकारी संग्रहीत नहीं करता हूं।

LoadingService के उपयोगकर्ता केवल उन घटनाओं की सदस्यता लेते हैं जिन्हें वे सुनना चाहते हैं ..

जब भी चीजों को बदलने की जरूरत होती है, तो मेरा Redux एक्शन निर्माता LoadingService को कॉल करता है। UX घटक उजागर वेधशालाओं की सदस्यता लेते हैं ...

Comments

यही कारण है कि मैं स्टोर के विचार को पसंद करता हूं, जहां सभी कार्यों को मतदान किया जा सकता है (ngrx और redux- तर्क), सेवा कार्यात्मक नहीं है, redux- तर्क - कार्यात्मक। अच्छा पढ़ने

— srghma

नमस्ते, एक साल से अधिक समय बाद वापस जाँच करना, सिर्फ यह कहना कि मैं बहुत गलत था। बेशक UX राज्य अनुप्रयोग राज्य के अंतर्गत आता है। मैं कितना मूर्ख हो सकता हूं?

— स्पॉक ’

Answer 6

आप connect()रिएक्ट रिडक्स या निम्न-स्तरीय store.subscribe()विधि का उपयोग करके, अपने स्टोर में श्रोताओं को जोड़ सकते हैं । आपके पास अपने स्टोर में लोडिंग संकेतक होना चाहिए, जिसे स्टोर परिवर्तन हैंडलर तब घटक स्थिति की जांच और अद्यतन कर सकता है। घटक तब राज्य के आधार पर जरूरत पड़ने पर प्रीलोडर को प्रस्तुत करता है।

alertऔर confirmकोई समस्या नहीं होनी चाहिए। वे अवरुद्ध कर रहे हैं और चेतावनी उपयोगकर्ता से कोई इनपुट भी नहीं लेते हैं। इसके साथ confirm, आप उपयोगकर्ता द्वारा घटक रेंडरिंग को प्रभावित करना चाहिए, तो उपयोगकर्ता ने क्या क्लिक किया है, इसके आधार पर राज्य सेट कर सकते हैं। यदि नहीं, तो आप बाद के उपयोग के लिए विकल्प को घटक सदस्य चर के रूप में संग्रहीत कर सकते हैं।

Comments

अलर्ट / पुष्टिकरण कोड के बारे में, उन्हें कहां रखा जाना चाहिए, कार्रवाई या रिड्यूसर?

— 架构 模式 企业

निर्भर करता है कि आप उनके साथ क्या करना चाहते हैं, लेकिन ईमानदारी से मैं उन्हें ज्यादातर मामलों में घटक कोड में डाल देता हूं क्योंकि वे यूआई का हिस्सा हैं, डेटा परत नहीं।

— मिलोआश

कुछ UI घटक स्थिति की बजाय एक घटना (स्थिति बदलने की घटना) को ट्रिगर करके कार्य करते हैं। जैसे कि एनीमेशन, प्रीलोडर को दिखाना / छिपाना। आप उन्हें कैसे संसाधित करते हैं?

— 架构 模式 企业

यदि आप अपनी प्रतिक्रिया ऐप में एक गैर-प्रतिक्रिया घटक का उपयोग करना चाहते हैं, तो आमतौर पर उपयोग किया जाने वाला समाधान एक आवरण प्रतिक्रिया घटक बनाना है, फिर गैर-प्रतिक्रिया घटक की आवृत्ति को अद्यतन, नष्ट करने और नष्ट करने के लिए अपने जीवन चक्र के तरीकों का उपयोग करें। इस तरह के अधिकांश घटक आरंभ करने के लिए DOM में प्लेसहोल्डर तत्वों का उपयोग करते हैं, और आप उन्हें प्रतिक्रिया घटक के रेंडर विधि में रेंडर करेंगे। आप जीवन चक्र के तरीकों के बारे में और अधिक यहाँ पढ़ सकते हैं: facebook.github.io/react/docs/component-specs.html

— मिलोहे रसिक

मेरे पास एक मामला है: दाएं-शीर्ष कोने पर एक सूचना क्षेत्र, जिसमें एक अधिसूचना संदेश होता है, प्रत्येक संदेश दिखाता है फिर 5 सेकंड के बाद गायब हो जाता है। यह घटक वेबव्यू से बाहर है, मेजबान देशी ऐप द्वारा प्रदान किया गया है। यह कुछ js इंटरफ़ेस प्रदान करता है जैसे कि addNofication(message)। एक अन्य मामला प्रीलोडर्स है जो मेजबान देशी ऐप द्वारा प्रदान किया गया है और इसकी जावास्क्रिप्ट एपीआई द्वारा ट्रिगर किया गया है। मैं उन एपी componentDidUpdateके लिए एक रिएक्टर घटक में एक आवरण जोड़ता हूं । मैं इस घटक के प्रॉप्स या स्थिति को कैसे डिजाइन करूं?

— 架构 模式 企业

Answer 7

हमारे ऐप में तीन प्रकार के नोटिफिकेशन हैं, जो सभी पहलुओं के रूप में डिज़ाइन किए गए हैं:

1. संकेतक लोड हो रहा है (प्रोप के आधार पर मोडल या गैर-मोडल)
2. त्रुटि पॉपअप (मोडल)
3. अधिसूचना स्नैकबार (नॉन-मोडल, सेल्फ क्लोजिंग)

ये तीनों हमारे ऐप (मुख्य) के शीर्ष स्तर पर हैं, और नीचे दिए गए कोड स्निपेट में दिखाए गए अनुसार Redux के माध्यम से वायर्ड किए गए हैं। ये प्रॉप्स अपने संबंधित पहलुओं के प्रदर्शन को नियंत्रित करते हैं।

मैंने एक प्रॉक्सी डिज़ाइन की है जो हमारे सभी एपीआई कॉल को संभालती है, इस प्रकार सभी फ़ाइतेचिंग और (एपीआई) त्रुटियां मध्यस्थता के साथ कार्रवाई की जाती हैं जिन्हें मैं प्रॉक्सी में आयात करता हूं। (एक तरफ के रूप में, मैं भी वेब सर्वर का उपयोग करने के लिए समर्थन के लिए समर्थन के एक नकली इंजेक्शन ताकि हम सर्वर निर्भरता के बिना काम कर सकते हैं)

एप्लिकेशन में किसी अन्य स्थान पर किसी भी प्रकार की अधिसूचना प्रदान करने की आवश्यकता है, बस उचित कार्रवाई आयात करता है। स्नैकबार और एरर में प्रदर्शित होने वाले संदेशों के लिए परमेस हैं।

@connect(
// map state to props
state => ({
    isFetching      :state.main.get('isFetching'),   // ProgressIndicator
    notification    :state.main.get('notification'), // Snackbar
    error           :state.main.get('error')         // ErrorPopup
}),
// mapDispatchToProps
(dispatch) => { return {
    actions: bindActionCreators(actionCreators, dispatch)
}}

) निर्यात डिफ़ॉल्ट वर्ग मुख्य का विस्तार React.Component {

Comments

मैं लोडर / नोटिफिकेशन दिखाने के साथ समान सेटअप पर काम कर रहा हूं। मैं समस्याओं में भाग रहा हूं; क्या आपके पास इन कार्यों को पूरा करने का एक उदाहरण या उदाहरण होगा?

— हाइमन

Answer 8

मैं इस तरह के यूआरएल को बचा रहा हूँ ::

isFetching: {
    /api/posts/1: true,
    api/posts/3: false,
    api/search?q=322: true,
}

और फिर मेरे पास एक याद किया हुआ चयनकर्ता है (पुनरावृत्ति के माध्यम से)।

const getIsFetching = createSelector(
    state => state.isFetching,
    items => items => Object.keys(items).filter(item => items[item] === true).length > 0 ? true : false
);

POST के मामले में url को अद्वितीय बनाने के लिए, मैं कुछ चर को क्वेरी के रूप में पास करता हूं।

और जहां मैं एक संकेतक दिखाना चाहता हूं, मैं बस गेटफेकाउंट चर का उपयोग करता हूं

Comments

आप की जगह ले सकता Object.keys(items).filter(item => items[item] === true).length > 0 ? true : falseद्वारा Object.keys(items).every(item => items[item])जिस तरह से।

— अलेक्जेंड्रे एनिक

मुझे लगता है कि आप someइसके बजाय मतलब है every, लेकिन हाँ, बहुत पहले प्रस्तावित समाधान में तुलना की जरूरत नहीं है। Object.entries(items).some(([url, fetching]) => fetching);

— राफेल पोरस लुसेना