जिज्ञासु यदि आप Immutable.js या अन्य का उपयोग करते हैं। मैंने जो कुछ रेडक्स चीजें बनाई हैं उनमें मैं अपरिवर्तनीय का उपयोग नहीं करने की कल्पना नहीं कर सकता, लेकिन मेरे पास _do_ एक बहुत गहरी घोंसला वाली संरचना है जो अपरिवर्तनीय मदद करती है।

वाह वाह। इसका उल्लेख करने के लिए मेरे लिए _not_ क्या निरीक्षण है। हां! हम अपरिवर्तनीय का उपयोग करते हैं! जैसा कि आप कहते हैं, यह कल्पना करना कठिन है कि _not_ इसका उपयोग किसी महत्वपूर्ण चीज़ के लिए कर रहे हैं।

@bvaughn एक क्षेत्र जिसके साथ मैंने संघर्ष किया है, वह है जहां अपरिवर्तनीय और घटकों के बीच की रेखा खींचना है। घटकों में अपरिवर्तनीय वस्तुओं को पास करने से आप शुद्ध-सज्जाकार/मिश्रण का उपयोग बहुत आसानी से कर सकते हैं लेकिन फिर आप अपने घटकों में अपरिवर्तनीय कोड के साथ समाप्त हो जाते हैं (जो मुझे पसंद नहीं है)। अब तक मैंने अभी-अभी कहा है और किया है, लेकिन मुझे संदेह है कि आप चयनकर्ताओं का उपयोग सीधे Immutable.js के तरीकों तक पहुँचने के बजाय रेंडर () विधियों में करते हैं?

सच कहूं तो यह एक ऐसी चीज है जिस पर हमने अभी तक एक सख्त नीति को परिभाषित नहीं किया है। अक्सर हम अपने "स्मार्ट" कंटेनरों में चयनकर्ताओं का उपयोग अपनी अपरिवर्तनीय वस्तुओं से अतिरिक्त मूल मूल्यों के लिए करते हैं और फिर मूल मूल्यों को अपने घटकों को स्ट्रिंग्स, बूलियन आदि के रूप में पास करते हैं। कभी-कभी हम एक अपरिवर्तनीय वस्तु को पास करेंगे लेकिन जब हम करते हैं- हम लगभग हमेशा एक Record प्रकार पास करें ताकि घटक इसे मूल वस्तु (गेटर्स के साथ) की तरह व्यवहार कर सके।

मैं एक्शन क्रिएटर्स को अधिक तुच्छ बनाते हुए, विपरीत दिशा में आगे बढ़ रहा हूं। लेकिन मैं वास्तव में सिर्फ redux के साथ शुरुआत कर रहा हूँ। आपके दृष्टिकोण के बारे में कुछ प्रश्न:

१) आप अपने एक्शन क्रिएटर्स का परीक्षण कैसे करते हैं? मुझे जितना संभव हो उतना तर्क शुद्ध, तुल्यकालिक कार्यों में ले जाना पसंद है जो बाहरी सेवाओं पर निर्भर नहीं हैं क्योंकि इसका परीक्षण करना आसान है।
2) क्या आप हॉट रीलोडिंग के साथ समय यात्रा का उपयोग करते हैं? रिएक्ट redux devtools के साथ साफ-सुथरी चीजों में से एक यह है कि जब हॉट रीलोडिंग की स्थापना की जाती है, तो स्टोर नए रिड्यूसर के खिलाफ सभी क्रियाओं को फिर से चलाएगा। अगर मैं अपने तर्क को एक्शन क्रिएटर्स में ले जाता, तो मैं उसे खो देता।
३) यदि आपके एक्शन क्रिएटर्स प्रभाव लाने के लिए कई बार भेजते हैं, तो क्या इसका मतलब यह है कि आपका राज्य कुछ समय के लिए अमान्य स्थिति में है? (मैं यहां कई सिंक्रोनस प्रेषणों के बारे में सोच रहा हूं, न कि बाद के बिंदु पर अतुल्यकालिक रूप से प्रेषण)

हर जगह चयनकर्ताओं का प्रयोग करें

हां ऐसा लगता है कि आपके रेड्यूसर आपके राज्य का कार्यान्वयन विवरण हैं और आप एक क्वेरी एपीआई के माध्यम से अपने राज्य को अपने घटक में बेनकाब करते हैं।
किसी भी इंटरफ़ेस की तरह यह डिकूप करने की अनुमति देता है और राज्य को रिफैक्टर करना आसान बनाता है।

अपरिवर्तनीय जेएस का प्रयोग करें

नए JS सिंटैक्स के साथ IMO अब ImmutableJS का उपयोग करने के लिए इतना उपयोगी नहीं है क्योंकि आप सामान्य JS के साथ सूचियों और वस्तुओं को आसानी से संशोधित कर सकते हैं। जब तक आपके पास बहुत सारी संपत्तियों के साथ बहुत बड़ी सूचियां और वस्तुएं न हों और आपको प्रदर्शन कारणों से संरचनात्मक साझाकरण की आवश्यकता हो, ImmutableJS सख्त आवश्यकता नहीं है।

कार्रवाई में और अधिक करेंनिर्माता

@bvaughn आपको वास्तव में इस परियोजना को देखना चाहिए: https://github.com/yelouafi/redux-saga
जब मैंने @yelouafi को साग (शुरुआत में बैकएंड कॉन्सेप्ट) के बारे में चर्चा करना शुरू किया

१) आप अपने एक्शन क्रिएटर्स का परीक्षण कैसे करते हैं? मुझे जितना संभव हो उतना तर्क शुद्ध, तुल्यकालिक कार्यों में ले जाना पसंद है जो बाहरी सेवाओं पर निर्भर नहीं हैं क्योंकि इसका परीक्षण करना आसान है।

मैंने ऊपर इसका वर्णन करने की कोशिश की, लेकिन मूल रूप से ... मुझे लगता है कि यह आपके एक्शन-क्रिएटर्स को "बतख" जैसी दृष्टिकोण के साथ परीक्षण करने के लिए सबसे अधिक समझ में आता है। एक क्रिया-निर्माता का परिणाम भेजकर एक परीक्षण शुरू करें और फिर चयनकर्ताओं का उपयोग करके राज्य को सत्यापित करें। इस तरह- एकल परीक्षण के साथ आप एक्शन-क्रिएटर, उसके रिड्यूसर और सभी संबंधित चयनकर्ताओं को कवर कर सकते हैं।

2) क्या आप हॉट रीलोडिंग के साथ समय यात्रा का उपयोग करते हैं? रिएक्ट redux devtools के साथ साफ-सुथरी चीजों में से एक यह है कि जब हॉट रीलोडिंग की स्थापना की जाती है, तो स्टोर नए रिड्यूसर के खिलाफ सभी क्रियाओं को फिर से चलाएगा। अगर मैं अपने तर्क को एक्शन क्रिएटर्स में ले जाता, तो मैं उसे खो देता।

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

३) यदि आपके एक्शन क्रिएटर्स प्रभाव लाने के लिए कई बार भेजते हैं, तो क्या इसका मतलब यह है कि आपका राज्य कुछ समय के लिए अमान्य स्थिति में है? (मैं यहां कई सिंक्रोनस प्रेषणों के बारे में सोच रहा हूं, न कि बाद के बिंदु पर अतुल्यकालिक रूप से प्रेषण)

क्षणिक अमान्य स्थिति कुछ मामलों में आप वास्तव में टाल नहीं सकते हैं। जब तक अंतिम स्थिरता है तब तक यह आमतौर पर कोई समस्या नहीं है। और फिर, आपका राज्य अस्थायी रूप से अमान्य हो सकता है, भले ही आपका व्यावसायिक तर्क एक्शन-क्रिएटर्स या रिड्यूसर में हो। इसका साइड-इफेक्ट्स और आपके स्टोर की बारीकियों से अधिक लेना-देना है।

नए JS सिंटैक्स के साथ IMO अब ImmutableJS का उपयोग करने के लिए इतना उपयोगी नहीं है क्योंकि आप सामान्य JS के साथ सूचियों और वस्तुओं को आसानी से संशोधित कर सकते हैं। जब तक आपके पास बहुत सारी संपत्तियों के साथ बहुत बड़ी सूचियां और वस्तुएं न हों और आपको प्रदर्शन कारणों से संरचनात्मक साझाकरण की आवश्यकता हो, ImmutableJS सख्त आवश्यकता नहीं है।

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

@bvaughn आपको वास्तव में इस परियोजना को देखना चाहिए: https://github.com/yelouafi/redux-saga
जब मैंने @yelouafi को साग (शुरुआत में बैकएंड कॉन्सेप्ट) के बारे में चर्चा करना शुरू किया

मैंने वास्तव में पहले उस परियोजना की जाँच की है :) हालाँकि मैंने अभी तक इसका उपयोग नहीं किया है। यह साफ-सुथरा दिखता है।

मैंने ऊपर इसका वर्णन करने की कोशिश की, लेकिन मूल रूप से ... मुझे लगता है कि यह आपके एक्शन-क्रिएटर्स को "बतख" जैसी दृष्टिकोण के साथ परीक्षण करने के लिए सबसे अधिक समझ में आता है। एक क्रिया-निर्माता का परिणाम भेजकर एक परीक्षण शुरू करें और फिर चयनकर्ताओं का उपयोग करके राज्य को सत्यापित करें। इस तरह- एकल परीक्षण के साथ आप एक्शन-क्रिएटर, उसके रिड्यूसर और सभी संबंधित चयनकर्ताओं को कवर कर सकते हैं।

क्षमा करें, मुझे वह हिस्सा मिल गया है। मैं जो सोच रहा था वह उन परीक्षणों का हिस्सा है जो अतुल्यकालिकता के साथ बातचीत करते हैं। मैं इस तरह कुछ परीक्षण लिख सकता हूं:

var store = createStore();
store.dispatch(actions.startRequest());
store.dispatch(actions.requestResponseReceived({...});
strictEqual(isLoaded(store.getState());

लेकिन आपका परीक्षण कैसा दिखता है? कुछ इस तरह?

var mock = mockFetch();
store.dispatch(actions.request());
mock.expect("/api/foo.bar").andRespond("{status: OK}");
strictEqual(isLoaded(store.getState());

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

अगर कोड बदल दिया जाए तो क्या होगा? अगर मैं रेड्यूसर बदलता हूं, तो वही क्रियाएं फिर से चलाई जाती हैं लेकिन नए रेड्यूसर के साथ। जबकि अगर मैं एक्शन क्रिएटर को बदलता हूं, तो नए संस्करण फिर से नहीं चलाए जाते हैं। तो दो परिदृश्यों पर विचार करने के लिए:

एक रेड्यूसर के साथ:

1) मैं अपने ऐप में एक क्रिया का प्रयास करता हूं।
2) मेरे रेड्यूसर में एक बग है, जिसके परिणामस्वरूप गलत स्थिति है।
3) मैं रिड्यूसर में बग को ठीक करता हूं और बचाता हूं
४) समय यात्रा नए रेड्यूसर को लोड करती है और मुझे उस स्थिति में डाल देती है जिसमें मुझे होना चाहिए था।

जबकि एक एक्शन क्रिएटर के साथ

1) मैं अपने ऐप में एक क्रिया का प्रयास करता हूं।
2) एक्शन क्रिएटर में एक बग है, जिसके परिणामस्वरूप गलत एक्शन बनाया जा रहा है
3) मैं एक्शन क्रिएटर में बग को ठीक करता हूं और बचाता हूं
४) मैं अभी भी गलत स्थिति में हूं, जिसके लिए मुझे कम से कम फिर से कार्रवाई करने की आवश्यकता होगी, और संभवत: ताज़ा करें अगर यह मुझे पूरी तरह से टूटी हुई स्थिति में डाल देता है।

क्षणिक अमान्य स्थिति कुछ मामलों में आप वास्तव में टाल नहीं सकते हैं। जब तक अंतिम स्थिरता है तब तक यह आमतौर पर कोई समस्या नहीं है। और फिर, आपका राज्य अस्थायी रूप से अमान्य हो सकता है, भले ही आपका व्यावसायिक तर्क एक्शन-क्रिएटर्स या रिड्यूसर में हो। इसका साइड-इफेक्ट्स और आपके स्टोर की बारीकियों से अधिक लेना-देना है।

मुझे लगता है कि रेडक्स के बारे में सोचने का मेरा तरीका इस बात पर जोर देता है कि स्टोर हमेशा वैध स्थिति में हो। रेड्यूसर हमेशा एक वैध राज्य लेता है और एक वैध राज्य उत्पन्न करता है। आपको क्या लगता है कि कौन से मामले किसी को कुछ असंगत राज्यों को अनुमति देने के लिए मजबूर करते हैं?

रुकावट के लिए क्षमा करें, लेकिन अमान्य और मान्य स्थितियों से आपका क्या तात्पर्य है
यहां? डेटा लोड किया जा रहा है या क्रिया निष्पादित की जा रही है लेकिन अभी तक समाप्त नहीं हुई है देखो
मेरे लिए एक वैध क्षणिक स्थिति की तरह।

Redux @bvaughn और @sompylasar में क्षणिक अवस्था से तात्पर्य है ? या तो प्रेषण समाप्त होता है, या यह फेंकता है। अगर यह फेंकता है तो राज्य नहीं बदलता है।

जब तक आपके रेड्यूसर में कोड समस्याएँ नहीं हैं, Redux में केवल ऐसे राज्य हैं जो रेड्यूसर तर्क के अनुरूप हैं। किसी भी तरह भेजे गए सभी कार्यों को लेनदेन में संभाला जाता है: या तो पूरे पेड़ अपडेट होते हैं, या राज्य बिल्कुल नहीं बदलता है।

यदि पूरा पेड़ अपडेट होता है, लेकिन उचित तरीके से नहीं (जैसे कि एक राज्य जो रिएक्ट प्रस्तुत नहीं कर सकता है), यह सिर्फ आपने अपना काम सही ढंग से नहीं किया है :)

Redux में वर्तमान स्थिति पर विचार करना है कि एकल प्रेषण एक लेनदेन सीमा है।

हालांकि मैं @winstonewert की चिंता को समझता @winstonewert चाहता है कि यदि दूसरा एक्शन डिस्पैच विफल हो जाता है, तो हम 2 क्रियाओं को रोलबैक कर देते हैं।

@winstonewert मैंने अपने आंतरिक ढांचे में ऐसा कुछ लागू किया है और यह अब तक ठीक काम करता है: https://github.com/stample/atom-react/blob/master/src/atom/atom.js
मैं प्रतिपादन त्रुटियों को भी संभालना चाहता था: यदि किसी राज्य को सफलतापूर्वक प्रस्तुत नहीं किया जा सकता है तो मैं चाहता था कि यूआई को अवरुद्ध करने से बचने के लिए मेरा राज्य रोलबैक हो। दुर्भाग्य से अगली रिलीज तक रिएक्ट बहुत खराब काम करता है जब रेंडर विधियों में त्रुटियां होती हैं, इसलिए यह इतना उपयोगी नहीं था लेकिन भविष्य में हो सकता है।

मुझे पूरा यकीन है कि हम एक स्टोर को मिडलवेयर के साथ लेनदेन में एकाधिक सिंक प्रेषण स्वीकार करने की अनुमति दे सकते हैं।

हालांकि मुझे यकीन नहीं है कि रेंडरिंग त्रुटि के मामले में राज्य को रोलबैक करना संभव होगा, क्योंकि आम तौर पर जब हम अपने राज्य को प्रस्तुत करने का प्रयास करते हैं तो रेडक्स स्टोर पहले से ही "प्रतिबद्ध" होता है। मेरे ढांचे में एक "पहले ट्रांज़ेक्शनकॉमिट" हुक है जिसका उपयोग मैं प्रतिपादन को ट्रिगर करने और अंततः किसी भी रेंडर त्रुटि पर रोलबैक करने के लिए करता हूं।

@gaearon मुझे आश्चर्य है कि क्या आप इस तरह की सुविधाओं का समर्थन करने की योजना बना रहे हैं और यदि यह वर्तमान एपीआई के साथ संभव होगा।

मुझे ऐसा लगता है कि redux-batched-subcribe वास्तविक लेनदेन करने की अनुमति नहीं देता है, लेकिन केवल रेंडरिंग की संख्या को कम करता है। मैं जो देखता हूं वह यह है कि प्रत्येक प्रेषण के बाद स्टोर "प्रतिबद्ध" होता है, भले ही सदस्यता श्रोता को अंत में केवल एक बार निकाल दिया जाए

हमें पूर्ण लेनदेन समर्थन की आवश्यकता क्यों है? मुझे नहीं लगता कि मैं उपयोग के मामले को समझता हूं।

@gaearon मैं वास्तव में अभी तक निश्चित नहीं हूं लेकिन @winstonewert उपयोगकेस के बारे में और जानकर खुशी होगी।

विचार यह है कि आप dispatch([a1,a2]) और यदि a2 विफल रहता है, तो हम a1 को भेजे जाने से पहले राज्य में रोलबैक करते हैं।

अतीत में मैं अक्सर कई कार्यों को समकालिक रूप से भेज रहा हूं (उदाहरण के लिए एक ऑनक्लिक श्रोता पर, या एक एक्शन क्रिएटर में) और मुख्य रूप से कार्यान्वित लेनदेन को केवल सभी कार्यों के अंत में प्रस्तुत करने के तरीके के रूप में कार्यान्वित किया जा रहा है, लेकिन यह किया गया है redux-batched-subscribe प्रोजेक्ट द्वारा एक अलग तरीके से हल किया गया।

मेरे उपयोग के मामलों में लेन-देन पर आग लगने वाली कार्रवाइयां ज्यादातर अनावश्यक प्रस्तुतिकरण से बचने के लिए होती थीं, लेकिन कार्रवाइयां स्वतंत्र रूप से समझ में आती थीं, भले ही प्रेषण दूसरी कार्रवाई के लिए विफल हो, फिर भी पहली कार्रवाई को रोलबैक न करने से मुझे एक सुसंगत स्थिति मिल जाएगी ( लेकिन शायद वह नहीं जिसकी योजना बनाई गई थी...) मैं वास्तव में नहीं जानता कि क्या कोई उपयोगकेस के साथ आ सकता है जहां एक पूर्ण रोलबैक उपयोगी होगा

