Redux: एगहेड पर Redux स्क्रीनकास्ट श्रृंखला

:+1:

1. स्थानीय घटक की स्थिति बनाम वैश्विक स्थिति
2. एकाधिक रेड्यूसर बनाम 1-टू-1 एक्शन-रेड्यूसर संबंध द्वारा नियंत्रित कार्रवाई
3. एक्शन चेन (विशेष रूप से एसिंक वाले) को संभालना, जब पहली क्रिया समाप्त होने के ठीक बाद दूसरी क्रिया को ट्रिगर किया जाना चाहिए।
4. अनावश्यक पुनर्रचना (बैचिंग क्रियाएँ, पुन: चयन आदि) को रोकने के लिए अनुकूलन तकनीकें।

:+1:

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

इस पर आपके विचार जानकर बहुत अच्छा लगेगा।

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

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

ठीक है, समझ में आता है। इस निर्णय के पीछे आपकी सोच को जानकर अच्छा लगा :-)।

@smashercosmo ने क्या कहा: +1:

इकाई का परीक्षण। टीडीडी।

@केटलैंड ने क्या कहा: +1:

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

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

आगामी वीडियो के लिए मैं कम प्रतिक्रिया विशिष्ट अवधारणाओं और async क्रियाओं और परीक्षणों पर अधिक देखना चाहता हूँ।

उल्लेखनीय रूप से अच्छा किया, इसे जारी रखें! :)

वीडियो 21 में आप ध्यान दें कि TodoApp घटक को अब एक वर्ग होने की आवश्यकता नहीं है, यह एक फ़ंक्शन हो सकता है। यह बहुत अच्छा होगा यदि आप यह बता सकें कि आप इस अहसास तक कैसे पहुंचे - यह एक कार्यात्मक घटक होने के लिए उपयुक्त उम्मीदवार क्यों है, और इससे क्या लाभ होता है?

यह बहुत बढ़िया है।

@smashercosmo की सूची में आइटम 3 कुछ ऐसा है जिसे मैं भी जानना चाहता हूं।

@wpannell ने क्या कहा! यूनिट परीक्षण/टीडीडी!

उन्नत डॉक्स में शामिल विषयों पर वीडियो देखना भी पसंद करेंगे।

यूनिट परीक्षण के संबंध में आप विशेष रूप से क्या रुचि रखते हैं?
पाठ 5, 11, 12 इस बात का विचार देते हैं कि रिड्यूसर का यूनिट परीक्षण कैसे करें।

...यह एक अच्छा सवाल है। क्या मोचा परीक्षण होने पर प्रक्रिया बहुत बदल जाएगी?

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

सबसे पहले, बढ़िया वीडियो। रेडक्स को पहले से ही समझते हैं लेकिन यह ताज़ा था।
यदि आप अधिक उन्नत वीडियो बना रहे हैं, तो क्या मैं आपको async क्रिया / मिडलवेयर सुझा सकता हूँ।
ऐसा मत सोचो कि इकाई परीक्षण को वास्तव में किसी कवरेज की आवश्यकता है। आप बस अपने रेड्यूसर कार्यों को कॉल कर सकते हैं और उन पर जोर दे सकते हैं?

हाँ, मुझे लगता है कि यह वास्तव में expect s को मोचा परीक्षणों में लपेटने के अलावा और कुछ नहीं है। :थम्स अप:

शुक्र है कि सब कुछ इतना आसान है!

ऑब्जेक्ट आईडी हैश के साथ अपरिवर्तनीयता (जैसे [post._id]: {...post} )।

मैं एपीआई संस्थाओं की एक सरणी लेने और इसके साथ एक आईडी हैश बनाने के लिए खुद को reduce फ़ंक्शन पर बहुत अधिक निर्भर करता हूं। मुझे पता है कि normalizr इसमें से कुछ को संभाल लेगा, लेकिन मुझे एगहेडियो वीडियो के समान वीडियो चाहिए जहां आप हमें बिंदु A से B तक ले जाते हैं। यह केवल एक Redux-आधारित चीज नहीं है, बल्कि बहुत अधिक परस्पर जुड़ी हुई है।

@raquelxmoss