हालांकि जब प्रतिपादन विफल हो जाता है तो क्या अंतिम स्थिति में रोलबैक करने का प्रयास करना समझ में नहीं आता है जिसके लिए एक अपरिवर्तनीय स्थिति पर प्रगति करने की कोशिश करने के बजाय रेंडर विफल नहीं होता है?

क्या एक साधारण रेड्यूसर बढ़ाने वाला काम करेगा? जैसे

const enhanceReducerWithTheAbilityToConsumeMultipleActions = (reducer =>
  (state, actions) => (typeof actions.reduce === 'function'
    ? actions.reduce(reducer, state)
    : reducer(state, actions)
  )
)

इसके साथ, आप स्टोर में एक सरणी भेज सकते हैं। एन्हांसर व्यक्तिगत कार्रवाई को अनपैक करता है और इसे प्रत्येक रेड्यूसर को खिलाता है।

हाँ, और यह मौजूद है: https://github.com/tshelburne/redux-batched-actions

ओह @gaearon मुझे यह नहीं पता था। मैंने नहीं देखा कि 2 अलग-अलग परियोजनाएं थीं जो अलग-अलग तरीकों से एक समान उपयोगकेस को हल करने का प्रयास करती हैं:

• https://github.com/tshelburne/redux-batched-actions
• https://github.com/tappleby/redux-batched-subscribe

दोनों अनावश्यक रेंडरिंग से बचने की अनुमति देंगे, लेकिन पहला सभी बैच की गई क्रियाओं को रोलबैक करेगा जबकि दूसरा केवल असफल कार्रवाई को लागू नहीं करेगा।

@gaearon आउच, इसे न देखने के लिए मेरा बुरा। : निस्तब्ध:

एक्शन क्रिएटर्स अशुद्ध कोड का प्रतिनिधित्व करते हैं

मेरे पास शायद अधिकांश लोगों के रूप में रेडक्स के साथ ज्यादा व्यावहारिक अनुभव नहीं है, लेकिन पहली नजर में, मुझे "एक्शन क्रिएटर्स में अधिक करें और रेड्यूसर में कम करें" से असहमत होना चाहिए, मैंने हमारे अंदर कुछ इसी तरह की चर्चा की है कंपनी।

हैकर वे में: फेसबुक पर वेब ऐप डेवलपमेंट पर पुनर्विचार जहां फ्लक्स पैटर्न पेश किया गया है, वही समस्या जो फ्लक्स के आविष्कार की ओर ले जाती है वह अनिवार्य कोड है।

इस मामले में, एक एक्शन क्रिएटर जो I/O करता है, वह अनिवार्य कोड है।

हम काम पर Redux का उपयोग नहीं कर रहे हैं, लेकिन जहां मैं काम करता हूं वहां हमारे पास ठीक-ठाक क्रियाएं होती थीं (जो कि, निश्चित रूप से, सभी अपने आप समझ में आती हैं) और उन्हें एक बैच में ट्रिगर करते हैं। उदाहरण के लिए, जब आप किसी संदेश पर क्लिक करते हैं, तो तीन क्रियाएं ट्रिगर होती हैं: OPEN_MESSAGE_VIEW , FETCH_MESSAGE , MARK_NOTIFICATION_AS_READ ।

फिर यह पता चलता है कि ये "निम्न-स्तर" क्रियाएं किसी स्टोर के अंदर कुछ मूल्य निर्धारित करने के लिए "कमांड" या "सेटर" या "संदेश" से अधिक नहीं हैं। हम वापस भी जा सकते हैं और एमवीसी का उपयोग कर सकते हैं और अगर हम इसे इस तरह से करते रहें तो सरल कोड के साथ समाप्त हो सकता है।

एक मायने में, एक्शन क्रिएटर्स अशुद्ध कोड का प्रतिनिधित्व करते हैं, जबकि रेड्यूसर (और चयनकर्ता) शुद्ध कोड का प्रतिनिधित्व करते हैं । हास्केल लोगों ने यह पता लगाया है कि कम अशुद्ध कोड और अधिक शुद्ध कोड होना बेहतर है ।

उदाहरण के लिए, मेरे साइड प्रोजेक्ट (Redux का उपयोग करके) में, मैं वेबकिट के वाक् पहचान API का उपयोग करता हूं। आपके बोलते ही यह onresult घटना का उत्सर्जन करता है। दो विकल्प हैं - इन घटनाओं को कहाँ संसाधित किया जाता है?

• एक्शन क्रिएटर को पहले ईवेंट प्रोसेस करने के लिए कहें, फिर उसे स्टोर में भेजें।
• बस ईवेंट ऑब्जेक्ट को स्टोर में भेजें।

मैं नंबर दो के साथ गया: बस कच्ची घटना वस्तु को स्टोर में भेजें।

हालांकि, ऐसा लगता है कि जब गैर-सादे वस्तुओं को स्टोर में भेजा जाता है तो Redux देव-उपकरण इसे पसंद नहीं करते हैं, इसलिए मैंने इन घटना वस्तुओं को सादे वस्तुओं में बदलने के लिए एक्शन क्रिएटर में कुछ छोटे तर्क जोड़े। (एक्शन क्रिएटर में कोड इतना छोटा है कि यह गलत नहीं हो सकता।)

फिर रेड्यूसर इन बहुत ही आदिम घटनाओं को जोड़ सकता है और जो बोला जाता है उसकी प्रतिलिपि बना सकता है। क्योंकि वह तर्क शुद्ध कोड के अंदर रहता है, मैं इसे बहुत आसानी से लाइव कर सकता हूं (रिड्यूसर को हॉट-रीलोड करके)।

मैं @dtinth का समर्थन करना चाहता हूं। क्रियाओं को वास्तविक दुनिया से घटित घटनाओं का प्रतिनिधित्व करना चाहिए, न कि हम इन घटनाओं पर कैसे प्रतिक्रिया देना चाहते हैं। विशेष रूप से, सीक्यूआरएस देखें: हम वास्तविक जीवन की घटनाओं के बारे में अधिक से अधिक विवरण लॉग करना चाहते हैं, और संभावना है कि भविष्य में रेड्यूसर में सुधार होगा और पुराने घटनाओं को नए तर्क के साथ संसाधित करेगा।

@ dtinth @ denis-sokolov मैं उस पर भी आपसे सहमत हूं। बीटीडब्ल्यू जब मैं रेडक्स-सागा प्रोजेक्ट का संदर्भ दे रहा था तो मैंने शायद यह स्पष्ट नहीं किया कि मैं एक्शन क्रिएटर्स को बढ़ने और समय के साथ अधिक से अधिक जटिल बनाने के विचार के खिलाफ हूं।

Redux-saga प्रोजेक्ट भी वही करने का एक प्रयास है जो आप @dtinth का वर्णन कर रहे हैं लेकिन आप दोनों जो कहते हैं, उसमें एक

हो सकता है कि आप मूल चर्चा के इस बिंदु को देख सकते हैं जो Redux गाथा चर्चा की ओर ले जाती है: https://github.com/paldepind/functional-frontend-architecture/issues/20#issuecomment-162822909

हल करने के लिए उपयोग करें

कल्पना कीजिए कि आपके पास एक Todo ऐप है, जिसमें स्पष्ट TodoCreated ईवेंट है। फिर हम आपसे ऑनबोर्डिंग ऐप को कोड करने के लिए कहते हैं। एक बार जब उपयोगकर्ता एक टूडू बनाता है, तो हमें उसे पॉपअप के साथ बधाई देनी चाहिए।

"अशुद्ध" तरीका:

यह वही है जो @bvaughn पसंद करते हैं

function createTodo(todo) {
   return (dispatch, getState) => {
       dispatch({type: "TodoCreated",payload: todo});
       if ( getState().isOnboarding ) {
         dispatch({type: "ShowOnboardingTodoCreateCongratulation"});
       }
   }
}

मुझे यह दृष्टिकोण पसंद नहीं है क्योंकि यह एक्शन निर्माता को ऐप व्यू के लेआउट के साथ अत्यधिक जोड़ता है। यह मानता है कि एक्शन क्रिएटर को अपना निर्णय लेने के लिए यूआई स्टेट ट्री की संरचना को जानना चाहिए।

"कच्ची घटनाओं से सब कुछ की गणना करें" तरीका:

यह वही है जो @ denis-sokolov @dtinth पसंद करते हैं:

function onboardingTodoCreateCongratulationReducer(state = defaultState, action) {
  var isOnboarding = isOnboardingReducer(state.isOnboarding,action);
  switch (action) {
    case "TodoCreated": 
        return {isOnboarding: isOnboarding, isCongratulationDisplayed: isOnboarding}
    default: 
        return {isOnboarding: isOnboarding, isCongratulationDisplayed: false}
  }
}

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

सरलीकृत गाथा रास्ता।

Redux-saga जनरेटर का उपयोग करता है और यदि आप अभ्यस्त नहीं हैं तो थोड़ा जटिल लग सकता है, लेकिन मूल रूप से एक सरलीकृत कार्यान्वयन के साथ आप कुछ इस तरह लिखेंगे:

function createTodo(todo) {
   return (dispatch, getState) => {
       dispatch({type: "TodoCreated",payload: todo});
   }
}

function onboardingSaga(state, action, actionCreators) {
  switch (action) {
    case "OnboardingStarted": 
        return {onboarding: true, ...state};
    case "OnboardingStarted": 
        return {onboarding: false, ...state};
    case "TodoCreated": 
        if ( state.onboarding ) dispatch({type: "ShowOnboardingTodoCreateCongratulation"});
        return state;
    default: 
        return state;
  }
}

गाथा एक स्टेटफुल अभिनेता है जो घटनाओं को प्राप्त करता है और प्रभाव पैदा कर सकता है। यहां इसे एक अशुद्ध रेड्यूसर के रूप में लागू किया गया है ताकि आपको यह पता चल सके कि यह क्या है लेकिन यह वास्तव में रेडक्स-सागा प्रोजेक्ट में नहीं है।

नियमों को थोड़ा जटिल करना:

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

क्या आप देख सकते हैं कि समय के साथ सभी 3 कार्यान्वयनों में कोड कैसे गड़बड़ हो जाएगा क्योंकि ऑनबोर्डिंग अधिक से अधिक जटिल हो जाती है?

रेडक्स-सागा तरीका

Redux-saga और उपरोक्त ऑनबोर्डिंग नियमों के साथ, आप कुछ इस तरह लिखेंगे

function* onboarding() {
  while ( true ) {
    take(ONBOARDING_STARTED)
    take(TODO_CREATED)
    put(SHOW_TODO_CREATION_CONGRATULATION)
    take(ONBOARDING_ENDED)
  }
}

मुझे लगता है कि यह उपरोक्त समाधानों की तुलना में इस उपयोगकेस को बहुत आसान तरीके से हल करता है। अगर मैं गलत हूं तो कृपया मुझे अपना सरल कार्यान्वयन दें :)

आपने अशुद्ध कोड के बारे में बात की, और इस मामले में Redux-saga कार्यान्वयन में कोई अशुद्धता नहीं है क्योंकि टेक/पुट प्रभाव वास्तव में डेटा हैं। जब take() कहा जाता है तो यह निष्पादित नहीं होता है, यह निष्पादित करने के लिए प्रभाव का एक विवरणक देता है, और किसी बिंदु पर एक दुभाषिया शुरू होता है, इसलिए आपको सागा का परीक्षण करने के लिए किसी भी नकली की आवश्यकता नहीं है। यदि आप हास्केल करने वाले एक कार्यात्मक देव हैं तो फ्री/आईओ मोनैड सोचें।

इस मामले में यह अनुमति देता है:

• जटिल कार्रवाई से बचेंनिर्माता और इसे getState पर निर्भर करता है
• निहित को और अधिक स्पष्ट करें
• ट्रांसवर्सल लॉजिक (जैसे ऊपर की ऑनबोर्डिंग) को अपने मुख्य व्यवसाय डोमेन (टूडू बनाना) से जोड़ने से बचें

यह एक व्याख्या परत भी प्रदान कर सकता है, जो कच्ची घटनाओं को अधिक सार्थक/उच्च-स्तरीय घटनाओं में अनुवाद करने की अनुमति देता है (जैसे ईएलएम घटनाओं को लपेटकर करता है जैसे वे बुलबुला करते हैं)।

उदाहरण:

• "TIMELINE_SCROLLED_NEAR-BOTTOM" से "NEXT_PAGE_LOADED" हो सकता है
• यदि त्रुटि कोड 401 है, तो "REQUEST_FAILED" "USER_DISCONNECTED" की ओर ले जा सकता है।
• "HASHTAG_FILTER_ADDED" से "CONTENT_RELOADED" हो सकता है

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

@slorber यह एक उत्कृष्ट उदाहरण है! प्रत्येक दृष्टिकोण के लाभों और कमियों को स्पष्ट रूप से समझाने के लिए समय निकालने के लिए धन्यवाद। (मुझे यह भी लगता है कि डॉक्स में जाना चाहिए।)

मैं एक समान विचार का पता लगाता था (जिसे मैंने "कार्यकर्ता घटक" नाम दिया था)। मूल रूप से, यह एक रिएक्ट घटक है जो कुछ भी प्रस्तुत नहीं करता है ( render: () => null ), लेकिन घटनाओं को सुनता है (जैसे स्टोर से) और अन्य दुष्प्रभावों को ट्रिगर करता है। उस कार्यकर्ता घटक को तब एप्लिकेशन रूट घटक के अंदर रखा जाता है। जटिल दुष्प्रभावों से निपटने का एक और पागल तरीका। :अटक_बाहर_जीभ:

जब मैं सो रहा था तब यहाँ बहुत चर्चा हुई।

@winstonewert , आप समय-यात्रा और छोटी गाड़ी कोड को फिर से चलाने के बारे में एक अच्छी बात उठाते हैं। मुझे लगता है कि कुछ प्रकार के बग/परिवर्तन किसी भी तरह से समय-यात्रा के साथ काम नहीं करेंगे, लेकिन मुझे लगता है कि कुल मिलाकर आप सही हैं।

@dtinth , मुझे खेद है, लेकिन मैं आपकी अधिकांश टिप्पणियों के साथ अनुसरण नहीं कर रहा हूं। आपके एक्शन-क्रिएटर/रेड्यूसर "डक्स" कोड का कुछ हिस्सा अशुद्ध होना चाहिए, जिसमें इसके कुछ हिस्से को डेटा लाना है। इसके अलावा तुमने मुझे खो दिया। मेरी प्रारंभिक पोस्ट के प्राथमिक उद्देश्यों में से केवल एक व्यावहारिकता थी।

@winstonewert ने कहा, "मुझे लगता है कि
@slorber ने पूछा, "Redux @bvaughn और @sompylasar में क्षणिक स्थिति से आपका क्या मतलब है? या तो प्रेषण समाप्त होता है, या यह फेंकता है। यदि यह फेंकता है तो राज्य नहीं बदलता है।"

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

कल्पना करें कि आपके एप्लिकेशन स्टोर में कुछ खोजने योग्य वस्तुएं हैं: [{id: 1, name: "Alex"}, {id: 2, name: "Brian"}, {id: 3, name: "Charles"}] । उपयोगकर्ता ने फ़िल्टर टेक्स्ट "ई" दर्ज किया है और इसलिए खोज मिडलवेयर में आईडी 1 और 3 की एक सरणी है। अब कल्पना करें कि उपयोगकर्ता 1 (एलेक्स) हटा दिया गया है- या तो स्थानीय रूप से उपयोगकर्ता-क्रिया के जवाब में या दूरस्थ डेटा के रीफ्रेश के जवाब में अब वह उपयोगकर्ता रिकॉर्ड शामिल नहीं है। जब आपका रेड्यूसर उपयोगकर्ता संग्रह को अपडेट करता है, तो आपका स्टोर अस्थायी रूप से अमान्य हो जाएगा- क्योंकि रेडक्स-सर्च उस आईडी को संदर्भित करेगा जो अब संग्रह में मौजूद नहीं है। एक बार मिडलवेयर के फिर से चलने के बाद यह अमान्य स्थिति को ठीक कर देगा। इस तरह की बात तब भी हो सकती है जब आपके पेड़ का एक नोड दूसरे नोड से संबंधित हो।

@slorber ने कहा, "मुझे यह दृष्टिकोण पसंद नहीं है क्योंकि यह एक्शन क्रिएटर को ऐप व्यू के लेआउट के साथ अत्यधिक जोड़ता है। यह मानता है कि एक्शन क्रिएटर को अपना निर्णय लेने के लिए यूआई स्टेट ट्री की संरचना को जानना चाहिए।"

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

आपके द्वारा लिखे गए उदाहरण कोड के लायक क्या है, जो मुझे पसंद है वह उस तरह की चीज नहीं है जो मेरे दिमाग में थी। हो सकता है कि मैंने खुद को समझाने का खराब काम किया हो। मुझे लगता है कि इस तरह कुछ चर्चा करने में कठिनाई यह है कि यह आम तौर पर सरल या सामान्य उदाहरणों में प्रकट नहीं होता है। (उदाहरण के लिए मानक TODO MVC ऐप इस तरह की बारीक चर्चाओं के लिए पर्याप्त जटिल नहीं है।)

अंतिम बिंदु पर स्पष्टता के लिए संपादित किया गया।

Btw @slorber यहाँ एक उदाहरण है जो मेरे मन में था। यह थोड़ा सा कल्पित है।

मान लें कि आपके राज्य में कई नोड हैं। उन नोड्स में से एक साझा संसाधनों को संग्रहीत करता है। ("साझा" से मेरा मतलब उन संसाधनों से है जो स्थानीय रूप से कैश किए गए हैं और आपके एप्लिकेशन के भीतर कई पृष्ठों द्वारा एक्सेस किए गए हैं।) इन साझा संसाधनों के अपने स्वयं के एक्शन-क्रिएटर और रेड्यूसर ("डक") हैं। एक अन्य नोड किसी विशेष एप्लिकेशन पेज के लिए जानकारी संग्रहीत करता है। आपके पेज का भी अपना डक है।

मान लें कि आपके पृष्ठ को नवीनतम और महानतम चीज़ों को लोड करने की आवश्यकता है और फिर उपयोगकर्ता को इसे संपादित करने की अनुमति दें। यहाँ एक उदाहरण क्रिया-निर्माता दृष्टिकोण है जिसका उपयोग मैं ऐसी स्थिति के लिए कर सकता हूँ:

import { fetchThing, thingSelector } from 'resources/thing/duck'
import { showError } from 'messages/duck'

export function fetchAndProcessThing ({ params }): Object {
  const { id } = params
  return async ({ dispatch, getState }) => {
    try {
      await dispatch(fetchThing({ id }))

      const thing = thingSelector(getState())

      dispatch({ type: 'PROCESS_THING', thing })
    } catch (err) {
      dispatch(showError(`Invalid thing id="${id}".`))
    }
  }
}

हो सकता है कि @winstonewert चाहता है कि यदि दूसरा एक्शन डिस्पैच विफल हो जाता है, तो हम 2 क्रियाओं को रोलबैक कर देते हैं।

नहीं, मैं एक एक्शन क्रिएटर नहीं लिखूंगा जो दो कार्रवाइयां भेजता है। मैं एक एकल क्रिया को परिभाषित करता हूं जिसने दो चीजें की हैं। ओपी ऐसे एक्शन क्रिएटर्स को प्राथमिकता देता है जो छोटे कार्यों को प्रेषित करते हैं जो क्षणिक अमान्य राज्यों को नापसंद करते हैं।

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

यह वास्तव में उस तरह का मामला है जो मुझे परेशान करता है। मेरे दिमाग में, सूचकांक आदर्श रूप से कुछ ऐसा होगा जो पूरी तरह से रेड्यूसर या चयनकर्ता द्वारा नियंत्रित किया जाएगा। खोज को अप-टू-डेट रखने के लिए अतिरिक्त कार्रवाइयां भेजने के लिए रेडक्स का कम शुद्ध उपयोग लगता है।

ओपी ऐसे एक्शन क्रिएटर्स को प्राथमिकता देता है जो छोटे कार्यों को प्रेषित करते हैं जो क्षणिक अमान्य राज्यों को नापसंद करते हैं।

बिल्कुल नहीं। जब राज्य-वृक्ष के आपके क्रिया-निर्माता के नोड के संबंध में मैं एकल कार्यों का पक्ष लेता हूं। लेकिन अगर एक एकल, वैचारिक उपयोगकर्ता "कार्रवाई" राज्य-पेड़ के कई नोड्स को प्रभावित करती है तो आपको कई कार्यों को प्रेषित करने की आवश्यकता होगी। आप प्रत्येक क्रिया को अलग से लागू कर सकते हैं (जो मुझे लगता है कि _bad_ है) या आप एक एकल क्रिया-निर्माता को क्रियाओं को भेज सकते हैं (रेडक्स-थंक तरीका, जो मुझे लगता है कि _better_ है क्योंकि यह आपकी दृश्य परत से उस जानकारी को छुपाता है)।

यह वास्तव में उस तरह का मामला है जो मुझे परेशान करता है। मेरे दिमाग में, सूचकांक आदर्श रूप से कुछ ऐसा होगा जो पूरी तरह से रेड्यूसर या चयनकर्ता द्वारा नियंत्रित किया जाएगा। खोज को अप-टू-डेट रखने के लिए अतिरिक्त कार्रवाइयां भेजने के लिए रेडक्स का कम शुद्ध उपयोग लगता है।

आप अतिरिक्त कार्रवाइयां नहीं भेज रहे हैं. खोज एक मिडलवेयर है। यह स्वचालित है। लेकिन एक क्षणिक अवस्था मौजूद होती है जब आपके पेड़ के दो नोड सहमत नहीं होते हैं।

@bvaughn ओह, ऐसे शुद्धतावादी होने के लिए खेद है!

ठीक है, अशुद्ध कोड का संबंध डेटा लाने और अन्य दुष्प्रभाव/आईओ से है, जबकि शुद्ध कोड किसी भी दुष्प्रभाव को ट्रिगर नहीं कर सकता है। शुद्ध और अशुद्ध कोड के बीच तुलना के लिए यह तालिका देखें।

फ्लक्स की सर्वोत्तम प्रथाओं का कहना है कि एक क्रिया को "उपयोगकर्ता की कार्रवाई का वर्णन करना चाहिए, बसने वाला नहीं है।" फ्लक्स डॉक्स ने यह भी संकेत दिया कि ये कार्रवाइयाँ कहाँ से आने वाली हैं:

जब नया डेटा सिस्टम में प्रवेश करता है, चाहे वह एप्लिकेशन के साथ इंटरैक्ट करने वाले व्यक्ति के माध्यम से हो या वेब एपीआई कॉल के माध्यम से, उस डेटा को एक क्रिया में पैक किया जाता है - डेटा के नए क्षेत्रों और एक विशिष्ट क्रिया प्रकार से युक्त एक वस्तु शाब्दिक।

मूल रूप से, क्रियाएँ तथ्य / डेटा हैं जो "क्या हुआ" का वर्णन करते हैं, न कि क्या होना चाहिए। स्टोर इन क्रियाओं पर केवल समकालिक रूप से, अनुमानित रूप से, और बिना किसी अन्य दुष्प्रभाव के प्रतिक्रिया कर सकते हैं। अन्य सभी दुष्प्रभावों को एक्शन क्रिएटर्स (या सागा: विंक :) में नियंत्रित किया जाना चाहिए।

उदाहरण

मैं यह नहीं कह रहा हूं कि यह सबसे अच्छा तरीका है या किसी अन्य तरीके से बेहतर है, या एक अच्छा तरीका भी है। लेकिन यही वह है जिसे मैं वर्तमान में सर्वोत्तम अभ्यास मानता हूं।

उदाहरण के लिए, मान लें कि उपयोगकर्ता स्कोरबोर्ड देखना चाहता है जिसके लिए किसी दूरस्थ सर्वर से कनेक्शन की आवश्यकता होती है। यहाँ क्या होना चाहिए:

• उपयोगकर्ता स्कोरबोर्ड देखें बटन पर क्लिक करता है।
• स्कोरबोर्ड दृश्य लोडिंग संकेतक के साथ प्रदर्शित होता है।
• स्कोरबोर्ड लाने के लिए सर्वर को एक अनुरोध भेजा जाता है।
• प्रतिक्रिया की प्रतीक्षा करें।
• यदि यह सफल होता है, तो स्कोरबोर्ड प्रदर्शित करें।
• यदि यह विफल हो जाता है, तो स्कोरबोर्ड बंद हो जाता है और एक त्रुटि संदेश के साथ एक संदेश बॉक्स दिखाई देता है। उपयोगकर्ता इसे बंद कर सकता है।
• उपयोगकर्ता स्कोरबोर्ड को बंद कर सकता है।

यह मानते हुए कि कार्रवाई केवल उपयोगकर्ता की कार्रवाई या सर्वर प्रतिक्रिया के परिणामस्वरूप स्टोर तक पहुंच सकती है, हम 5 क्रियाएं बना सकते हैं।

• SCOREBOARD_VIEW (उपयोगकर्ता द्वारा स्कोरबोर्ड देखें बटन पर क्लिक करने के परिणामस्वरूप)
• SCOREBOARD_FETCH_SUCCESS (सर्वर से सफल प्रतिक्रिया के परिणामस्वरूप)
• SCOREBOARD_FETCH_FAILURE (सर्वर से त्रुटि प्रतिक्रिया के परिणामस्वरूप)
• SCOREBOARD_CLOSE (उपयोगकर्ता द्वारा बंद करें बटन पर क्लिक करने के परिणामस्वरूप)
• MESSAGE_BOX_CLOSE (उपयोगकर्ता द्वारा संदेश बॉक्स पर बंद करें बटन पर क्लिक करने के परिणामस्वरूप)

ये 5 क्रियाएं उपरोक्त सभी आवश्यकताओं को पूरा करने के लिए पर्याप्त हैं। आप देख सकते हैं कि पहली 4 क्रियाओं का किसी "बतख" से कोई लेना-देना नहीं है। प्रत्येक क्रिया केवल यह बताती है कि बाहरी दुनिया में क्या हुआ (उपयोगकर्ता ऐसा करना चाहता है, सर्वर ने कहा है कि) और किसी भी रेड्यूसर द्वारा उपभोग किया जा सकता है। हमारे पास MESSAGE_BOX_OPEN कार्रवाई भी नहीं है, क्योंकि यह "क्या हुआ" नहीं है (हालाँकि यही होना चाहिए)।

राज्य के पेड़ को बदलने का एकमात्र तरीका एक क्रिया का उत्सर्जन करना है, एक वस्तु जो वर्णन करती है कि क्या हुआ। — Redux की README

वे इन एक्शन क्रिएटर्स के साथ चिपके हुए हैं:

function viewScoreboard () {
  return async function (dispatch) {
    dispatch({ type: 'SCOREBOARD_VIEW' })
    try {
      const result = fetchScoreboardFromServer()
      dispatch({ type: 'SCOREBOARD_FETCH_SUCCESS', result })
    } catch (e) {
      dispatch({ type: 'SCOREBOARD_FETCH_FAILURE', error: String(e) })
    }
  }
}
function closeScoreboard () {
  return { type: 'SCOREBOARD_CLOSE' }
}

फिर स्टोर का प्रत्येक भाग (रिड्यूसर द्वारा शासित) इन क्रियाओं पर प्रतिक्रिया कर सकता है:

| स्टोर/रेड्यूसर का हिस्सा | व्यवहार |
| --- | --- |
| स्कोरबोर्ड व्यू | पर सच करने के लिए अद्यतन दृश्यता SCOREBOARD_VIEW , पर झूठी SCOREBOARD_CLOSE और SCOREBOARD_FETCH_FAILURE |
| ScoreboardLoadingIndicator | SCOREBOARD_VIEW पर दृश्यता को सत्य पर अपडेट करें, SCOREBOARD_FETCH_* पर गलत पर अपडेट करें |
| स्कोरबोर्डडेटा | SCOREBOARD_FETCH_SUCCESS पर स्टोर के अंदर डेटा अपडेट करें |
| संदेशबॉक्स | SCOREBOARD_FETCH_FAILURE पर दृश्यता को सत्य में अपडेट करें और संदेश को स्टोर करें, और MESSAGE_BOX_CLOSE पर दृश्यता को असत्य में अपडेट करें |

जैसा कि आप देख सकते हैं, एक ही क्रिया स्टोर के कई हिस्सों को प्रभावित कर सकती है। स्टोर को केवल एक आदेश (क्या करना है?) के बजाय एक क्रिया (क्या हुआ?) का उच्च-स्तरीय विवरण दिया जाता है। नतीजतन:

1. त्रुटियों को इंगित करना आसान है।

संदेश बॉक्स की स्थिति को कुछ भी प्रभावित नहीं कर सकता है। इसे कोई किसी कारण से खोलने के लिए नहीं कह सकता। यह केवल उसी पर प्रतिक्रिया करता है जिसकी उसने सदस्यता ली है (उपयोगकर्ता क्रियाएं और सर्वर प्रतिक्रियाएं)।

उदाहरण के लिए, यदि सर्वर स्कोरबोर्ड लाने में विफल रहता है, और एक संदेश बॉक्स प्रकट नहीं होता है, तो आपको यह पता लगाने की आवश्यकता नहीं है कि SHOW_MESSAGE_BOX कार्रवाई क्यों नहीं भेजी जाती है। यह स्पष्ट हो जाता है कि संदेश बॉक्स ने SCOREBOARD_FETCH_FAILURE क्रिया को ठीक से हैंडल नहीं किया।

एक फिक्स तुच्छ है और इसे गर्म-पुनः लोड किया जा सकता है और समय-यात्रा की जा सकती है।

1. एक्शन क्रिएटर्स और रेड्यूसर का अलग-अलग परीक्षण किया जा सकता है।

आप यह जांच सकते हैं कि क्या एक्शन क्रिएटर्स ने बाहरी दुनिया में क्या होता है, इसका सही वर्णन किया है, इस पर ध्यान दिए बिना कि स्टोर उन पर कैसे प्रतिक्रिया करते हैं।

उसी तरह, रेड्यूसर का परीक्षण आसानी से किया जा सकता है कि क्या यह बाहरी दुनिया के कार्यों के लिए ठीक से प्रतिक्रिया करता है।

(एकीकरण परीक्षण अभी भी बहुत उपयोगी होगा।)

कोई चिंता नहीं। :) मैं और स्पष्टीकरण की सराहना करता हूं। वास्तव में ऐसा लगता है कि हम यहां सहमत हो रहे हैं। आपके उदाहरण एक्शन-क्रिएटर, viewScoreboard , यह मेरे उदाहरण एक्शन-क्रिएटर fetchAndProcessThing के ठीक ऊपर जैसा दिखता है।

एक्शन क्रिएटर्स और रेड्यूसर का अलग-अलग परीक्षण किया जा सकता है।

जबकि मैं इससे सहमत हूं, मुझे लगता है कि उन्हें एक साथ परीक्षण करने के लिए अक्सर यह अधिक व्यावहारिक समझ में आता है। यह संभावना है कि या तो आपकी क्रिया _or_ या आपका रेड्यूसर (शायद दोनों) सुपर सरल हैं और इसलिए अलगाव में सरल परीक्षण का रिटर्न-ऑन-प्रयास मूल्य कम है। इसलिए मैंने एक्शन-क्रिएटर, रेड्यूसर और संबंधित चयनकर्ताओं को एक साथ (एक "बतख" के रूप में) परीक्षण करने का प्रस्ताव दिया।

लेकिन अगर एक एकल, वैचारिक उपयोगकर्ता "कार्रवाई" राज्य-पेड़ के कई नोड्स को प्रभावित करती है तो आपको कई कार्यों को प्रेषित करने की आवश्यकता होगी।

ठीक यही वह जगह है जहां मुझे लगता है कि आप जो कर रहे हैं वह रेडक्स के लिए सर्वोत्तम प्रथाओं से अलग है। मुझे लगता है कि मानक तरीका एक क्रिया है जो राज्य के पेड़ के कई नोड्स का जवाब देती है।

आह, दिलचस्प अवलोकन @winstonewert। हम प्रत्येक "बतख" बंडल के लिए अद्वितीय प्रकार-स्थिरांक का उपयोग करने के एक पैटर्न का पालन कर रहे हैं और इसलिए विस्तार से, एक रेड्यूसर केवल अपने भाई क्रिया-निर्माताओं द्वारा भेजे गए कार्यों का जवाब देता है। मुझे ईमानदारी से यकीन नहीं है कि मैं कैसा महसूस करता हूं, शुरू में, मनमाने ढंग से रेड्यूसर किसी कार्रवाई का जवाब देने के बारे में। यह थोड़ा खराब एनकैप्सुलेशन जैसा लगता है।

हम प्रत्येक "बतख" बंडल के लिए अद्वितीय प्रकार-स्थिरांक का उपयोग करने के एक पैटर्न का अनुसरण कर रहे हैं

ध्यान दें कि हम डॉक्स में कहीं भी इसका समर्थन नहीं करते हैं ;-) यह नहीं कह रहे हैं कि यह बुरा है, लेकिन यह लोगों को Redux के बारे में निश्चित-कभी-कभी-गलत विचार देता है।

इसलिए विस्तार से, एक रिड्यूसर केवल अपने सहोदर एक्शन-क्रिएटर्स द्वारा भेजे गए कार्यों का जवाब देता है

Redux में रेड्यूसर/एक्शन क्रिएटर पेयरिंग जैसी कोई चीज नहीं है। यह विशुद्ध रूप से एक बतख की बात है। कुछ लोग इसे पसंद करते हैं लेकिन यह Redux/Flux मॉडल की मूलभूत शक्तियों को अस्पष्ट करता है: राज्य उत्परिवर्तन एक दूसरे से और उनके कारण कोड से अलग हो जाते हैं।

मुझे ईमानदारी से यकीन नहीं है कि मैं कैसा महसूस करता हूं, शुरू में, मनमाने ढंग से रेड्यूसर किसी कार्रवाई का जवाब देने के बारे में। यह थोड़ा खराब एनकैप्सुलेशन जैसा लगता है।

आप जो इनकैप्सुलेशन सीमाओं पर विचार करते हैं उसके आधार पर। ऐप में कार्रवाइयां वैश्विक हैं, और मुझे लगता है कि यह ठीक है। एप्लिकेशन का एक भाग जटिल उत्पाद आवश्यकताओं के कारण दूसरे भाग के कार्यों पर प्रतिक्रिया देना चाह सकता है, और हमें लगता है कि यह ठीक है। युग्मन न्यूनतम है: आप जिस पर निर्भर करते हैं वह एक स्ट्रिंग और क्रिया वस्तु आकार है। लाभ यह है कि एक्शन क्रिएटर्स के साथ ढेर सारी वायरिंग बनाए बिना ऐप के विभिन्न हिस्सों में क्रियाओं की नई व्युत्पत्तियों को पेश करना आसान है। आपके घटक इस बात से अनभिज्ञ रहते हैं कि जब कोई क्रिया भेजी जाती है तो वास्तव में क्या होता है - यह रेड्यूसर के अंत में तय किया जाता है।

तो हमारी आधिकारिक सिफारिश यह है कि आपको पहले कोशिश करनी चाहिए कि अलग-अलग रिड्यूसर एक ही कार्रवाई के लिए प्रतिक्रिया दें। अगर यह अजीब लगता है, तो निश्चित रूप से, अलग से एक्शन क्रिएटर बनाएं। लेकिन इस दृष्टिकोण से शुरू न करें।

हम चयनकर्ताओं का उपयोग करने की अनुशंसा करते हैं—वास्तव में, हम रिड्यूसर के साथ राज्य ("चयनकर्ताओं") से पढ़े जाने वाले रखरखाव कार्यों को निर्यात करने की सलाह देते हैं, और घटक में हार्डकोडिंग राज्य संरचना के बजाय हमेशा mapStateToProps में उनका उपयोग करते हैं। इस तरह आंतरिक स्थिति के आकार को बदलना आसान है। आप कर सकते हैं (लेकिन जरूरी नहीं है) उपयोग फिर से चुनें प्रदर्शन के लिए है, लेकिन आप भी चयनकर्ताओं को लागू कर सकते भोलेपन में की तरह shopping-cart उदाहरण ।

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