वीडियो 21 में आप ध्यान दें कि TodoApp घटक को अब एक वर्ग होने की आवश्यकता नहीं है, यह एक फ़ंक्शन हो सकता है। यह बहुत अच्छा होगा यदि आप यह बता सकें कि आप इस अहसास तक कैसे पहुंचे - यह एक कार्यात्मक घटक होने के लिए उपयुक्त उम्मीदवार क्यों है, और इससे क्या लाभ होता है?

वह वास्तव में मेरी ओर से कुछ टेढ़ी-मेढ़ी पाठ योजना थी। मुझे बहुत देर तक एहसास नहीं हुआ कि मैं इसे शुरू से ही एक कार्यात्मक घटक बना सकता था। कक्षाओं में फ़ंक्शंस का उपयोग करने का लाभ सरलता है, इसलिए इसे कभी भी करें। मूल रूप से यदि आपको componentDidMount या राज्य जैसे जीवनचक्र हुक की आवश्यकता नहीं है, तो कार्यात्मक घटकों का उपयोग करें।

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

मुझे उन्नत रेड्यूसर रचना भी चाहिए।

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

पूरा देखा, बहुत अच्छा! मैंने ES6/7 सिंटैक्स ( Object.assign -like), रिएक्ट 0.14 फ़ंक्शन घटकों और अपरिवर्तनीय चीज़ों से बचने के उपयोग की सराहना की।

शायद अनुशंसित कोड आर्किटेक्चर की व्याख्या करने वाला एक वीडियो।

और ES6/7 सिंटैक्स का उपयोग करने के लिए दस्तावेज़ को अपडेट करना? (क्या उस दिशा में जनसंपर्क का स्वागत है?)

यूनिट परीक्षण, एपीआई मिडलवेयर बनाना, रेडक्स के साथ ओएथ/कुछ प्रकार के उपयोगकर्ता प्रमाणीकरण करना, रेडक्स के साथ अपरिवर्तनीय का उपयोग करना (इसे कैसे स्थापित किया जाए, सर्वोत्तम अभ्यास इत्यादि)

यह श्रृंखला Redux, एकल-परमाणु अवस्था और संबंधित दर्शन के लिए एक महान परिचय के रूप में कार्य करती है। मैंने सोचा था कि आपने संज्ञानात्मक अधिभार को प्रेरित करने से बचते हुए मूल सिद्धांतों पर ध्यान देने का अच्छा काम किया है। आपने जिस वातावरण में काम किया है, वह भी आसानी से नकल करने योग्य है, जो हाथों के हिस्से को और अधिक सुलभ बनाता है।

@gaearon उदाहरण वीडियो में क्रियाओं को शुरू से ही एक सामान्य मानक { type: string, payload: Object } रूप में संरचित करने के बारे में आप क्या सोचते हैं? मैं काउंटर सूची उदाहरण के बारे में बात कर रहा हूं, जहां पेलोड को एक्शन ऑब्जेक्ट पर ही रखा जाता है; { type: string, index: number } । यह मेरे लिए एक विरोधी पैटर्न की तरह दिखता है।

उदाहरण के वीडियो में क्रियाओं को एक सामान्य-मानक {प्रकार: स्ट्रिंग, पेलोड: ऑब्जेक्ट} के रूप में शुरू से ही संरचित करने के बारे में आप क्या सोचते हैं? मैं काउंटर सूची उदाहरण के बारे में बात कर रहा हूं, जहां पेलोड को एक्शन ऑब्जेक्ट पर ही रखा जाता है; {टाइप: स्ट्रिंग, इंडेक्स: नंबर}। यह मेरे लिए एक विरोधी पैटर्न की तरह दिखता है।

यह किसी भी तरह से विरोधी पैटर्न नहीं है। यह एक सामान्य क्रिया वस्तु है। FSA ठीक है लेकिन यह एक _convention_ है। Redux में कुछ भी इस कन्वेंशन पर निर्भर या लाभ पर निर्भर नहीं करता है, इसलिए हम इसे लागू नहीं करना चाहते हैं।

लोग मूल Flux प्रलेखन में payload , source बारे में हर तरह की जादुई बातें सोचते थे। उन्होंने आँख बंद करके इन चीजों की नकल की, बिना यह समझे कि वे क्यों मौजूद हैं और ध्यान से यह आकलन करते हैं कि उन्हें उनकी आवश्यकता भी है या नहीं। बाद में उन्होंने फ्लक्स के जटिल और वर्बोज़ होने की शिकायत की, जब वास्तव में कई मामलों में उन्होंने वर्बोज़ (लेकिन गैर-आवश्यक) भागों को स्वयं कॉपी किया।

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

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

@sompylasar

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

साथ ही, एफएसए का पालन न करने के बारे में कुछ भी असंरचित नहीं है। { type: 'STUFF', id: 1 } स्वाभाविक रूप से { type: 'STUFF', payload: { id: 1 } } से भी बदतर नहीं है। यह सिर्फ स्वाद और (कभी-कभी) टूलींग सम्मेलन का मामला है। क्रिया वस्तुओं को payload कम रखने से उनके साथ काम करना कठिन नहीं हो रहा है।

हमें जल्द ही एगहेड पर कुछ मुट्ठी भर रेडक्स यूनिट परीक्षण पाठ मिल रहे हैं

हमने किसी भी Redux पाठ को कुछ समय के लिए बंद कर दिया ताकि डैन में पहली दरार आए। पूरी तरह से प्रतीक्षा के लायक, और फिर कुछ।

"Idiomatic Redux के साथ एक एप्लिकेशन बनाएं" एक अद्भुत उन्नत पाठ्यक्रम होगा

@joelhooks वे दोनों अद्भुत लगते हैं!

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

@kevinrenskers यह एक वीडियो श्रृंखला नहीं है, लेकिन अगर आपको कुछ विच्छेदन करने का मन करता है, तो वास्तव में कुछ बेहतरीन उदाहरण बॉयलरप्लेट हैं जिन्हें आप संदर्भित कर सकते हैं!

जिन लोगों ने डैन के उदाहरण और वेबपैक कॉन्फ़िगरेशन के लिए एक परियोजना संरचना के लिए कहा है।

कृपया इसे https://github.com/urbanvikingr/todo देखें।

मैंने वीडियो से डैन के कोड के साथ संरेखित होने के लिए रिएक्ट डॉक के साथ Redux को अपडेट करने के लिए प्रतिबद्ध किया है। यह अगले दो सप्ताह के भीतर किया जाएगा - मेरा हॉलिडे प्रोजेक्ट :) - देखते रहें।

Egghead.io वीडियो के लिए मेरी इच्छा सूची:
जैस्मीन के साथ क्रिया / रेड्यूसर परीक्षण
मिडलवेयर पर गहरा गोता लगाएँ (थंक / वादे)

स्क्रीनकास्ट Redux के लिए एक बहुत ही उपयोगी परिचय है। मैं जो सुनना चाहता हूं वह रूटिंग और सर्वर-साइड रेंडरिंग करने के लिए Redux-way है

@grigio आप इस चर्चा में रुचि ले सकते हैं https://github.com/rackt/redux/issues/1145 रूटिंग के बारे में

@urbanvikingr धन्यवाद, सब्सक्राइब किया। पोल बंद लगता है, लेकिन मैंने #1168 . वोट दिया होता

सबक वास्तव में बहुत अच्छे हैं, लेकिन यह ध्यान भंग करने वाला है कि जब आप "स्टोर" कहते हैं, तो यह "घर का काम" जैसा लगता है।

यहां सभी ने इसे देखा और विचलित किया। वे इसे लाने के लिए राजनीतिक रूप से बहुत सही हैं। तो हाँ, मैंने _वह_ लड़का बनने का फैसला किया, अगर कोई और कभी नहीं करेगा :)

मैं अंततः अंग्रेजी बोलने में बेहतर हो जाऊंगा। अभी के लिए यह सबसे अच्छा है जो मैं कर सकता हूं ;-)

@gaearon आपने Redux को समझाने में बहुत अच्छा काम किया है। आपको और आपकी ओपन सोर्स उपलब्धियों को नमन।

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

( @jugimaster को भी न सुनें, हर कोई आपके उच्चारण से विचलित नहीं हुआ था और "इसे लाने के लिए राजनीतिक रूप से बहुत सही था", या यहां तक ​​​​कि परवाह है कि आपके पास एक उच्चारण है।)

@ianstormtaylor
यह एक उच्चारण नहीं है, वैसे :)

मैंने या तो "परवाह" नहीं की, लेकिन मुझे यकीन है कि विचलित था!