• अनिवार्य शैली में, स्टोर को "क्या करना है" दिया जाता है, उदाहरण के लिए SHOW_MESSAGE_BOX या SHOW_ERROR
• प्रतिक्रियाशील शैली में, स्टोर को "जो हुआ उसका एक तथ्य" दिया जाता है, उदाहरण के लिए DATA_FETCHING_FAILED या USER_ENTERED_INVALID_THING_ID । स्टोर तदनुसार प्रतिक्रिया करता है।

पिछले उदाहरण में, मेरे पास SHOW_MESSAGE_BOX कार्रवाई या showError('Invalid thing id="'+id+'"') कार्रवाई निर्माता नहीं है, क्योंकि यह तथ्य नहीं है। यह एक आदेश है।

एक बार जब वह तथ्य स्टोर में प्रवेश कर जाता है, तो आप उस तथ्य को अपने शुद्ध रेड्यूसर के अंदर कमांड में अनुवाद कर सकते हैं, उदा

// type Command = State → State
// :: Action → Command
function interpretAction (action) {
  switch (action.type) {
  case 'DATA_FETCHING_FAILED':
    return showErrorMessage('Data fetching failed')
    break
  case 'USER_ENTERED_INVALID_THING_ID':
    return showErrorMessage('User entered invalid thing ID')
    break
  case 'CLOSE_ERROR_MESSAGE':
    return hideErrorMessage()
    break
  default:
    return doNothing()
  }
}

// :: (State, Action) → State
function errorMessageReducer (state, action) {
  return interpretAction(action)(state)
}

const showErrorMessage = message => state => ({ visible: true, message })
const hideErrorMessage = () => state => ({ visible: false })
const doNothing = () => state => state

जब कोई कार्रवाई स्टोर में "एक आदेश" के बजाय "एक तथ्य" के रूप में जाती है, तो इसके गलत होने की संभावना कम होती है, क्योंकि, यह एक तथ्य है।

अब, यदि आपके रेड्यूसर ने उस तथ्य की गलत व्याख्या की है, तो इसे आसानी से ठीक किया जा सकता है और फिक्स समय के साथ यात्रा कर सकता है। हालांकि, अगर आपके एक्शन क्रिएटर्स उस तथ्य की गलत व्याख्या करते हैं, तो आपको अपने एक्शन क्रिएटर्स को फिर से चलाना होगा।

आप अपना रेड्यूसर भी बदल सकते हैं ताकि जब USER_ENTERED_INVALID_THING_ID आग लगे, तो आईडी टेक्स्ट फ़ील्ड रीसेट हो जाए। और वह परिवर्तन भी समय के साथ चलता है। आप अपने त्रुटि संदेश को स्थानीयकृत भी कर सकते हैं और पृष्ठ को रीफ्रेश किए बिना भी। यह फीडबैक लूप को मजबूत करता है, और डिबगिंग और ट्वीकिंग को बहुत आसान बनाता है।

(मैं यहां केवल पेशेवरों के बारे में बात कर रहा हूं, निश्चित रूप से विपक्ष हैं। आपको उस तथ्य का प्रतिनिधित्व करने के बारे में बहुत कुछ सोचना होगा, यह देखते हुए कि आपका स्टोर केवल इन तथ्यों को समकालिक रूप से और बिना साइड-इफेक्ट के प्रतिक्रिया दे सकता है। के बारे में चर्चा देखें यह प्रश्न मैंने StackOverflow पर पोस्ट किया है । मुझे लगता है कि हमने अभी तक उस हिस्से को खींचा नहीं है।)

मुझे ईमानदारी से यकीन नहीं है कि मैं कैसा महसूस करता हूं, शुरू में, मनमाने ढंग से रेड्यूसर किसी कार्रवाई का जवाब देने के बारे में। यह थोड़ा खराब एनकैप्सुलेशन जैसा लगता है।

कई घटकों के लिए एक ही स्टोर से डेटा लेना भी बहुत आम है। स्टोर के कई हिस्सों के डेटा पर किसी एक घटक का निर्भर होना भी काफी सामान्य है। क्या वह भी खराब एनकैप्सुलेशन की तरह नहीं लगता है? वास्तव में मॉड्यूलर बनने के लिए, एक प्रतिक्रिया घटक भी "बतख" बंडल के अंदर नहीं होना चाहिए? ( एल्म आर्किटेक्चर ऐसा करता है ।)

रिएक्ट आपके स्टोर के डेटा को एक तथ्य

उसी तरह, मेरा यह भी मानना है कि क्रियाओं को एक तथ्य के रूप में

लिखने और अपने विचार साझा करने के लिए समय निकालने के लिए धन्यवाद, @dtinth। इस चर्चा में शामिल होने के लिए

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

एह ... इसमें से कुछ व्यक्तिपरक है, लेकिन नहीं। मैं मॉड्यूल के लिए एपीआई के रूप में निर्यात किए गए एक्शन-क्रिएटर्स और चयनकर्ताओं के बारे में सोचता हूं।

वैसे भी, मुझे लगता है कि यह एक अच्छी चर्चा रही है। जैसा कि थाई ने अपनी पिछली प्रतिक्रिया में उल्लेख किया था, इन दृष्टिकोणों के पक्ष और विपक्ष हैं जिन पर हम चर्चा कर रहे हैं। दूसरों के दृष्टिकोण में अंतर्दृष्टि प्राप्त करना अच्छा रहा है। :)

वैसे संदेश बॉक्स एक अच्छा उदाहरण है जहां मैं दिखाने के लिए एक अलग एक्शन क्रिएटर रखना पसंद करूंगा। अधिकतर क्योंकि मैं एक समय गुजारना चाहता हूं जब इसे बनाया गया था ताकि इसे स्वचालित रूप से खारिज कर दिया जा सके (और क्रिया निर्माता वह जगह है जहां आप अशुद्ध Date.now() ), क्योंकि मैं इसे खारिज करने के लिए टाइमर सेट करना चाहता हूं, मैं मैं उस टाइमर आदि का खंडन करना चाहता हूं। इसलिए मैं एक संदेश बॉक्स को उस मामले पर विचार करूंगा जहां इसका "एक्शन फ्लो" अपने व्यक्तिगत कार्यों को वारंट करने के लिए पर्याप्त महत्वपूर्ण है। उसने कहा कि शायद मैंने जो वर्णन किया है उसे https://github.com/yelouafi/redux-saga द्वारा और अधिक सुंदर ढंग से हल किया जा सकता है

मैंने इसे शुरू में डिस्कॉर्ड रिएक्टिफ्लक्स चैट में लिखा था, लेकिन इसे यहां पेस्ट करने के लिए कहा गया था।

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

1. कार्रवाई निर्माता को अद्यतन निष्पादित करने के लिए आवश्यक न्यूनतम मात्रा में जानकारी पारित की जाती है। यानी वर्तमान स्थिति से गणना की जा सकने वाली कोई भी वस्तु उसमें नहीं होनी चाहिए।
2. अद्यतनों को पूरा करने के लिए आपको आवश्यक किसी भी जानकारी के लिए राज्य से पूछताछ की जाती है (उदाहरण के लिए जब आप आईडी एक्स के साथ टोडो की प्रतिलिपि बनाना चाहते हैं, तो आप आईडी एक्स के साथ टोडो की विशेषताओं को प्राप्त करते हैं ताकि आप प्रतिलिपि बना सकें)। यह एक्शन क्रिएटर में किया जा सकता है, और फिर उस जानकारी को एक्शन ऑब्जेक्ट में शामिल किया जाता है। इसका परिणाम वसा क्रिया वस्तुओं में होता है। या इसकी गणना रेड्यूसर - पतली क्रिया वस्तुओं में की जा सकती है।
3. उस जानकारी के आधार पर, अगला राज्य प्राप्त करने के लिए शुद्ध रेड्यूसर तर्क लागू किया जाता है।

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

यदि आप रेड्यूसर में अधिक तर्क डालते हैं, तो आप अच्छी, पतली क्रिया वस्तुओं के साथ समाप्त होते हैं, आपके अधिकांश डेटा तर्क एक ही स्थान पर होते हैं, लेकिन आपके रेड्यूसर को लिखना कठिन होता है क्योंकि आपको अन्य शाखाओं से जानकारी की आवश्यकता हो सकती है। आप बड़े रेड्यूसर या रेड्यूसर के साथ समाप्त होते हैं जो राज्य में ऊपर से अतिरिक्त तर्क लेते हैं।

पता नहीं इन समस्याओं का क्या उत्तर है, सुनिश्चित नहीं है कि अभी तक कोई समस्या है

इन विचारों को साझा करने के लिए धन्यवाद @tommikaikkonen। मैं अभी भी खुद के बारे में अनिश्चित हूं कि "उत्तर" यहां क्या है। मैं आपके सारांश से सहमत हूं। मैं "कार्रवाई निर्माता में सभी तर्क डालें ..." खंड में एक छोटा नोट जोड़ूंगा, जो कि यह आपको डेटा पढ़ने के लिए (साझा) चयनकर्ताओं का उपयोग करने में सक्षम बनाता है जो कुछ मामलों में अच्छा हो सकता है।

यह एक रूचिकर थ्रेड है! यह पता लगाना कि कोड को redux ऐप में कहाँ रखा जाए, एक समस्या है जो मुझे लगता है कि हम सभी का सामना करना पड़ता है। मुझे सीक्यूआरएस का विचार पसंद है कि जो कुछ हुआ है उसे रिकॉर्ड करना।
लेकिन मैं यहां विचारों का एक बेमेल देख सकता हूं क्योंकि सीक्यूआरएस, AFAIK में सबसे अच्छा अभ्यास कार्रवाई/घटनाओं से एक गैर-मानकीकृत राज्य बनाना है जो विचारों द्वारा सीधे उपभोग योग्य है। लेकिन रेडक्स में सबसे अच्छा अभ्यास पूरी तरह से सामान्यीकृत स्थिति बनाना और चयनकर्ताओं के माध्यम से अपने विचारों का डेटा प्राप्त करना है।
यदि हम एक असामान्य स्थिति का निर्माण करते हैं जो दृश्य द्वारा सीधे उपभोग योग्य है, तो मुझे लगता है कि समस्या जो एक रेड्यूसर दूसरे रेड्यूसर में डेटा चाहता है वह दूर हो जाती है (क्योंकि प्रत्येक रेड्यूसर केवल उन सभी डेटा को स्टोर कर सकता है जिन्हें सामान्यीकरण की देखभाल करने की आवश्यकता नहीं है)। लेकिन फिर डेटा अपडेट करते समय हमें अन्य समस्याएं आती हैं। शायद यह चर्चा का मूल है?

कई वर्षों के ऑब्जेक्ट ओरिएंटेड विकास से आ रहा है .. Redux एक बड़े कदम की तरह पीछे की ओर महसूस करता है। मैं अपने आप को ऐसी कक्षाएं बनाने के लिए भीख माँगता हूँ जो घटनाओं (एक्शन क्रिएटर्स), और व्यावसायिक तर्क को समाहित करती हैं। मैं अभी भी एक सार्थक समझौता करने की कोशिश कर रहा हूं लेकिन अभी तक ऐसा करने में असमर्थ रहा हूं। क्या कोई और भी ऐसा ही महसूस करता है?

ऑब्जेक्ट ओरिएंटेड प्रोग्रामिंग पढ़ने के साथ-साथ लिखने को प्रोत्साहित करती है। यह चीजों का एक गुच्छा समस्याग्रस्त बनाता है: स्नैपशॉटिंग और रोलबैक, केंद्रीकृत लॉगिंग, गलत स्थिति उत्परिवर्तन डीबग करना, बारीक कुशल अपडेट। यदि आपको नहीं लगता है कि ये आपके लिए समस्याएं हैं, यदि आप जानते हैं कि पारंपरिक ऑब्जेक्ट ओरिएंटेड एमवीसी कोड लिखते समय उनसे कैसे बचा जाए, और यदि Redux आपके ऐप में हल होने की तुलना में अधिक समस्याओं का परिचय देता है, तो Redux का उपयोग न करें: विंक: .

@jayesbe ऑब्जेक्ट-ओरिएंटेड प्रोग्रामिंग बैकग्राउंड से आते हुए, आप पा सकते हैं कि यह प्रोग्रामिंग में उभरते विचारों के साथ https://www.leaseweb.com/labs/2015/08/object-उन्मुख-programming- is-

डेटा परिवर्तन से क्रियाओं को अलग करके, व्यावसायिक नियमों के अनुप्रयोग का परीक्षण सरल है। रूपांतरण अनुप्रयोग संदर्भ पर कम निर्भर हो जाते हैं।

इसका मतलब जावास्क्रिप्ट में वस्तुओं या कक्षाओं को छोड़ना नहीं है। उदाहरण के लिए, रिएक्ट घटकों को वस्तुओं और अब कक्षाओं के रूप में लागू किया जाता है। लेकिन रिएक्ट घटकों को केवल आपूर्ति किए गए डेटा का प्रक्षेपण बनाने के लिए डिज़ाइन किया गया है। आपको शुद्ध घटकों का उपयोग करने के लिए प्रोत्साहित किया जाता है जो राज्य को संग्रहीत नहीं करते हैं।

यही वह जगह है जहां Redux आता है: आवेदन राज्य को व्यवस्थित करने और क्रियाओं को एक साथ लाने और आवेदन राज्य के संबंधित परिवर्तन को लाने के लिए।

@johnsoftek लिंक के लिए धन्यवाद। हालाँकि पिछले 10 वर्षों में मेरे अनुभव के आधार पर.. मैं इससे सहमत नहीं हूँ लेकिन हमें यहाँ OO और गैर-OO के बीच बहस में पड़ने की आवश्यकता नहीं है। मेरे पास जो मुद्दा है वह कोड और अमूर्तता के आयोजन के साथ है।

मेरा लक्ष्य एक एकल ऐप/एकल आर्किटेक्चर बनाना है जो (अकेले कॉन्फ़िगरेशन मानों का उपयोग करके) 100 ऐप्स बनाने के लिए उपयोग किया जा सकता है। मुझे जिस उपयोग के मामले से निपटना है, वह एक सफेद-लेबल सॉफ़्टवेयर समाधान को संभाल रहा है जो कई ग्राहकों द्वारा उपयोग किया जाता है .. प्रत्येक एप्लिकेशन को अपना स्वयं का कॉल करता है।

मैं जो महसूस करता हूं वह एक दिलचस्प समझौता है .. और मुझे लगता है कि यह इसे अच्छी तरह से संभालता है लेकिन यह कार्यात्मक प्रोग्रामिंग भीड़ मानकों को पूरा नहीं कर सकता है। मैं अभी भी इसे वहां रखना चाहता हूं।

मेरे पास एक एकल एप्लिकेशन क्लास है जो सभी व्यावसायिक तर्क, एपीआई रैपर इत्यादि के साथ स्वयं निहित है .. कि मुझे अपने सर्वर साइड एप्लिकेशन के साथ इंटरफेस करने की आवश्यकता है।

उदाहरण..

export default Application {
    constructor(config) {
        this.config = config;
    } 

    config() {
        return this.config;
    }

    login(data, cb) {
        const url = [
            this.config.url,
            '?client=' + this.config.client,
            '&username=' + data.username,
            ....
        ].join('');

        fetch(url).then((responseText) => {
            cb(responseText);
        })
    }

    ... more business logic 
}

मैंने इस वस्तु का एक उदाहरण बनाया और इसे संदर्भ में रखा .. Redux प्रदाता का विस्तार करके

import { Provider } from 'react-redux';

export default class MyProvider extends Provider {
    getChildContext() {
        return Object.assign({}, Provider.prototype.getChildContext.call(this), {
            app: this.props.app
        });
    }

    render() {
        return this.props.children;
    }
}
MyProvider.childContextTypes = {
    store: React.PropTypes.object,
    app: React.PropTypes.object
}

तब मैंने इस प्रदाता को इस तरह इस्तेमाल किया

import Application from './application';
import config from './config';

class MyApp extends Component {
  render() {
    return (
      <MyProvider store={store} app={new Application(config)}>
        <Router />
      </MyProvider>
    );
  }
}

AppRegistry.registerComponent('MyApp', () => MyApp);

अंत में मेरे घटक में मैंने अपने ऐप का इस्तेमाल किया ..

class Login extends React.Component {
    render() {
        const { app } = this.context;
        const { state, actions } = this.props;
        return (
              <View style={style.transparentContainer}>
                <Form ref="form" type={User} options={options} />
                <Button 
                  onPress={() => {
                    value = this.refs.form.getValue();
                    if (value) {
                      app.login(value, actions.login);
                    }
                  }}
                >
                  Login
                </Button>
              </View>
        );
    }
};
Login.contextTypes = {
  app: React.PropTypes.object,
};

function mapStateToProps(state) {
  return {
      state: state.default.auth
  };
};

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(authActions, dispatch),
    dispatch
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(Login);

एक्शन क्रिएटर इस प्रकार मेरे व्यावसायिक तर्क के लिए सिर्फ एक कॉलबैक फ़ंक्शन है।

                      app.login(value, actions.login);

ऐसा लगता है कि यह समाधान इस समय अच्छी तरह से काम कर रहा है, हालांकि मैंने केवल प्रमाणीकरण के साथ शुरुआत की है।

मेरा मानना ​​है कि मैं स्टोर को अपने एप्लिकेशन इंस्टेंस में भी पास कर सकता हूं लेकिन मैं ऐसा नहीं करना चाहता क्योंकि मैं नहीं चाहता कि स्टोर मौका उत्परिवर्तन से गुजरे। हालांकि स्टोर तक पहुंचना काम आ सकता है। जरूरत पड़ने पर मैं इसके बारे में और सोचूंगा।

मैं जो महसूस करता हूं वह एक दिलचस्प समझौता है .. और मुझे लगता है कि यह इसे अच्छी तरह से संभालता है लेकिन यह कार्यात्मक प्रोग्रामिंग भीड़ मानकों को पूरा नहीं कर सकता है।