लेकिन दूसरी ओर, एक ऐसे व्यक्ति के रूप में जिसने छह विदेशी भाषाओं का अध्ययन किया है, मैं हमेशा एक भाषा को सही ढंग से बोलने की परवाह करता हूं, और इसके लिए, मैं व्यक्तिगत रूप से मेरी गलतियों को इंगित करने वाले किसी व्यक्ति की सराहना करता हूं।

अरे @gaearon ,

आपका पाठ्यक्रम बिल्कुल पसंद आया। अच्छा काम! यह बहुत मददगार था।

मैंने अपने हाल के एगहेड पाठ्यक्रम में तीन Redux परीक्षण वीडियो पाठ जोड़े हैं:
https://egghead.io/series/react-testing-cookbook

मेरी आशा है कि वे आपके द्वारा किए गए सभी अद्भुत कार्यों के लिए पूरक होंगे!

ठोस पाठ्यक्रम!

न केवल Redux ज्ञान बल्कि आधुनिक प्रथाओं के ज्ञान को समग्र रूप से सुधारता है! ऐसे ही अच्छे काम करते रहो :+1: :tada:

अरे, बस एहसास हुआ कि वीडियो में कोड का कोई लिंक/संदर्भ नहीं है। शायद स्पष्ट, और शायद, काफी सरल उपयोगकर्ता केवल वीडियो कॉपी कर सकते हैं; लेकिन मुझे लगता है कि वीडियो में सटीक कोड वाले रेपो से बहुत से लोग लाभान्वित हो सकते हैं- क्यों नहीं?

प्रत्येक पाठ के लिए कोड स्निपेट एगहेड ग्राहकों के लिए उपलब्ध हैं। :-)
वीडियो मुफ्त हैं लेकिन प्लेटफॉर्म को पैसा कमाना होगा ताकि वह अधिक पाठ्यक्रमों में निवेश कर सके, प्रशिक्षकों को उपकरण भेज सके, वीडियो होस्ट कर सके, वेबसाइट में सुधार कर सके, और इसी तरह।

उस ने कहा कि हमारे पास examples/todos फ़ोल्डर है जो पाठ्यक्रम से काफी मेल खाता है।

... अच्छा, मैं इसे याद कर रहा हूँ तो? लिंक खोज रहे हैं...

@gaearon क्षमा चाहते हैं, बस वीडियो पर दोबारा गौर किया। कोड वहीं है :)... वीडियो देखे, सदस्यता खरीदी, दूसरों को देखा... वास्तव में लॉग इन किए गए रेडक्स वीडियो पर वापस चले गए। चीयर्स।

वैसे, कुछ लोगों ने शिकायत की कि टेप गलत हैं।
कृपया उन्हें ठीक करने के लिए पीआर भेजें: https://github.com/eggheadio/egghead-redux-transscripts

@gaearon मैंने एगहेड पर रेडक्स vids पाया। वीडियो ने वास्तव में मुझे redux सीखना शुरू करने में मदद की। आगे जाकर वास्तविक दुनिया के और अधिक उदाहरण देखना बहुत अच्छा होगा।

इसलिए आगे बढ़ने वाले रेडक्स वीडियो प्रशिक्षण के लिए मेरा सुझाव उन्नत रचना, रिफैक्टरिंग में एक गहरा गोता, और निश्चित रूप से पुनर्चयन का उपयोग करने का तरीका होगा। ऐसा लगता है कि आपको रिफैक्टर कब करना है इस पर अंतर्ज्ञान है। इसलिए, चूंकि कार्यात्मक प्रोग्रामिंग इतनी गहराई से रेडक्स से जुड़ी हुई है, इसलिए आपसे कुछ सुझाव प्राप्त करना कि रिफैक्टर कब करना है और एक फ़ंक्शन की पहचान कैसे करें जो एक चीज अच्छी तरह से करता है, वास्तव में उपयोगी होगा।

मैं जिस ऐप का निर्माण कर रहा हूं उसमें मेरे पास कई बड़े डेटा संग्रह हैं और मुझे उन्हें टेबल में डालने और डेटा को सॉर्ट और पेजिनेट करने जैसी चीजें करने की ज़रूरत है। मुझे यह तय करने में कठिनाई हो रही है कि कब चयनकर्ताओं का उपयोग करना है और कब क्रियाओं का निर्माण करना है। वर्तमान में मेरे पास USERS_SORT_TABLE कार्रवाई और SORT_TABLE कार्रवाई है क्योंकि मेरे पास उपयोगकर्ता तालिका से कुछ राज्य "विरासत में" संग्रहीत करते हैं। मैंने ऐसा इसलिए किया क्योंकि मैं उपयोगकर्ता स्टोर द्वारा क्रमबद्ध किए जा रहे टूडू स्टोर पर SORT_TABLE कार्रवाई नहीं चाहता था।

मुझे पता है कि मेरा समाधान DRY नहीं है, लेकिन मुझे यकीन नहीं है कि इसे सही तरीके से कैसे किया जाए। जैसा कि यह खड़ा है, मुझे प्रत्येक स्टोर के लिए एक "SOMETHING"_SORT_TABLE एक्शन बनाना होगा, जिसे मैं एक टेबल पॉप्युलेट करना चाहता हूं, जो मुझे पता है कि गलत है, लेकिन मुझे सही तरीका नहीं पता है। एक और साइड इफेक्ट यह है कि मेरे एक्शन का नाम बहुत बड़ा हो रहा है क्योंकि मुझे अलग-अलग स्टोर को उनके नाम को एक्शन में प्रीफ़िक्स करके अलग करना है। यह सही नहीं हो सकता।

यहाँ कुछ उदाहरण कोड है:

/* actions.js */
// ...
export const USER_MOVE_COLUMN = 'USER_MOVE_COLUMN'

export function userMoveColumn (columnIndex, moveToIndex) {
  return {
    type: USER_MOVE_COLUMN,
    columnIndex,
    moveToIndex
  }
}

export const DATA_TABLE_MOVE_COLUMN = 'DATA_TABLE_MOVE_COLUMN'
// ...

/* reducers.js */
// ...
export default function user (state=userInitialState, action) {
  switch (action.type) {
    // ...
    case USER_MOVE_COLUMN:
      return dataTable(state, assign(
        action,
        {type: DATA_TABLE_MOVE_COLUMN}
      ))
    // ...
    default:
      return state
  }
}
// ...
export default function dataTable (
  state=dataTableInitialState,
  action,
  key='dataTable')
{
  switch (action.type) {
    // ...
    case DATA_TABLE_MOVE_COLUMN:
      return {
        ...state,
        [key]: {
          ...state[key],
          columns: move(
            state[key].columns, action.columnIndex, action.moveToIndex
          )
        }
      }
    // ...
    default:
      return state
  }
}

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

तो वर्तमान में मैं इनमें से कुछ समस्याओं को हल करने और कुछ अन्य को हल करने के लिए रीफैक्टरिंग तकनीकों को हल करने के लिए पुन: चयन सीखने के लिए संघर्ष कर रहा हूं। पहला Redux कोर्स मुझे खतरनाक बनाने के लिए काफी था। अब मैं सीखना चाहूंगा कि इसे सही तरीके से कैसे किया जाए। :)

मुझे आशा है कि यह मददगार था और बहुत वर्बोज़ नहीं था। स्पष्ट, ईमानदार प्रतिक्रिया देने की कोशिश कर रहा है।

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

चेतावनी के लिए धन्यवाद :)

मेरी परियोजना के भीतर redux-devtools को एकीकृत करना मेरे लिए एक बहुत बड़ा दर्द था .. मैं एक एगहेड श्रृंखला की सराहना करता (और अभी भी करूंगा) जो बताता है कि वहां क्या है और इसका उपयोग कैसे/कब करना है। मैं पीआर पढ़ता हूं जहां आप वर्णन करते हैं कि कब क्या उपयोग करना है .. लेकिन मैं इतना भ्रमित हो गया कि वहां बहुत सी चीजें हैं एचएमआर, ट्रांसफॉर्म 3, रेडक्स हॉट रीलोडर रिएक्ट हॉट रीलोडर से अलग है और इसी तरह ..

मेरे द्वारा ऊपर उल्लिखित कुछ मुद्दों से जूझ रहे किसी और के लिए, मैंने एक प्रोजेक्ट बनाया है जो आपको Redux में बॉयलरप्लेट के साथ-साथ नेमस्पेस क्रियाओं में से अधिकांश को हटाने की अनुमति देता है। इसे यहां देखें

@granteagon क्या यह युगल एक्शन क्रिएटर्स को

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

@gaearon @markerikson यह एक्शन क्रिएटर्स के लिए युगल