आपको यहां "कार्यात्मक भीड़" नहीं मिलेगी: पलक:। Redux में कार्यात्मक समाधान चुनने का कारण यह नहीं है कि हम हठधर्मी हैं, बल्कि इसलिए कि वे कुछ समस्याओं का समाधान करते हैं जो लोग अक्सर कक्षाओं के कारण करते हैं। उदाहरण के लिए, रेड्यूसर को एक्शन क्रिएटर्स से अलग करने से हम अलग-अलग रीड और राइट कर सकते हैं जो बग्स को लॉगिंग और पुन: उत्पन्न करने के लिए महत्वपूर्ण है। सादे वस्तुएं होने वाली क्रियाएं रिकॉर्ड और फिर से खेलना संभव बनाती हैं क्योंकि वे क्रमबद्ध हैं। इसी तरह, राज्य MyAppState उदाहरण के बजाय सादा वस्तु होने के कारण सर्वर पर इसे क्रमबद्ध करना और सर्वर प्रतिपादन के लिए क्लाइंट पर इसे deserialize करना बहुत आसान बनाता है, या इसके कुछ हिस्सों को localStorage में जारी रखता है। कार्यों के रूप में रेड्यूसर को व्यक्त करना हमें समय यात्रा और हॉट रीलोडिंग को लागू करने की अनुमति देता है, और चयनकर्ताओं को कार्यों के रूप में व्यक्त करने से संस्मरण जोड़ना आसान हो जाता है। इन सभी लाभों का हमारे "कार्यात्मक भीड़" से कोई लेना-देना नहीं है और विशिष्ट कार्यों को हल करने के लिए सब कुछ इस पुस्तकालय को हल करने के लिए बनाया गया था।

मैंने इस वस्तु का एक उदाहरण बनाया और इसे संदर्भ में रखा .. Redux प्रदाता का विस्तार करके

यह मुझे पूरी तरह से समझदार लगता है। हमें वर्गों से तर्कहीन घृणा नहीं है। मुद्दा यह है कि हम उन मामलों में उनका उपयोग नहीं करेंगे जहां वे गंभीर रूप से सीमित हैं (जैसे रेड्यूसर या एक्शन ऑब्जेक्ट्स के लिए), लेकिन उदाहरण के लिए, एक्शन ऑब्जेक्ट्स उत्पन्न करने के लिए उनका उपयोग करना ठीक है।

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

import { Component } from 'react';
import { Provider } from 'react-redux';

export default class MyProvider extends Component {
    getChildContext() {
        return {
            app: this.props.app
        };
    }

    render() {
        return (
            <Provider store={this.props.store}>
                {this.props.children}
            </Provider>
        );
    }
}
MyProvider.childContextTypes = {
    app: React.PropTypes.object
}
MyProvider.propTypes = {
    app: React.PropTypes.object,
    store: React.PropTypes.object
}

यह वास्तव में मेरे विचार में आसान पढ़ता है, और कम नाजुक है।

तो, कुल मिलाकर, आपका दृष्टिकोण पूरी तरह से समझ में आता है। इस मामले में एक वर्ग का उपयोग करना वास्तव में createActions(config) जैसी किसी चीज़ से अलग नहीं है, जो एक ऐसा पैटर्न है जिसकी हम अनुशंसा करते हैं यदि आपको एक्शन क्रिएटर्स को पैरामीट्रिज़ करने की आवश्यकता है। इसमें बिल्कुल कुछ भी गलत नहीं है।

हम आपको केवल राज्य और क्रिया वस्तुओं के लिए वर्ग उदाहरणों का उपयोग करने से हतोत्साहित करते हैं क्योंकि वर्ग के उदाहरण क्रमांकन को बहुत मुश्किल बनाते हैं। रेड्यूसर के लिए, हम कक्षाओं का उपयोग करने की भी अनुशंसा नहीं करते हैं क्योंकि रेड्यूसर संरचना का उपयोग करना कठिन होगा, यानी रेड्यूसर जो अन्य रेड्यूसर कहते हैं। बाकी सब चीजों के लिए, आप कक्षाओं सहित कोड संगठन के किसी भी माध्यम का उपयोग कर सकते हैं।

यदि आपका एप्लिकेशन और कॉन्फ़िगरेशन अपरिवर्तनीय हैं (और मुझे लगता है कि उन्हें होना चाहिए, लेकिन शायद मैंने बहुत अधिक कार्यात्मक कूल-एड पिया है), तो आप निम्न दृष्टिकोण पर विचार कर सकते हैं:

const appSelector = createSelector(
   (state) => state.config,
   (config) => new Application(config)
)

और फिर mapStateToProps में:

function mapStateToProps(state) {
  return {
      app: appSelector(state)
  };
};

फिर आपको प्रदाता तकनीक की आवश्यकता नहीं है जिसे आपने अपनाया है, आप केवल राज्य से एप्लिकेशन ऑब्जेक्ट प्राप्त करते हैं। पुन: चयन करने के लिए धन्यवाद, एप्लिकेशन ऑब्जेक्ट केवल तभी बनाया जाएगा जब कॉन्फ़िगरेशन बदलता है, जो शायद केवल एक बार होता है।

जहां मुझे लगता है कि इस दृष्टिकोण का एक फायदा हो सकता है कि यह आपको आसानी से इस तरह की कई वस्तुओं को रखने के लिए विचार का विस्तार करने देता है और उन वस्तुओं को राज्य के अन्य हिस्सों पर निर्भर करता है। उदाहरण के लिए, आपके पास लॉगिन/लॉगआउट/आदि विधियों के साथ UserControl वर्ग हो सकता है जिसकी कॉन्फ़िगरेशन और आपके राज्य के हिस्से दोनों तक पहुंच है।

तो, कुल मिलाकर, आपका दृष्टिकोण पूरी तरह से समझ में आता है।

: +1: धन्यवाद जो मदद करता है। मैं MyProvider में सुधार से सहमत हूं। मैं अनुसरण करने के लिए अपना कोड अपडेट करूंगा। Redux को पहली बार सीखते समय मेरे लिए सबसे बड़ी समस्याओं में से एक "एक्शन क्रिएटर्स" की सिमेंटिक धारणा थी .. यह तब तक जीवंत नहीं थी जब तक कि मैंने उन्हें इवेंट्स के साथ बराबरी नहीं की। मेरे लिए यह एक तरह का अहसास था जो ऐसा था.. ये ऐसी घटनाएं हैं जिन्हें भेजा जा रहा है।

@winstonewert createSelector प्रतिक्रिया-मूल पर उपलब्ध है? मुझे विश्वास नहीं है कि यह है। साथ ही, ऐसा लगता है कि जब भी आप इसे किसी घटक पर mapStateToProps में संलग्न करते हैं तो आप हर बार नया एप्लिकेशन बना रहे हैं? मेरा उद्देश्य एक ऐसी वस्तु को तत्काल करना है जो आवेदन के लिए सभी व्यावसायिक तर्क प्रदान करता है और उस वस्तु के लिए विश्व स्तर पर पहुंच योग्य है। मुझे यकीन नहीं है कि आप सुझाव काम कर रहे हैं। हालांकि मुझे जरूरत पड़ने पर अतिरिक्त वस्तुएं उपलब्ध कराने का विचार पसंद है .. तकनीकी रूप से मैं एप्लिकेशन इंस्टेंस के माध्यम से भी आवश्यकतानुसार तत्काल कर सकता हूं।

Redux को पहली बार सीखते समय मेरे लिए सबसे बड़ी समस्याओं में से एक "एक्शन क्रिएटर्स" की सिमेंटिक धारणा थी .. यह तब तक जीवंत नहीं थी जब तक कि मैंने उन्हें इवेंट्स के साथ बराबरी नहीं की। मेरे लिए यह एक तरह का अहसास था जो ऐसा था.. ये ऐसी घटनाएं हैं जिन्हें भेजा जा रहा है।

मैं कहूंगा कि Redux में एक्शन क्रिएटर्स की कोई अर्थपूर्ण धारणा नहीं है। क्रियाओं की एक अर्थपूर्ण धारणा है (जो वर्णन करती है कि क्या हुआ और मोटे तौर पर घटनाओं के बराबर हैं, लेकिन काफी नहीं - उदाहरण के लिए # 351 में चर्चा देखें)। एक्शन क्रिएटर्स कोड को व्यवस्थित करने के लिए सिर्फ एक पैटर्न हैं। कार्रवाइयों के लिए फैक्ट्रियां रखना सुविधाजनक है क्योंकि आप यह सुनिश्चित करना चाहते हैं कि एक ही प्रकार की कार्रवाइयों में सुसंगत संरचना हो, भेजने से पहले उनका समान दुष्प्रभाव हो, आदि। लेकिन Redux के दृष्टिकोण से, एक्शन क्रिएटर्स मौजूद नहीं हैं—Redux क्रियाओं को ही देखता है।

createSelector प्रतिक्रिया-मूल पर उपलब्ध है?

यह रीसेलेक्ट में उपलब्ध है जो बिना निर्भरता के सादा जावास्क्रिप्ट है और वेब पर, देशी पर, सर्वर पर आदि पर काम कर सकता है।

आह। ठीक मिल गया। चीजें बहुत अधिक स्पष्ट हैं। चीयर्स।

MapStateToProps और mapDispatchToProps में ऑब्जेक्ट्स को नेस्ट न करें

मैं हाल ही में एक ऐसे मुद्दे में भाग गया जहां नेस्टेड ऑब्जेक्ट्स खो गए थे जब Redux mapStateToProps और mapDispatchToProps को मिलाता है (देखें Reactjs/react-redux#324)। हालांकि @gaearon एक समाधान प्रदान करता है जो मुझे नेस्टेड वस्तुओं का उपयोग करने की अनुमति देता है, वह कहता है कि यह एक विरोधी पैटर्न है:

ध्यान दें कि इस तरह की वस्तुओं को समूहीकृत करने से अनावश्यक आवंटन होगा और यह प्रदर्शन अनुकूलन को भी कठिन बना देगा क्योंकि हम अब परिणाम प्रॉप्स की उथली समानता पर भरोसा नहीं कर सकते हैं, यह बताने के लिए कि क्या वे बदल गए हैं। तो आप बिना नेमस्पेसिंग के एक सरल दृष्टिकोण की तुलना में अधिक रेंडर देखेंगे जो हम डॉक्स में सुझाते हैं।

@bvaughn ने कहा

रेड्यूसर बेवकूफ और सरल होना चाहिए

और हमें अधिकांश व्यावसायिक तर्क को एक्शन क्रिएटर्स में रखना चाहिए, मैं इससे बिल्कुल सहमत हूं। लेकिन अगर सब कुछ कार्रवाई में चला गया है, तो हमें अभी भी रेड्यूसर फाइलें और कार्यों को मैन्युअल रूप से क्यों बनाना है? कार्रवाई में संचालित किए गए डेटा को सीधे स्टोर में क्यों न डालें?

इसने मुझे कुछ समय के लिए भ्रमित कर दिया है ...

हमें अभी भी मैन्युअल रूप से रिड्यूसर फ़ाइलें और फ़ंक्शन बनाने की आवश्यकता क्यों है?

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

अधिकांश राज्य-अद्यतन तर्क को रिड्यूसर में रखने का यह लाभ है।

@dtinth बस स्पष्ट करने के लिए, "राज्य-अद्यतन तर्क" कहकर क्या आपका मतलब "व्यावसायिक तर्क" है?

मुझे यकीन नहीं है कि आपके अधिकांश तर्क को एक्शन क्रिएटर्स में डालना एक अच्छा विचार है। यदि आपके सभी रेड्यूसर ADD_X जैसी कार्रवाइयों को स्वीकार करने वाले केवल छोटे कार्य हैं, तो उनमें त्रुटियां होने की संभावना नहीं है - बढ़िया! लेकिन फिर आपकी सभी त्रुटियों को आपके एक्शन क्रिएटर्स पर धकेल दिया गया है और आप डिबगिंग के उस महान अनुभव को खो देते हैं जिसका @dtinth संकेत देता है।

लेकिन जैसा कि @tommikaikkonen ने उल्लेख किया है, यह इतना सरल लेखन जटिल

@sompylasar "बिजनेस लॉजिक" और "स्टेट-

हालांकि मेरे अपने कार्यान्वयन विनिर्देशों के साथ झुकाव करने के लिए .. मेरी क्रियाएं मुख्य रूप से कार्रवाई में इनपुट पर लुकअप हैं। वास्तव में मेरे सभी कार्य शुद्ध हैं क्योंकि मैंने अपने सभी "व्यावसायिक तर्क" को एक अनुप्रयोग संदर्भ में स्थानांतरित कर दिया है।

एक उदाहरण के रूप में .. यह मेरा विशिष्ट रेड्यूसर

export default function reducer(state = initialState, action = {}) {
  switch (action.type) {
    case 'FOO_REQUEST':
    case 'FOO_RESPONSE':
    case 'FOO_ERROR':
    case 'FOO_RESET':
      return {
        ...state,
        ...action.data
      }; 
    default:
      return state;
  }
}

मेरी सामान्य क्रियाएं:

export function fooRequest( res ) {
  return {
    type: 'FOO_REQUEST',
    data: {
        isFooing: true,
        toFoo: res.saidToFoo
    }
  };
}

export function fooResponse( res ) {
  return {
    type: 'FOO_RESPONSE',
    data: {
        isFooing: false,
        isFooed: true,
        fooData: res.data
    }
  };
}

export function fooError( res ) {
  return {
    type: 'FOO_ERROR',
    data: {
        isFooing: false,
        fooData: null,
        isFooed: false,
        fooError: res.error
    }
  };
}

export function fooReset( res ) {
  return {
    type: 'FOO_RESET',
    data: {
        isFooing: false,
        fooData: null,
        isFooed: false,
        fooError: null,
        toFoo: true
    }
  };
}

मेरा व्यावसायिक तर्क संदर्भ में संग्रहीत वस्तु में परिभाषित किया गया है, अर्थात ..

export default class FooBar
{
    constructor(store)
    {
        this.actions = bindActionCreators({
            ...fooActions
        }, store.dispatch);
    }

    async getFooData()
    {
        this.actions.fooRequest({
            saidToFoo: true
        });

        fetch(url)
        .then((response) => {
            this.actions.fooResponse(response);
        })
    }
}

यदि आप ऊपर मेरी टिप्पणी देखते हैं तो मैं भी सर्वोत्तम दृष्टिकोण के साथ संघर्ष कर रहा था .. मैंने अंततः अपने एप्लिकेशन ऑब्जेक्ट के निर्माता में स्टोर को पास करने और सभी कार्यों को इस केंद्रीय बिंदु पर डिस्पैचर से जोड़ने के साथ समझौता किया और बस गया। मेरे आवेदन के बारे में जानने वाली सभी कार्रवाइयां यहां असाइन की गई हैं।

मैं अब कहीं भी mapDispatchToProps() का उपयोग नहीं करता। Redux के लिए मैं अब कनेक्टेड घटक बनाते समय केवल mapStateToProps करता हूं। अगर मुझे किसी भी क्रिया को ट्रिगर करने की आवश्यकता है .. मैं उन्हें संदर्भ के माध्यम से अपने एप्लिकेशन ऑब्जेक्ट के माध्यम से ट्रिगर कर सकता हूं।

class SomeComponent extends React.Component {
    componentWillReceiveProps(nextProps) {
        if (nextProps.someFoo != this.props.someFoo) {
            const { app } = this.context;
            app.actions.getFooData();
        }
    }
}
SomeComponent.contextTypes = {
    app: React.PropTypes.object
};

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

इस तरह मैंने अपने मूल "व्यावसायिक तर्क" को व्यवस्थित किया। चूंकि मेरा राज्य वास्तव में बैकएंड सर्वर पर बना हुआ है .. यह मेरे उपयोग के मामले में वास्तव में अच्छा काम करता है।

आप अपना "व्यावसायिक तर्क" कहाँ संग्रहीत करते हैं, यह वास्तव में आप पर निर्भर है और यह आपके उपयोग के मामले में कैसे फिट बैठता है।

@jayesbe निम्नलिखित भाग का अर्थ है कि आपके पास

    case 'FOO_REQUEST':
    case 'FOO_RESPONSE':
    case 'FOO_ERROR':
    case 'FOO_RESET':
      return {
        ...state,
        ...action.data
      }; 

export function fooRequest( res ) {
  return {
    type: 'FOO_REQUEST',
    data: {
        isFooing: true,
        toFoo: res.saidToFoo
    }
  };
}

@jayesbe मेरे कार्य और

जरुरी नहीं। लेकिन बहुत बार, व्यवसाय प्रक्रिया का हिस्सा
व्यावसायिक नियमों के अनुसार एप्लिकेशन की स्थिति को अपडेट करना शामिल है,
तो आपको वहां कुछ व्यावसायिक तर्क रखना पड़ सकता है।

एक चरम मामले के लिए, इसे देखें:
"सिंक्रोनस आरटीएस इंजन और Desyncs की एक कहानी" @ForrestTheWoods
https://blog.forrestthewoods.com/synchronous-rts-engines-and-a-tale-of-desyncs-9d8c3e48b2be

५ अप्रैल २०१६ को शाम ५:५४ बजे, "जॉन बाबाक" नोटिफिकेशन @github.com ने लिखा:

राज्य-अद्यतन तर्क के बहुमत को में रखने का यह लाभ है
कम करने वाला

@dtinth https://github.com/dtinth बस स्पष्ट करने के लिए, कह कर
"राज्य-अद्यतन तर्क" क्या आपका मतलब "व्यावसायिक तर्क" है?

-
आप इसे प्राप्त कर रहे हैं क्योंकि आपका उल्लेख किया गया था।
इस ईमेल का सीधे उत्तर दें या इसे GitHub पर देखें
https://github.com/reactjs/redux/issues/1171#issuecomment -205754910

@LumiaSaki एक्शन क्रिएटर्स में जटिल तर्क रखते हुए अपने

उसके कारण, Redux स्वचालित रूप से डेटा को क्रियाओं से स्टोर में स्थानांतरित नहीं करेगा। क्योंकि यह वह तरीका नहीं है जिससे आप Redux का उपयोग करने वाले हैं। Redux को किसी अन्य तरीके से इसका उपयोग करने की सुविधा के लिए बदला नहीं जा रहा है, तब इसका इरादा था। बेशक, आप वह करने के लिए पूरी तरह से स्वतंत्र हैं जो आपके लिए कारगर है, लेकिन इसके लिए Redux के बदलने की अपेक्षा न करें।

इसके लायक क्या है, मैं अपने रेड्यूसर का उत्पादन कुछ इस तरह से करता हूं:

let {reducer, actions} = defineActions({
   fooRequest: (state, res) => ({...state, isFooing: true, toFoo: res.saidToFoo}),
   fooResponse: (state, res) => ({...state, isFooing: false, isFooed: true, fooData: res.data}),
   fooError: (state, res) => ({...state, isFooing: false, fooData: null, isFooed: false, fooError: res.error})
   fooReset: (state, res) => ({...state, isFooing: false, fooData: null, isFooed: false, fooError: null, toFoo: false})
})

डिफाइनएक्शन रेड्यूसर और एक्शन क्रिएटर्स दोनों को लौटाता है। इस तरह मुझे अपने अपडेट लॉजिक को रिड्यूसर के अंदर रखना बहुत आसान लगता है, जबकि तुच्छ एक्शन क्रिएटर्स को लिखने में बहुत समय खर्च नहीं करना पड़ता है।

यदि आप अपने तर्क को अपने एक्शन क्रिएटर्स में रखने पर जोर देते हैं, तो आपको डेटा को स्वचालित करने में कोई परेशानी नहीं होनी चाहिए। आपका रेड्यूसर एक फ़ंक्शन है, और यह जो चाहे कर सकता है। तो आपका रेड्यूसर उतना आसान हो सकता है:

function reducer(state, action) {
    if (action.data) {
        return {...state, ...action.data}
   } else {
        return state;
   }
}

व्यावसायिक तर्क के संबंध में पिछले बिंदुओं पर विस्तार करते हुए, मुझे लगता है कि आप अपने व्यावसायिक तर्क को दो भागों में विभाजित कर सकते हैं:

• गैर-नियतात्मक भाग। यह हिस्सा बाहरी सेवाओं, एसिंक्रोनस कोड, सिस्टम समय, या एक यादृच्छिक संख्या जनरेटर का उपयोग करता है। मेरी राय में इस भाग को I/O फ़ंक्शन (या एक एक्शन क्रिएटर) द्वारा सबसे अच्छा नियंत्रित किया जाता है। मैं उन्हें व्यवसाय प्रक्रिया कहता हूं।

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

js export async function runApp (store) { try { store.dispatch({ type: 'startCompiling' }) const compiledApp = await compile(store) store.dispatch({ type: 'startRunning', app: compiledApp }) } catch (e) { store.dispatch({ type: 'errorCompiling', error: e }) } }

• नियतात्मक भाग। इस भाग का पूरी तरह से पूर्वानुमेय परिणाम है। एक ही स्थिति और एक ही घटना को देखते हुए, परिणाम हमेशा अनुमानित होता है। मेरी राय में इस हिस्से को एक रेड्यूसर द्वारा सबसे अच्छा नियंत्रित किया जाता है। मैं इसे व्यापार नियम कहता हूं।

``` जेएस
आपको 'updeep' से इम्पोर्ट करें

एक्सपोर्ट कास्ट रिड्यूसर = क्रिएटरेड्यूसर ({
// [कार्रवाई का नाम]: क्रिया => वर्तमान स्थिति => अगला राज्य
प्रारंभ संकलन: () => यू ({संकलन: सत्य}),
त्रुटि संकलन: ({त्रुटि}) => आप ({संकलन: गलत, संकलन त्रुटि: त्रुटि}),
स्टार्टरनिंग: ({ऐप}) => यू({
चल रहा है: () => ऐप,
संकलन: झूठा
}),
स्टॉपरनिंग: () => यू ({रनिंग: फॉल्स}),
डिस्कार्डकंपाइल एरर: () => यू ({संकलन त्रुटि: अशक्त}),
//...
})
```

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

@dtinth बढ़िया है, में पिछले उदाहरण क्योंकि https://github.com/reactjs/redux/issues/1171#issuecomment -+२०,५७,८२,७४० पूरी तरह से क्या आप में लिखी गई जानकारी के लिए अलग दिखता है https://github.com/reactjs/redux/ मुद्दों/११७१#मुद्दे -२०५८८८५३३ - यह एक्शन क्रिएटर्स में राज्य का एक टुकड़ा बनाने और उन्हें केवल अपडेट फैलाने के लिए

@winstonewert

Redux का अनुशंसित पैटर्न इसके विपरीत है: रिड्यूसर में जटिल तर्क रखते हुए एक्शन क्रिएटर्स को सरल रखें।

आप रूडर्स में जटिल तर्क कैसे डाल सकते हैं और फिर भी उन्हें शुद्ध रख सकते हैं?

अगर मैं उदाहरण के लिए भ्रूण() को कॉल कर रहा हूं और सर्वर से डेटा लोड कर रहा हूं .. तो इसे किसी तरह से संसाधित करना। मुझे अभी तक एक ऐसे रेड्यूसर का उदाहरण नहीं देखना है जिसमें "जटिल तर्क" है

@jayesbe : उह ... "जटिल" और "शुद्ध" ऑर्थोगोनल हैं। आपके पास रेड्यूसर के अंदर _really_ जटिल सशर्त तर्क या हेरफेर हो सकता है, और जब तक यह बिना किसी दुष्प्रभाव के इसके इनपुट का एक कार्य है, यह अभी भी शुद्ध है।

यदि आपके पास जटिल स्थानीय स्थिति है (पोस्ट एडिटर, ट्री व्यू, आदि के बारे में सोचें) या आशावादी अपडेट जैसी चीजों को संभालें, तो आपके रेड्यूसर में जटिल तर्क होंगे। यह वास्तव में ऐप पर निर्भर करता है। कुछ के पास जटिल अनुरोध हैं, अन्य के पास जटिल राज्य अपडेट हैं। कुछ में दोनों हैं :-)

@markerikson ठीक तर्क कथन एक बात है .. लेकिन विशिष्ट कार्यों को निष्पादित करना? जैसे कहें कि मेरे पास एक क्रिया है जो एक मामले में तीन अन्य कार्रवाइयों को ट्रिगर करती है, या किसी अन्य मामले में दो अलग और अलग कार्रवाइयों को ट्रिगर करती है। वह तर्क + कार्यों का निष्पादन ऐसा नहीं लगता जैसे उन्हें रेड्यूसर में जाना चाहिए।

मेरा राज्य डेटा/मॉडल स्थिति सर्वर पर है, देखें राज्य डेटा मॉडल से अलग है लेकिन उस राज्य का प्रबंधन क्लाइंट पर है। मेरा डेटा मॉडल स्थिति बस दृश्य में पारित हो गया है .. जो कि मेरे रेड्यूसर और कार्यों को इतना दुबला बनाता है।

@jayesbe : मुझे नहीं लगता कि किसी ने कभी कहा है कि अन्य कार्यों को ट्रिगर करना एक (currentState + action) -> newState ।

यदि आपको कई क्रियाओं को एक साथ जोड़ने की आवश्यकता है, तो आप इसे या तो एक थंक या गाथा की तरह करते हैं और उन्हें क्रम से बंद कर देते हैं, या राज्य के परिवर्तनों को सुनने के लिए कुछ करते हैं, या किसी क्रिया को रोकने और अतिरिक्त कार्य करने के लिए एक मिडलवेयर का उपयोग करते हैं।

ईमानदार होने के लिए, इस बिंदु पर चर्चा क्या है, इस पर मैं थोड़ी उलझन में हूं।

@markerikson विषय "व्यावसायिक तर्क" के बारे में प्रतीत होता है और यह कहाँ जाता है। तथ्य यह है कि.. यह सब आवेदन पर निर्भर करता है। इसके बारे में जाने के विभिन्न तरीके हैं। कुछ अधिक जटिल तो अन्य। यदि आप अपनी समस्या को हल करने का एक अच्छा तरीका ढूंढते हैं जो आपके लिए चीजों को बनाए रखना और व्यवस्थित करना आसान बनाता है। यही सब वास्तव में मायने रखता है। मेरा कार्यान्वयन मेरे उपयोग के मामले के लिए बहुत दुबला होता है, भले ही यह प्रतिमान के खिलाफ हो।

जैसा कि आप ध्यान दें, वह सब जो वास्तव में मायने रखता है वह है जो आपके लिए काम करता है। लेकिन यहां बताया गया है कि मैं आपके द्वारा पूछे गए मुद्दों से कैसे निपटूंगा।

अगर मैं उदाहरण के लिए भ्रूण() को कॉल कर रहा हूं और सर्वर से डेटा लोड कर रहा हूं .. तो इसे किसी तरह से संसाधित करना। मुझे अभी तक एक ऐसे रेड्यूसर का उदाहरण नहीं देखना है जिसमें "जटिल तर्क" है

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

k तर्क कथन एक बात है .. लेकिन विशिष्ट कार्यों को क्रियान्वित करना? जैसे कहें कि मेरे पास एक क्रिया है जो एक मामले में तीन अन्य कार्रवाइयों को ट्रिगर करती है, या किसी अन्य मामले में दो अलग और अलग कार्रवाइयों को ट्रिगर करती है। वह तर्क + कार्यों का निष्पादन ऐसा नहीं लगता जैसे उन्हें रेड्यूसर में जाना चाहिए।

यह इस बात पर निर्भर करता है कि आप क्या कर रहे हैं। जाहिर है, सर्वर लाने के मामले में एक क्रिया दूसरे को ट्रिगर करेगी। यह पूरी तरह से अनुशंसित Redux प्रक्रिया के भीतर है। हालाँकि, आप भी कुछ ऐसा कर रहे होंगे:

function createFoobar(dispatch, state, updateRegistry) {
   dispatch(createFoobarRecord());
   if (updateRegistry) {
      dispatch(updateFoobarRegistry());
   } else {
       dispatch(makeFoobarUnregistered());
   }
   if (hasFoobarTemps(state)) {
      dispatch(dismissFoobarTemps());
   }
}

Redux का उपयोग करने का यह अनुशंसित तरीका नहीं है। अनुशंसित Redux तरीका एक एकल CREATE_FOOBAR क्रिया है जो इन सभी वांछित परिवर्तनों का कारण बनती है।

@winstonewert :

Redux का उपयोग करने का यह अनुशंसित तरीका नहीं है। अनुशंसित Redux तरीका एक एकल CREATE_FOOBAR क्रिया है जो इन सभी वांछित परिवर्तनों का कारण बनती है।

आपके पास कहीं निर्दिष्ट करने के लिए एक सूचक है? क्योंकि जब मैं अक्सर पूछे जाने वाले प्रश्न पृष्ठ के लिए शोध कर रहा था, तो मैं डैन से सीधे "यह निर्भर करता है" के साथ आया था। http://redux.js.org/docs/FAQ.html#actions -multiple-actions देखें और डैन द्वारा SO पर यह उत्तर देखें।

"बिजनेस लॉजिक" वास्तव में एक बहुत व्यापक शब्द है। इसमें "क्या कुछ हुआ है?", "अब हम क्या करें कि यह हुआ?", "क्या यह मान्य है?", और इसी तरह की चीजों को कवर कर सकता है। Redux के डिज़ाइन के आधार पर, उन प्रश्नों _can_ का उत्तर विभिन्न स्थानों पर दिया जा सकता है, जो इस बात पर निर्भर करता है कि स्थिति क्या है, हालाँकि मैं एक एक्शन क्रिएटर जिम्मेदारी के रूप में "क्या ऐसा हुआ है" और "अब क्या" लगभग निश्चित रूप से एक रिड्यूसर जिम्मेदारी है।

कुल मिलाकर, "व्यावसायिक तर्क" के इस _संपूर्ण प्रश्न_ पर मेरा विचार है: _"यह निर्भर करता है_"। ऐसे कई कारण हैं जिनकी वजह से आप किसी एक्शन क्रिएटर में पार्सिंग का अनुरोध करना चाहते हैं, और इसके कारण कि आप इसे रिड्यूसर में क्यों करना चाहते हैं। ऐसे समय होते हैं जब आपका रेड्यूसर बस "इस ऑब्जेक्ट को ले सकता है और इसे मेरे राज्य में थप्पड़ मार सकता है", और दूसरी बार जब आपका रेड्यूसर बहुत जटिल सशर्त तर्क हो सकता है। ऐसे समय होते हैं जब आपका एक्शन निर्माता बहुत सरल हो सकता है, और दूसरी बार जब यह जटिल हो सकता है। ऐसे समय होते हैं जब किसी प्रक्रिया के चरणों का प्रतिनिधित्व करने के लिए एक पंक्ति में कई कार्रवाइयां प्रेषित करना समझ में आता है, और दूसरी बार जब आप केवल एक सामान्य "THING_HAPPENED" कार्रवाई को सभी का प्रतिनिधित्व करने के लिए भेजना चाहते हैं।

एकमात्र कठिन और तेज़ नियम के बारे में मैं सहमत हूं "कार्रवाई रचनाकारों में गैर-निर्धारणवाद, रेड्यूसर में शुद्ध निर्धारणा"। वह दे दिया गया।

उसके अलावा? कुछ ऐसा खोजें जो आपके काम आए। निरतंरता बनाए रखें। जानिए आप इसे एक निश्चित तरीके से क्यों कर रहे हैं। उसके साथ जाओ।

हालांकि मैं देखता हूं कि "क्या यह हुआ है" एक एक्शन निर्माता जिम्मेदारी के रूप में, और "अब क्या" लगभग निश्चित रूप से एक रेड्यूसर जिम्मेदारी है।

इसलिए एक समानांतर चर्चा है कि साइड-इफेक्ट्स को कैसे रखा जाए, यानी "अब क्या" का गैर-शुद्ध हिस्सा, रेड्यूसर में: # 1528 और उन्हें केवल शुद्ध विवरण दें कि क्या होना चाहिए, जैसे प्रेषण के लिए अगली क्रियाएं।

मैं जिस पैटर्न का उपयोग कर रहा हूं वह है:

• क्या करें : एक्शन/एक्शन क्रिएटर
• इसे कैसे करें : मिडलवेयर (उदाहरण के लिए, मिडलवेयर जो 'एसिंक' क्रियाओं को सुनता है और मेरे एपीआई ऑब्जेक्ट को कॉल करता है।)
• परिणाम के साथ क्या करें : रेड्यूसर

इस सूत्र में पहले से, डैन का कथन था:

तो हमारी आधिकारिक सिफारिश यह है कि आपको पहले कोशिश करनी चाहिए कि अलग-अलग रिड्यूसर एक ही कार्रवाई के लिए प्रतिक्रिया दें। अगर यह अजीब लगता है, तो निश्चित रूप से, अलग से एक्शन क्रिएटर बनाएं। लेकिन इस दृष्टिकोण से शुरू न करें।

उस से, मैं इसे लेता हूं कि अनुशंसित दृष्टिकोण प्रति घटना एक क्रिया को प्रेषित करना है। लेकिन, व्यावहारिक रूप से, वही करें जो काम करता है।

@winstonewert : डैन का " रेड्यूसर द्वारा सुनी जाती है" बनाम "कई रेड्यूसर एक ही एक्शन का जवाब दे सकते हैं"। डैन एक ही कार्रवाई का जवाब देने वाले मनमाने ढंग से रेड्यूसर पर बहुत बड़ा है। अन्य "बतख" दृष्टिकोण जैसी चीजें पसंद करते हैं, जहां रेड्यूसर और क्रियाएं बहुत कसकर बंडल की जाती हैं, और केवल एक रेड्यूसर किसी दिए गए क्रिया को संभालता है। तो, यह उदाहरण "अनुक्रम में कई कार्यों को भेजने" के बारे में नहीं है, बल्कि "मेरे रेड्यूसर संरचना के कितने हिस्से इस पर प्रतिक्रिया देने की उम्मीद कर रहे हैं"।

लेकिन, व्यावहारिक रूप से, वही करें जो काम करता है।

:+1:

@sompylasar मुझे अपने कार्यों में राज्य संरचना होने से मेरे तरीकों की त्रुटि दिखाई देती है। मैं आसानी से राज्य संरचना को अपने रेड्यूसर में स्थानांतरित कर सकता हूं और अपने कार्यों को सरल बना सकता हूं। चीयर्स।

मुझे ऐसा लगता है कि यह वही बात है।

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

आपके द्वारा उल्लिखित स्टैक ओवरफ्लो प्रश्न में, वह कहता है:

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

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

मैं यहां कुछ समान लेकिन कुछ अलग उपयोग के मामलों की कल्पना कर रहा हूं:

1) एक क्रिया के लिए आपके राज्य के कई क्षेत्रों में अपडेट की आवश्यकता होती है, खासकर यदि आप combineReducers का उपयोग कर रहे हैं, तो प्रत्येक उप-डोमेन को संभालने के लिए अलग-अलग रेड्यूसर फ़ंक्शन हैं। क्या आप:

• रेड्यूसर ए और रेड्यूसर बी दोनों एक ही क्रिया का जवाब देते हैं और अपने राज्य के बिट्स को स्वतंत्र रूप से अपडेट करते हैं
• अपने थंक सामान को सभी प्रासंगिक डेटा कार्रवाई में रखें ताकि कोई भी रेड्यूसर राज्य के अन्य बिट्स को अपने स्वयं के हिस्से के बाहर एक्सेस कर सके
• एक और शीर्ष-स्तरीय रेड्यूसर जोड़ें जो रेड्यूसर ए के राज्य के बिट्स को पकड़ लेता है और विशेष-केस इसे रेड्यूसर बी को सौंप देता है?
• रेड्यूसर ए के लिए आवश्यक राज्य के बिट्स के साथ एक क्रिया को प्रेषित करें, और रेड्यूसर बी के लिए दूसरी क्रिया को इसकी आवश्यकता के साथ प्रेषित करें?

2) आपके पास एक विशिष्ट अनुक्रम में होने वाले चरणों का एक सेट है, प्रत्येक चरण में कुछ राज्य अद्यतन या मिडलवेयर कार्रवाई की आवश्यकता होती है। क्या आप:

• प्रगति का प्रतिनिधित्व करने के लिए प्रत्येक व्यक्तिगत कदम को एक अलग कार्रवाई के रूप में प्रेषित करें, और अलग-अलग रेड्यूसर विशिष्ट कार्यों का जवाब दें?
• एक बड़ी घटना को डिस्पैच करें, और भरोसा करें कि रेड्यूसर इसे उचित रूप से संभालता है?