@granteagon @gaearon

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

const counterReducersA = {
  // this counter increments by 1 each time
  increment: (state, action) => state + 1
}

const counterReducersB = {
  // this counter increments by 2 each time
  increment: (state, action) => state + 2
}

const counterA = reduxr(counterReducersA, 0);
const counterB = reduxr(counterReducersB, 0);

const rootReducer = combineReducers({
  counterA: counterA.reducer,
  counterB: counterB.reducer
});

store.dispatch(counterA.action.increment());  // increments both counters

बेशक, यदि आपके पास एक से अधिक "रेड्यूसर" फ़ंक्शन हैं, तो एक ही चीज़ का नाम दिया गया है (यानी एक ही क्रिया का जवाब देना), परोक्ष रूप से उन दोनों को "अपेक्षित" करने की आवश्यकता है कि एक्शन पेलोड एक निश्चित आकार में होगा --- जो पूरी तरह से समान है वेनिला रेडक्स में दो रेड्यूसर होने के कारण दोनों एक ही type स्थिरांक को संभालते हैं --- दोनों को एक ही क्रिया आकार की अपेक्षा करनी होगी।

शायद मैंने गलत समझा है कि युग्मन, @gaearon से आपका क्या मतलब है?

मुझे लगता है कि थंक कार्यान्वयन दिखाने से पहले मिडलवेयर के बिना एक अतुल्यकालिक प्रवाह दिखाना मददगार हो सकता है।

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

@battaile : ऐसा इसलिए है क्योंकि यह सच है :) मिडलवेयर के बिना, किसी भी अतुल्यकालिकता को Redux के बाहर पूरी तरह से होना चाहिए (इसलिए, आपकी UI परत में सबसे अधिक संभावना है, जैसे कि रिएक्ट घटक)। जब भी आप store.dispatch कॉल करते हैं, तो कार्रवाई सीधे रेड्यूसर फ़ंक्शन पर जाएगी, गो पास न करें, $200 एकत्र न करें, AJAX कॉल के लिए रास्ते में कोई स्टॉप न बनाएं।

स्टोर एन्हांसर्स आपको अपने स्वयं के संस्करण के साथ dispatch जैसे कार्यों को लपेटने की अनुमति देते हैं, और इसलिए applyMiddleware वास्तविक स्टोर के dispatch फ़ंक्शन तक पहुंचने से पहले "मिडलवेयर पाइपलाइन" का सार प्रदान करता है। . यह मूल रूप से एक बचाव का रास्ता प्रदान करता है जहां आप बाहर कूद सकते हैं और मानक Redux प्रवाह के _inside_ जो भी अतुल्यकालिक सामान चाहते हैं, कर सकते हैं।

तो, मिडलवेयर के बिना, आप अभी भी पूरी तरह से एसिंक सामान कर सकते हैं ... यह सब कुछ वास्तव में Redux से संबंधित किसी भी चीज़ से पूरी तरह से अलग होना होगा।

ऐसा इसलिए है क्योंकि यह सच है :)

मैंने यह नहीं कहा कि यह झूठा था, मैंने कहा कि इसने मुझे पटरी से उतार दिया :)

मैं बस निम्नलिखित की तरह कुछ करना चाहता था, जिसका अर्थ यह था कि मैं नहीं कर सका:

const mapDispatchToProps = (dispatch) => ({
  onclick(searchTerm) {
    dispatch(actions.requestOrders(searchTerm));

    return fetch('http://localhost:49984/Order/Search?search=' + searchTerm)
      .then(response => response.json()).then(response => {
        dispatch(actions.receiveOrders(searchTerm, response));
      })
      .catch((err) => {
        dispatch(actions.receiveOrdersError('An error occurred during search: ' + err.message));
      });
  },
});

मुझे एहसास है कि यह आसानी से बदसूरत हो सकता है, लेकिन अवधारणात्मक रूप से मुझे लगता है कि यह देखना उपयोगी है। या कम से कम यह मेरे मामले में था।

मैं सहमत हूं कि "मिडलवेयर के बिना, Redux स्टोर केवल सिंक्रोनस डेटा प्रवाह का समर्थन करता है।" भ्रामक है।

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

हाँ, वहाँ अंतर यह है कि async व्यवहार तकनीकी रूप से घटक स्तर पर अधिक हो रहा है, बजाय dispatch "अंदर" के। एक मामूली अंतर, लेकिन एक वैध।

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