तो हाँ, निश्चित रूप से कुछ ओवरलैप, लेकिन मुझे लगता है कि मानसिक तस्वीर में अंतर का हिस्सा यहां विभिन्न उपयोग के मामले हैं।

@markerikson तो आपकी सलाह है 'यह इस बात पर निर्भर करता है कि आप किस स्थिति से मिले हैं', और क्रियाओं या रिड्यूसर पर 'व्यावसायिक तर्क' को कैसे संतुलित किया जाए, यह आपके विचार पर निर्भर है, हमें यथासंभव शुद्ध कार्य का लाभ भी लेना चाहिए?

हां। रेडक्स आवश्यकता के रूप में रेड्यूसर _have_ शुद्ध होना चाहिए (विशेष मामलों के 0.00001% को छोड़कर)। एक्शन क्रिएटर्स को बिल्कुल _नहीं__ शुद्ध होना चाहिए, और वास्तव में वे हैं जहां आपकी अधिकांश "अशुद्धियां" रहती हैं। हालांकि, चूंकि शुद्ध कार्यों को समझना और अशुद्ध कार्यों की तुलना में परीक्षण करना स्पष्ट रूप से आसान है, _if_ आप अपने कुछ क्रिया निर्माण तर्क को शुद्ध, महान बना सकते हैं! यदि नहीं, तो ठीक है।

और हां, मेरे दृष्टिकोण से, यह एक डेवलपर के रूप में आप पर निर्भर है कि आप यह निर्धारित करें कि आपके अपने ऐप के तर्क के लिए एक उपयुक्त संतुलन क्या है और यह कहाँ रहता है। एक्शन क्रिएटर / रिड्यूसर डिवाइड के किस पक्ष पर रहना चाहिए, इसके लिए कोई एक कठोर और तेज़ नियम नहीं है। (एर्म, "नियतत्ववाद / गैर-नियतत्ववाद" को छोड़कर, जिसका मैंने ऊपर उल्लेख किया है। जिसे मैं स्पष्ट रूप से इस टिप्पणी में संदर्भित करना चाहता था। जाहिर है।)

@cpsubrian

परिणाम के साथ क्या करें: रेड्यूसर

वास्तव में यही कारण है कि गाथाएं हैं: "यदि ऐसा हुआ, तो वह भी होना चाहिए" जैसे प्रभावों से निपटने के लिए

@markerikson @LumiaSaki

एक्शन क्रिएटर्स को बिल्कुल शुद्ध होने की ज़रूरत नहीं है, और वास्तव में वे हैं जहाँ आपकी अधिकांश "अशुद्धियाँ" रहती हैं।

वास्तव में एक्शन क्रिएटर्स को अशुद्ध होने या यहां तक ​​कि अस्तित्व में रहने की भी आवश्यकता नहीं है।
देखें http://stackoverflow.com/a/34623840/82609

और हां, मेरे दृष्टिकोण से, यह एक डेवलपर के रूप में आप पर निर्भर है कि आप यह निर्धारित करें कि आपके अपने ऐप के तर्क के लिए एक उपयुक्त संतुलन क्या है और यह कहाँ रहता है। एक्शन क्रिएटर / रिड्यूसर डिवाइड के किस पक्ष पर रहना चाहिए, इसके लिए कोई एक कठोर और तेज़ नियम नहीं है।

हां, लेकिन अनुभव के बिना प्रत्येक दृष्टिकोण की कमियों को नोटिस करना इतना स्पष्ट नहीं है :) मेरी टिप्पणी यहां भी देखें: https://github.com/reactjs/redux/issues/1171#issuecomment -167585575

अधिकांश सरल ऐप्स के लिए कोई सख्त नियम ठीक काम नहीं करता है, लेकिन यदि आप पुन: प्रयोज्य घटकों का निर्माण करना चाहते हैं, तो इन घटकों को अपने दायरे से बाहर किसी चीज़ के बारे में पता नहीं होना चाहिए।

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

यह भी देखें https://github.com/slorber/scalable-frontend-with-elm-or-redux

और हां, मेरे दृष्टिकोण से, यह एक डेवलपर के रूप में आप पर निर्भर है कि आप यह निर्धारित करें कि आपके अपने ऐप के तर्क के लिए एक उपयुक्त संतुलन क्या है और यह कहाँ रहता है। एक्शन क्रिएटर / रिड्यूसर डिवाइड के किस पक्ष पर रहना चाहिए, इसके लिए कोई एक कठोर और तेज़ नियम नहीं है।

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

मेरे मामले में मेरे पास 1 एक्शन में रुचि रखने वाले 2 रेड्यूसर हैं। कच्ची क्रिया। डेटा पर्याप्त नहीं है। उन्हें एक रूपांतरित डेटा को संभालने की आवश्यकता है। मैं 2 रेड्यूसर में परिवर्तन नहीं करना चाहता था। इसलिए मैंने फ़ंक्शन को एक थंक में परिवर्तन करने के लिए स्थानांतरित कर दिया। इस तरह मेरे रेड्यूसर उपभोग के लिए तैयार डेटा प्राप्त करते हैं। यह सबसे अच्छा है जो मैं अपने छोटे से 1 महीने के रेडक्स अनुभव में सोच सकता था।

स्टोर की संरचना से घटकों/विचारों को अलग करने के बारे में क्या? मेरा लक्ष्य यह है कि स्टोर की संरचना से प्रभावित होने वाली किसी भी चीज़ को रेड्यूसर में प्रबंधित किया जाना चाहिए, यही कारण है कि मैं चयनकर्ताओं को रेड्यूसर के साथ जोड़ना पसंद करता हूं, इसलिए घटकों को वास्तव में यह जानने की आवश्यकता नहीं है कि स्टोर का एक विशेष नोड कैसे प्राप्त करें।

घटकों को डेटा पास करने के लिए यह बहुत अच्छा है, जब घटक कार्रवाई भेजते हैं, तो दूसरी तरफ क्या होता है:

उदाहरण के लिए एक टोडो ऐप में कहें, मैं एक टोडो आइटम का नाम अपडेट कर रहा हूं, इसलिए मैं उस आइटम के हिस्से को पास करने वाली एक क्रिया भेजता हूं जिसे मैं अपडेट करना चाहता हूं यानी:

dispatch(updateItem({name: <text variable>}));

, और क्रिया परिभाषा है:

const updateItem = (updatedData) => {type: "UPDATE_ITEM", updatedData}

जो बदले में रेड्यूसर द्वारा संभाला जाता है जो बस कर सकता है:

Object.assign({}, item, action.updatedData)

आइटम को अपडेट करने के लिए।

यह बहुत अच्छा काम करता है क्योंकि मैं टोडो आइटम के किसी भी प्रोप को अपडेट करने के लिए उसी क्रिया और रेड्यूसर का पुन: उपयोग कर सकता हूं, यानी:

updateItem({description: <text variable>})

जब इसके बजाय विवरण बदल दिया जाता है।

लेकिन यहां घटक को यह जानने की जरूरत है कि स्टोर में एक टोडो आइटम को कैसे परिभाषित किया जाता है और यदि वह परिभाषा बदलती है तो मुझे उस पर निर्भर सभी घटकों में इसे बदलने के लिए याद रखना होगा, जो स्पष्ट रूप से एक बुरा विचार है, इस परिदृश्य के लिए कोई सुझाव?

@dcoellarb

इस तरह की स्थिति में मेरा समाधान जावास्क्रिप्ट के लचीलेपन का लाभ उठाना है जो बॉयलरप्लेट होगा।

तो मेरे पास हो सकता है:

const {reducer, actions, selector} = makeRecord({
    name: TextField,
    description: TextField,
    completed: BooleanField
})

जहां MakeRecord मेरे विवरण से स्वचालित रूप से रिड्यूसर, एक्शन क्रिएटर्स और चयनकर्ताओं का निर्माण करने के लिए एक फ़ंक्शन है। यह बॉयलरप्लेट को समाप्त कर देता है, लेकिन अगर मुझे कुछ ऐसा करने की ज़रूरत है जो बाद में इस साफ पैटर्न में फिट न हो, तो मैं makeRecord के परिणाम में कस्टम रेड्यूसर/क्रिया/चयनकर्ता जोड़ सकता हूं।

tks @winstonewert मुझे बॉयलरप्लेट से बचने के लिए

@winstonewert @dcoellarb मेरी राय में, एक्शन पेलोड संरचना क्रियाओं से संबंधित होनी चाहिए, न कि रेड्यूसर के लिए, और स्पष्ट रूप से एक रेड्यूसर में राज्य संरचना में अनुवादित की जानी चाहिए। यह एक भाग्यशाली संयोग होना चाहिए कि ये संरचनाएं प्रारंभिक सादगी के लिए एक दूसरे को दर्पण करती हैं। इन दो संरचनाओं को हमेशा एक-दूसरे को प्रतिबिंबित करने की आवश्यकता नहीं है क्योंकि वे एक ही इकाई नहीं हैं।

@sompylasar ठीक है, मैं ऐसा करता हूं, मैं अपने स्टोर संरचना में एपीआई/बाकी डेटा का अनुवाद करता हूं, लेकिन फिर भी केवल एक ही स्टोर संरचना को जानना चाहिए जो रेड्यूसर और चयनकर्ता सही है? कारण है कि मैं उन्हें कॉलोकेट करता हूं, मेरी समस्या घटकों/विचारों के साथ है, अगर मैं इसे बाद में बदलने का फैसला करता हूं तो स्टोर संरचना को जानने की आवश्यकता नहीं है, लेकिन जैसा कि मेरे उदाहरण में बताया गया है, उन्हें संरचना को जानने की जरूरत है ताकि वे कर सकें अद्यतन करने के लिए सही डेटा भेजें, मुझे इसे करने का बेहतर तरीका नहीं मिला है :(।

@dcoellarb आप अपने विचारों को निश्चित प्रकार के डेटा के इनपुट के रूप में सोच सकते हैं (जैसे स्ट्रिंग या संख्या, लेकिन फ़ील्ड के साथ संरचित वस्तु)। यह डेटा ऑब्जेक्ट आवश्यक रूप से स्टोर संरचना को प्रतिबिंबित नहीं करता है। आप इस डेटा ऑब्जेक्ट को एक क्रिया में डालते हैं। यह स्टोर संरचना के साथ युग्मन नहीं है। स्टोर और व्यू दोनों को एक्शन पेलोड स्ट्रक्चर के साथ जोड़ा जाना चाहिए।

@sompylasar समझ में आता है, मैं इसे आज़मा दूंगा, बहुत बहुत धन्यवाद !!!

मुझे शायद यह भी जोड़ना चाहिए कि आप redux-saga का उपयोग करके कार्यों को और अधिक शुद्ध बना सकते हैं। हालाँकि, redux-saga async घटनाओं को संभालने के लिए संघर्ष करता है, इसलिए आप redux-saga के बजाय RxJS (या किसी FRP लाइब्रेरी) का उपयोग करके इस विचार को एक कदम आगे ले जा सकते हैं। यहाँ KefirJS का उपयोग करते हुए एक उदाहरण दिया गया है: https://github.com/awesome-editor/awesome-editor/blob/saga-demo/src/stores/app/AppSagaHandlers.js

हाय @frankandrobot ,

redux-saga async घटनाओं को संभालने के लिए संघर्ष करता है

इससे तुम्हारा क्या मतलब? क्या redux-saga को एसिंक्स इवेंट्स और साइड-इफेक्ट्स को शानदार तरीके से हैंडल करने के लिए नहीं बनाया गया है? https://github.com/reactjs/redux/issues/1171#issuecomment -167715393 पर एक नज़र डालें

नहीं @IceOnFire । पिछली बार जब मैंने redux-saga दस्तावेज़ पढ़े, तो जटिल एसिंक्स वर्कफ़्लो को संभालना कठिन था। उदाहरण के लिए देखें: http://yelouafi.github.io/redux-saga/docs/advanced/NonBlockingCalls.html
इसने कहा (अभी भी कहता है?) प्रभाव के लिए कुछ

हम बाकी विवरण पाठक पर छोड़ देंगे क्योंकि यह जटिल होने लगा है

इसकी तुलना FRP तरीके से करें: https://github.com/frankandrobot/rflux/blob/master/doc/06-side effects.md#a -more-complex-workflow
उस पूरे वर्कफ़्लो को पूरी तरह से संभाला जाता है। (केवल कुछ पंक्तियों में मैं जोड़ सकता हूं।) उसके ऊपर, आपको अभी भी redux-saga अधिकांश अच्छाई मिलती है (सब कुछ एक शुद्ध कार्य है, ज्यादातर आसान इकाई परीक्षण)।

पिछली बार जब मैंने इस बारे में सोचा था, तो मैं इस निष्कर्ष पर पहुंचा था कि समस्या redux-saga है जो सब कुछ समकालिक दिखती है। यह सरल वर्कफ़्लोज़ के लिए बहुत अच्छा है, लेकिन जटिल async वर्कफ़्लोज़ के लिए, यह आसान है यदि आप async को स्पष्ट रूप से हैंडल करते हैं ... जो कि FRP में उत्कृष्ट है।

हाय @frankandrobot ,

आपके व्याख्या के लिये धन्यवाद। मुझे आपके द्वारा उल्लिखित उद्धरण दिखाई नहीं दे रहा है, हो सकता है कि पुस्तकालय विकसित हो (उदाहरण के लिए, मुझे अब एक cancel प्रभाव दिखाई दे रहा है जो मैंने पहले कभी नहीं देखा)।

यदि दो उदाहरण (गाथा और एफआरपी) बिल्कुल समान व्यवहार कर रहे हैं तो मुझे बहुत अंतर नहीं दिखता है: एक कोशिश/पकड़ ब्लॉक के अंदर निर्देशों का अनुक्रम है, जबकि दूसरा धाराओं पर विधियों की एक श्रृंखला है। धाराओं पर मेरे अनुभव की कमी के कारण मुझे गाथा उदाहरण और भी अधिक पठनीय लगता है, और अधिक परीक्षण योग्य है क्योंकि आप हर एक yield एक-एक करके परीक्षण कर सकते हैं। लेकिन मुझे पूरा यकीन है कि यह तकनीकों से ज्यादा मेरी मानसिकता के कारण है।

वैसे भी मुझे इस पर @yelouafi की राय जानना अच्छा

@bvaughn क्या आप परीक्षण कार्रवाई,

परीक्षण लिखते समय क्रियाओं, रेड्यूसर और चयनकर्ताओं का परीक्षण करने का सबसे प्रभावी तरीका "बतख" दृष्टिकोण का पालन करना है। इसका मतलब है कि आपको परीक्षणों का एक सेट लिखना चाहिए जो कि प्रत्येक व्यक्तिगत रूप से ध्यान केंद्रित करने वाले परीक्षणों के 3 सेटों के बजाय दिए गए कार्यों, रेड्यूसर और चयनकर्ताओं के सेट को कवर करता है। यह अधिक सटीक रूप से अनुकरण करता है कि आपके वास्तविक एप्लिकेशन में क्या होता है और यह हिरन के लिए सबसे धमाकेदार प्रदान करता है।

नमस्ते @ morgs32

यह समस्या थोड़ी पुरानी है और मैंने कुछ समय से Redux का उपयोग नहीं किया है। परीक्षण लिखने के बारे में Redux साइट पर एक अनुभाग है जिसे आप देखना चाहते हैं।

मूल रूप से मैं केवल यह इंगित कर रहा था कि- अलगाव में कार्यों और रेड्यूसर के लिए परीक्षण लिखने के बजाय- उन्हें एक साथ लिखना अधिक कुशल हो सकता है, जैसे:

import configureMockStore from 'redux-mock-store'
import { actions, selectors, reducer } from 'your-redux-module';

it('should support adding new todo items', () => {
  const mockStore = configureMockStore()
  const store = mockStore({
    todos: []
  })

  // Start with a known state
  expect(selectors.todos(store.getState())).toEqual([])

  // Dispatch an action to modify the state
  store.dispatch(actions.addTodo('foo'))

  // Verify the action & reducer worked successfully using your selector
  // This has the added benefit of testing the selector also
  expect(selectors.todos(store.getState())).toEqual(['foo'])
})

एक परियोजना पर कुछ महीनों के लिए Redux का उपयोग करने के बाद यह मेरा अपना अवलोकन था। यह आधिकारिक सिफारिश नहीं है। वाईएमएमवी। मैं

"एक्शन-क्रिएटर्स में अधिक और रेड्यूसर में कम करें"

क्या होगा यदि एप्लिकेशन सर्वर और क्लाइंट है और सर्वर में व्यावसायिक तर्क और सत्यापनकर्ता होना चाहिए?
तो मैं कार्रवाई भेजता हूं, और अधिकांश काम सर्वर-साइड पर रेड्यूसर द्वारा किया जाएगा ...

सबसे पहले, मेरी अंग्रेजी के लिए खेद है। लेकिन मेरी कुछ अलग राय है।

मेरी पसंद fat रेड्यूसर, thin एक्शन क्रिएटर है।

मेरे एक्शन क्रिएटर्स कुछ __promise मिडलवेयर__ के आधार पर सिर्फ __dispatch__ क्रिया (async, सिंक, सीरियल-async, समानांतर-async, समानांतर-async फॉर-लूप में) करते हैं।

व्यापार तर्क को संभालने के लिए मेरे रेड्यूसर कई छोटे राज्य स्लाइस में विभाजित हो गए। combineReduers उपयोग करें उन्हें संयोजित करें। reducer __pure function__ है, इसलिए इसका पुन: उपयोग करना आसान है। हो सकता है कि किसी दिन मैं angularJS का उपयोग करूं, मुझे लगता है कि मैं उसी व्यावसायिक तर्क के लिए अपनी सेवा में अपने reducer का पुन: उपयोग कर सकता हूं। यदि आपके reducer में कई लाइन कोड हैं, तो यह छोटे रेड्यूसर में विभाजित हो सकता है या कुछ कार्यों को सार कर सकता है।

हां, कुछ क्रॉस स्टेट केस हैं जिसका अर्थ है A B, C पर निर्भर करता है .. और B, C async डेटा हैं। ए को भरने या आरंभ करने के लिए हमें B,C का उपयोग करना चाहिए। इसलिए मैं crossSliceReducer उपयोग करता हूं।

लगभग __एक्शन-क्रिएटर्स में अधिक और रेड्यूसर में कम करें__।

1. यदि आप redux-thunk या आदि का उपयोग करते हैं। हाँ। आप getState() द्वारा एक्शन क्रिएटर्स के भीतर पूरी स्थिति तक पहुंच सकते हैं। यह एक विकल्प है। या, आप कुछ __crossSliceReducer__ बना सकते हैं, ताकि आप पूरी स्थिति तक भी पहुंच सकें, आप अपने दूसरे राज्य की गणना करने के लिए कुछ स्टेट स्लाइस का उपयोग कर सकते हैं।

__यूनिट परीक्षण__ के बारे में

reducer __pure function__ है। इसलिए परीक्षण करना आसान है। अभी के लिए, मैं सिर्फ अपने रेड्यूसर का परीक्षण करता हूं, क्योंकि यह अन्य भाग की तुलना में सबसे महत्वपूर्ण है।

action creators परीक्षण करने के लिए? मुझे लगता है कि अगर वे "मोटे" हैं, तो शायद परीक्षण करना आसान नहीं होगा। विशेष रूप से __async एक्शन क्रिएटर्स__।

मैं आपसे सहमत हूं @mrdulin अब मैं भी ऐसे ही चला गया हूं।

@mrdulin हाँ। ऐसा लगता है कि आपके अशुद्ध तर्क को रखने के लिए मिडलवेयर सही जगह है।
लेकिन व्यापार तर्क के लिए reducer एक सही जगह की तरह प्रतीत नहीं होता है। आप कई "सिंथेटिक" कार्रवाइयों के साथ समाप्त होंगे जो यह नहीं दर्शाती हैं कि उपयोगकर्ता ने क्या पूछा है लेकिन आपके व्यावसायिक तर्क की क्या आवश्यकता है।

मिडलवेयर से कुछ शुद्ध कार्यों/वर्ग विधियों को कॉल करना बहुत आसान विकल्प है:

middleware = (...) => {
  // if(action.type == 'HIGH_LEVEL') 
  handlers[action.name]({ dispatch, params: action.payload })
}
const handlers = {
  async highLevelAction({ dispatch, params }) {
    dispatch({ loading: true });
    const data = await api.getData(params.someId);
    const processed = myPureLogic(data);
    dispatch({ loading: false, data: processed });
  }
}

@bvaughn

यह गलत टाइप किए गए चर की संभावना को कम करता है जो सूक्ष्म अपरिभाषित मूल्यों की ओर ले जाता है, यह आपके स्टोर की संरचना में परिवर्तन को सरल करता है, आदि।

हर जगह चयनकर्ताओं का उपयोग करने के खिलाफ मेरा मामला, यहां तक ​​​​कि राज्य के तुच्छ टुकड़ों के लिए भी जिन्हें संस्मरण या किसी भी प्रकार के डेटा परिवर्तन की आवश्यकता नहीं है:

• क्या रेड्यूसर के लिए यूनिट परीक्षण पहले से ही गलत टाइप की गई राज्य संपत्तियों को पकड़ नहीं लेना चाहिए?
• स्टोर की संरचना में परिवर्तन मेरे अनुभव में state.stuff.item1 को state.stuff.item2 बदलते हैं तो आप कोड के माध्यम से खोज करते हैं और इसे हर जगह बदलते हैं - जैसे वास्तव में किसी और चीज का नाम बदलना। विशेष रूप से आईडीई का उपयोग करने वाले लोगों के लिए यह एक सामान्य कार्य और गैर-दिमाग है।
• हर जगह चयनकर्ताओं का उपयोग करना एक खाली अमूर्तता है। साधारण टुकड़ों तक सीधे पहुंचने की इस चिंता को कभी नहीं समझा। निश्चित रूप से, आप इस एपीआई को राज्य तक पहुँचने के लिए निरंतरता प्राप्त करते हैं, लेकिन आप सादगी को छोड़ देते हैं।

स्पष्ट रूप से चयनकर्ता आवश्यक हैं, लेकिन मैं उन्हें एक अनिवार्य एपीआई बनाने के लिए कुछ अन्य तर्क सुनना चाहता हूं।

व्यावहारिक दृष्टिकोण से, मेरे अनुभव में एक अच्छा कारण यह है कि राज्य के टुकड़ों तक पहुँचने के लिए पुस्तकालय जैसे कि पुनर्चयन या रेडक्स-सागा उत्तोलन चयनकर्ता। यह मेरे लिए चयनकर्ताओं के साथ बने रहने के लिए काफी है।

दार्शनिक रूप से बोलते हुए, मैं हमेशा चयनकर्ताओं को कार्यात्मक दुनिया के "गेट्टर विधियों" के रूप में देखता हूं। और इसी कारण से मैं जावा ऑब्जेक्ट की सार्वजनिक विशेषताओं तक कभी भी पहुंच नहीं पाऊंगा, मैं रेडक्स ऐप में सीधे सबस्टेट तक नहीं पहुंचूंगा।

@IceOnFire यदि गणना महंगी नहीं है या डेटा परिवर्तन की आवश्यकता नहीं है तो लाभ उठाने के लिए कुछ भी नहीं है।

जावा में गेट्टर विधियां सामान्य अभ्यास हो सकती हैं लेकिन पीओजेओ को सीधे जेएस में एक्सेस करना है।

@timotgl

स्टोर और अन्य रेडक्स कोड के बीच में एक एपीआई क्यों है?

चयनकर्ता एक रेड्यूसर की क्वेरी (पढ़ें) सार्वजनिक एपीआई हैं, क्रियाएं एक रेड्यूसर की कमांड (लिखें) सार्वजनिक एपीआई हैं। रेड्यूसर की संरचना इसका कार्यान्वयन विवरण है।

चयनकर्ताओं और क्रियाओं का उपयोग UI परत में किया जाता है, और सागा परत में (यदि आप redux-saga का उपयोग करते हैं), तो रेड्यूसर में ही नहीं।

@sompylasar सुनिश्चित नहीं है कि मैं यहां आपकी बात का पालन करता हूं। क्रियाओं का कोई विकल्प नहीं है, मुझे उनका उपयोग Redux के साथ बातचीत करने के लिए करना चाहिए। मुझे चयनकर्ताओं का उपयोग करने की आवश्यकता नहीं है , हालांकि, जब यह उजागर होता है, तो मैं सीधे राज्य से कुछ चुन सकता हूं, जो कि डिजाइन द्वारा होता है।

आप चयनकर्ताओं के बारे में एक रेड्यूसर के "रीड" एपीआई के रूप में सोचने का एक तरीका बता रहे हैं, लेकिन मेरा सवाल यह था कि चयनकर्ताओं को पहली जगह में एक अनिवार्य एपीआई बनाने का औचित्य क्या है (अनिवार्य रूप से इसे लागू करने में एक परियोजना में सर्वोत्तम अभ्यास के रूप में, पुस्तकालय द्वारा नहीं डिजाईन)।

@timotgl हां, चयनकर्ता अनिवार्य नहीं हैं। लेकिन वे ऐप कोड में भविष्य के बदलावों की तैयारी के लिए एक अच्छा अभ्यास करते हैं, जिससे उन्हें अलग से रिफैक्टर करना संभव हो जाता है:

• राज्य का कुछ हिस्सा कैसे संरचित और लिखा जाता है (रेड्यूसर चिंता, एक जगह)
• राज्य के उस हिस्से का उपयोग कैसे किया जाता है (यूआई और साइड-इफेक्ट्स की चिंता, कई जगह जहां से एक ही राज्य के टुकड़े की पूछताछ की जाती है)

जब आप चयनकर्ताओं के बिना स्टोर संरचना को बदलने वाले होते हैं, तो आपको उन सभी स्थानों को ढूंढना और पुन: सक्रिय करना होगा जहां राज्य के प्रभावित हिस्सों तक पहुंचा जा सकता है, और यह संभावित रूप से एक गैर-तुच्छ कार्य हो सकता है, न कि केवल खोज-और- बदलें, खासकर यदि आप स्टोर से सीधे प्राप्त राज्य के टुकड़ों को पास करते हैं, चयनकर्ता के माध्यम से नहीं।

@sompylasar आपके इनपुट के लिए धन्यवाद।

यह संभावित रूप से एक गैर-तुच्छ कार्य हो सकता है

यह एक वैध चिंता है, यह मेरे लिए एक महंगा व्यापार जैसा लगता है। मुझे लगता है कि मैं ऐसे राज्य में नहीं आया हूं जिसने ऐसी समस्याएं पैदा की हों। हालांकि, मैं "चयनकर्ता स्पेगेटी" में आया हूं, जहां राज्य के हर छोटे उप-टुकड़े के लिए नेस्टेड चयनकर्ताओं ने काफी भ्रम पैदा किया है। आखिर इस प्रति-उपाय को भी बनाए रखना होगा। लेकिन मैं अब इसके पीछे के कारण को बेहतर ढंग से समझता हूं।

@timotgl एक साधारण उदाहरण जिसे मैं सार्वजनिक रूप से साझा कर सकता हूं:

export const PROMISE_REDUCER_STATE_IDLE = 'idle';
export const PROMISE_REDUCER_STATE_PENDING = 'pending';
export const PROMISE_REDUCER_STATE_SUCCESS = 'success';
export const PROMISE_REDUCER_STATE_ERROR = 'error';

export const PROMISE_REDUCER_STATES = [
  PROMISE_REDUCER_STATE_IDLE,
  PROMISE_REDUCER_STATE_PENDING,
  PROMISE_REDUCER_STATE_SUCCESS,
  PROMISE_REDUCER_STATE_ERROR,
];

export const PROMISE_REDUCER_ACTION_START = 'start';
export const PROMISE_REDUCER_ACTION_RESOLVE = 'resolve';
export const PROMISE_REDUCER_ACTION_REJECT = 'reject';
export const PROMISE_REDUCER_ACTION_RESET = 'reset';

const promiseInitialState = { state: PROMISE_REDUCER_STATE_IDLE, valueOrError: null };
export function promiseReducer(state = promiseInitialState, actionType, valueOrError) {
  switch (actionType) {
    case PROMISE_REDUCER_ACTION_START:
      return { state: PROMISE_REDUCER_STATE_PENDING, valueOrError: null };
    case PROMISE_REDUCER_ACTION_RESOLVE:
      return { state: PROMISE_REDUCER_STATE_SUCCESS, valueOrError: valueOrError };
    case PROMISE_REDUCER_ACTION_REJECT:
      return { state: PROMISE_REDUCER_STATE_ERROR, valueOrError: valueOrError };
    case PROMISE_REDUCER_ACTION_RESET:
      return { ...promiseInitialState };
    default:
      return state;
  }
}

export function extractPromiseStateEnum(promiseState = promiseInitialState) {
  return promiseState.state;
}
export function extractPromiseStarted(promiseState = promiseInitialState) {
  return (promiseState.state === PROMISE_REDUCER_STATE_PENDING);
}
export function extractPromiseSuccess(promiseState = promiseInitialState) {
  return (promiseState.state === PROMISE_REDUCER_STATE_SUCCESS);
}
export function extractPromiseSuccessValue(promiseState = promiseInitialState) {
  return (promiseState.state === PROMISE_REDUCER_STATE_SUCCESS ? promiseState.valueOrError || null : null);
}
export function extractPromiseError(promiseState = promiseInitialState) {
  return (promiseState.state === PROMISE_REDUCER_STATE_ERROR ? promiseState.valueOrError || true : null);
}

यह इस रेड्यूसर उपयोगकर्ता की चिंता नहीं है कि जो संग्रहीत किया जा रहा है वह state, valueOrError या कुछ और। एक्सपोज़्ड स्टेट स्ट्रिंग (एनम) हैं, एक युगल अक्सर उस स्थिति, मान और त्रुटि पर चेक का उपयोग करता है।

हालांकि, मैं "चयनकर्ता स्पेगेटी" में आया हूं, जहां राज्य के हर छोटे उप-टुकड़े के लिए नेस्टेड चयनकर्ताओं ने काफी भ्रम पैदा किया है।

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

function extractTransactionLogPromiseById(globalState, transactionId) {
  return extractState(globalState).transactionLogPromisesById[transactionId] || undefined;
}

export function extractTransactionLogPromiseStateEnumByTransactionId(globalState, transactionId) {
  return extractPromiseStateEnum(extractTransactionLogPromiseById(globalState, transactionId));
}

export function extractTransactionLogPromiseErrorTransactionId(globalState, transactionId) {
  return extractPromiseError(extractTransactionLogPromiseById(globalState, transactionId));
}

export function extractTransactionLogByTransactionId(globalState, transactionId) {
  return extractPromiseSuccessValue(extractTransactionLogPromiseById(globalState, transactionId));
}

ओह एक और बात जो मैं लगभग भूल गया। फ़ंक्शन के नाम और निर्यात/आयात को अच्छी तरह और सुरक्षित रूप से छोटा किया जा सकता है। नेस्टेड ऑब्जेक्ट कुंजियाँ - इतना अधिक नहीं, कोड को खराब न करने के लिए आपको मिनीफायर में उचित डेटा फ्लो ट्रेसर की आवश्यकता होती है।

@timotgl : Redux के साथ हमारे बहुत से प्रोत्साहित सर्वोत्तम अभ्यास Redux से संबंधित तर्क और व्यवहार को समाहित करने का प्रयास करने के बारे में हैं।

उदाहरण के लिए, आप this.props.dispatch({type : "INCREMENT"}) करके सीधे कनेक्टेड घटक से कार्रवाइयां भेज सकते हैं। हालांकि, हम इसे हतोत्साहित करते हैं, क्योंकि यह घटक को "जानने" के लिए मजबूर करता है, यह Redux से बात कर रहा है। चीजों को करने का एक और प्रतिक्रिया-मुहावरेदार तरीका बाध्य एक्शन क्रिएटर्स में पास करना है, ताकि घटक केवल this.props.increment() कॉल कर सके, और इससे कोई फर्क नहीं पड़ता कि वह फ़ंक्शन एक बाध्य Redux एक्शन क्रिएटर है, एक कॉलबैक पास हुआ माता-पिता द्वारा नीचे, या एक परीक्षण में एक नकली समारोह।

आप हर जगह क्रिया प्रकारों को हाथ से लिख सकते हैं, लेकिन हम निरंतर चर को परिभाषित करने के लिए प्रोत्साहित करते हैं ताकि उन्हें आयात किया जा सके, पता लगाया जा सके और टाइपो की संभावना कम हो सके।

इसी तरह, आपके mapState फ़ंक्शन या थंक्स में आपको state.some.deeply.nested.field तक पहुंचने से कोई रोक नहीं सकता है। लेकिन, जैसा कि इस धागे में पहले ही वर्णित किया जा चुका है, इससे टाइपो की संभावना बढ़ जाती है, उन स्थानों को ट्रैक करना कठिन हो जाता है जहां राज्य के एक विशेष टुकड़े का उपयोग किया जा रहा है, रिफैक्टरिंग को और अधिक कठिन बना देता है, और इसका मतलब है कि कोई भी महंगा परिवर्तन तर्क शायद फिर से है - हर बार दौड़ना, भले ही इसकी आवश्यकता न हो।

तो नहीं, आपके पास चयनकर्ताओं का उपयोग करने के लिए _have_ नहीं है, लेकिन वे एक अच्छा वास्तुशिल्प अभ्यास हैं।

आप मेरी पोस्ट Idiomatic Redux के माध्यम से पढ़ना चाह सकते हैं

@markerikson मैं सामान्य रूप से चयनकर्ताओं, या महंगी गणनाओं के चयनकर्ताओं के खिलाफ बहस नहीं कर रहा हूं। और मैंने कभी भी किसी घटक को प्रेषण पास करने का इरादा नहीं किया :)

मेरा कहना था कि मैं इस विश्वास से असहमत हूं:

आदर्श रूप से, केवल आपके रेड्यूसर फ़ंक्शंस और चयनकर्ताओं को सटीक राज्य संरचना पता होना चाहिए, इसलिए यदि आप बदलते हैं जहां कुछ राज्य रहता है, तो आपको केवल तर्क के उन दो टुकड़ों को अपडेट करने की आवश्यकता होगी।

state.some.deeply.nested.field साथ आपके उदाहरण के बारे में, मैं इसे छोटा करने के लिए चयनकर्ता होने का मूल्य देख सकता हूं। selectSomeDeeplyNestedField() एक फ़ंक्शन नाम बनाम 5 गुण है जो मुझे गलत हो सकता है।

दूसरी ओर, यदि आप पत्र के लिए इस दिशानिर्देश का पालन करते हैं, तो आप const selectSomeField = state => state.some.field; या यहां तक ​​कि const selectSomething = state => state.something; भी कर रहे हैं, और कुछ बिंदु पर इसे लगातार करने का ओवरहेड (आयात, निर्यात, परीक्षण) मेरी राय में अब (बहस योग्य) सुरक्षा और शुद्धता को उचित नहीं ठहराता है। यह अच्छी तरह से है लेकिन मैं दिशानिर्देश की हठधर्मिता को दूर नहीं कर सकता। मैं अपने प्रोजेक्ट में डेवलपर्स पर भरोसा करता हूं कि चयनकर्ताओं को बुद्धिमानी से और जब लागू हो - क्योंकि मेरा अब तक का अनुभव यह रहा है कि वे ऐसा करते हैं।

कुछ शर्तों के तहत मैं देख सकता था कि आप सुरक्षा और सम्मेलनों के पक्ष में गलती क्यों करना चाहेंगे। आपके समय और जुड़ाव के लिए धन्यवाद, मैं कुल मिलाकर बहुत खुश हूं कि हमारे पास रेडक्स है।

ज़रूर। एफडब्ल्यूआईडब्ल्यू, अन्य चयनकर्ता पुस्तकालय हैं, और साथ ही https://github.com/planttheidea/selectorator आपको डॉट-नोटेशन कुंजी पथ परिभाषित करने देता है, और यह आंतरिक रूप से आपके लिए मध्यवर्ती चयनकर्ता करता है।