@markerikson बस उत्सुक अगर आपके पास कोई ठोस उदाहरण है जहां अंदर और बाहर के मामलों के बीच भेद है?

एक उदाहरण यह हो सकता है कि यदि आप चाहते हैं कि मिडलवेयर श्रृंखला में _before_ आपका एसिंक मिडलवेयर आपके भेजे गए थंक (या वादा, आदि) को देखने में सक्षम हो। मुझे यकीन नहीं है कि _what_ वह मिडलवेयर _do_ होगा, लेकिन मुझे लगता है कि ऐसा करना संभव है।

मम्म ... विशेष रूप से "ठोस" उदाहरणों के बारे में निश्चित नहीं है। कुल मिलाकर, "बाहर" और "इनसी" के बीच का अंतर एक सवाल है कि क्या ऐसा होता है _before_ आप पहली बार dispatch कॉल करते हैं, या _after_। यदि यह "बाहर" और "पहले" है, तो आपकी सभी अतुल्यकालिकता और तर्क दृश्य परत से अधिक बंधे हैं, चाहे वह प्रतिक्रिया हो, कोणीय, या कुछ और। यदि यह "अंदर" और "बाद" है, तो आपकी अतुल्यकालिकता और तर्क स्टोर स्तर पर है, और _not_ दृश्य परत से बंधा हुआ है।

यह वास्तव में बहुत कुछ है जिसे मैं आज पहले रेडिट चर्चा में बनाने की कोशिश कर रहा था: https://www.reddit.com/r/reactjs/comments/4spbip/has_anone_inserted_a_controllerpresenter_layer/ ।

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

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

@markerikson पूछताछ की इस पंक्ति पर मेरे साथ असर करने के लिए धन्यवाद। तर्कपूर्ण होने के जोखिम पर, मैं इस विचार पर थोड़ा पीछे हटना चाहता हूं कि यह "ऐप स्तर" बनाम "यूआई स्तर" है।

नोट: सुविधा के लिए मैं thunk का उपयोग async के लिए एक गैर-मौजूदा मिडलवेयर दृष्टिकोण का प्रतिनिधित्व करने के लिए करने जा रहा हूं, चाहे वह वास्तव में redux-thunk या redux-वादा हो, या जो भी हो।

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

इससे यूआई परत पर कोई फर्क नहीं पड़ता है कि क्या "हैंडलर" एक फ़ंक्शन भेजता है (मिडलवेयर द्वारा नियंत्रित किया जाता है) या क्या यह एक एसिंक कॉल निष्पादित करता है और _then_ एक सादा क्रिया भेजता है --- यूआई पूरी तरह से अज्ञेयवादी है (या कम से कम, यह _can_ अज्ञेयवादी हो)

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

यदि आप मुझे रेडक्स-थंक का उपयोग करके एक्शन क्रिएटर्स के साथ लिखा गया एक प्रतिक्रिया/रेडक्स एप्लिकेशन देते हैं, तो मैं पूरी तरह से रेडक्स-थंक को स्वैप कर सकता हूं और बिना किसी यूआई परत को बदले बिना _फंडामेंटली_ के गैर-मिडलवेयर दृष्टिकोण का उपयोग कर सकता हूं। (नोट: मैं इस बात पर प्रकाश डाल रहा हूं कि आप कहां/कैसे इंजेक्ट करते हैं getState , लेकिन मैं _believe_ यह यहां एक मामूली विवरण है)।

इसलिए, मुझे यह स्वीकार करने में परेशानी हो रही है कि "अंदर" और "बाहर" के बीच का अंतर "ऐप स्तर" या "यूआई स्तर" है।

मैं चर्चा की सराहना करता हूं, और मुझे आशा है कि मैं नकारात्मक रूप से नहीं आ रहा हूं।

यह कोर्स बढ़िया है। इसे बंद करना ताकि लोग अपनी टिप्पणियों को पाठ्यक्रम के लिए सामुदायिक नोट्स रेपो पर निर्देशित कर सकें: https://github.com/tayiorbeii/egghead.io_redux_course_notes

साथ ही, अगली श्रृंखला डैन पुट टुगेथ देखना सुनिश्चित करें! https://egghead.io/courses/build-react-applications-with-idiomatic-redux