javascript - फेसबुक फ्लक्स पर Redux का उपयोग क्यों करें?




reactjs reactjs-flux (6)

2018 के मध्य में एक्सटीजेएस से (कुछ वर्षों में) पलायन की एक नई प्रतिक्रिया / रिड्यूक अपनाने वाले से:

Redux लर्निंग कर्व के पीछे की ओर खिसकने के बाद मेरे पास एक ही सवाल था और सोचा था कि शुद्ध प्रवाह ओपी की तरह सरल होगा।

मैंने जल्द ही ऊपर दिए गए उत्तरों में बताए अनुसार फ्लक्स पर रेडक्स के लाभों को देखा, और इसे अपने पहले ऐप में काम कर रहा था।

बॉयलर की प्लेट पर फिर से पकड़ बनाते हुए, मैंने कुछ अन्य राज्य प्रबंधन के कामों की कोशिश की, जो सबसे अच्छा मुझे मिला वह था rematch

यह बहुत अधिक सहज था तब वेनिला रेडक्स, यह बॉयलरप्लेट के 90% हिस्से को काट देता है और 75% उस समय को काट देता है जब मैं रेडक्स पर खर्च कर रहा था (मुझे लगता है कि एक पुस्तकालय करना चाहिए), मुझे युगल उद्यम एप्लिकेशन प्राप्त करने में सक्षम था अभी जा रहा है।

यह भी उसी redux टूलिंग के साथ चलता है। यह एक अच्छा लेख है जिसमें कुछ लाभों को शामिल किया गया है।

तो किसी और के लिए जो "सरल Redux" खोजते हुए इस SO पोस्ट पर पहुंचे, मैं इसे सभी लाभों के साथ Redux के सरल विकल्प और बॉयलरप्लेट के 1/4 भाग के रूप में आज़माने की सलाह देता हूं।

मैंने इस उत्तर को पढ़ा है, बॉयलरप्लेट को कम करते हुए , कुछ गिथबाउट उदाहरणों को देखा और यहां तक ​​कि थोड़ी-थोड़ी (टूडू एप्स) को रिड्यूस करने की कोशिश की।

जैसा कि मैं समझता हूं, आधिकारिक redux डॉक्टर प्रेरणा पारंपरिक MVC आर्किटेक्चर की तुलना में पेशेवरों को प्रदान करते हैं। लेकिन यह सवाल का जवाब नहीं देता है:

आपको फेसबुक फ्लक्स पर Redux का उपयोग क्यों करना चाहिए?

क्या यह केवल प्रोग्रामिंग शैलियों का सवाल है: कार्यात्मक बनाम गैर-कार्यात्मक? या सवाल क्षमताओं / देव-औजारों में है जो Redux दृष्टिकोण से अनुसरण करते हैं? शायद स्केलिंग? या परीक्षण?

क्या मैं सही हूं अगर मैं यह कहूं कि रिडक्स उन लोगों के लिए एक प्रवाह है जो कार्यात्मक भाषाओं से आते हैं?

इस प्रश्न का उत्तर देने के लिए आप फ्लक्स बनाम रिडक्स पर कार्यान्वयन रिड्यूस के प्रेरणा बिंदुओं की जटिलता की तुलना कर सकते हैं।

यहाँ आधिकारिक redux डॉक्टर से प्रेरणा बिंदु हैं:

  1. आशावादी अपडेट्स को हैंडल करना ( जैसा कि मैं समझता हूं, यह मुश्किल से 5 वें बिंदु पर निर्भर करता है। क्या फेसबुक फ़्लक्स में इसे लागू करना कठिन है? )
  2. सर्वर पर निर्भरता ( फेसबुक फ्लक्स भी कर सकता है। Redux की तुलना में कोई लाभ? )
  3. मार्ग परिवर्तन करने से पहले डेटा प्राप्त करना ( फेसबुक फ़्लक्स में इसे प्राप्त क्यों नहीं किया जा सकता है? इसके क्या लाभ हैं? )
  4. हॉट रीलोड ( यह रिएक्ट हॉट रीलोड के साथ संभव है। हमें Redux की आवश्यकता क्यों है? )
  5. पूर्ववत करें / फिर से करें कार्यक्षमता
  6. कोई अन्य बिंदु? वर्तमान स्थिति की तरह ...

Redux लेखक यहाँ!

Redux फ्लक्स से अलग नहीं है । कुल मिलाकर इसकी समान वास्तुकला है, लेकिन Redux कार्यात्मक संरचना का उपयोग करके कुछ जटिलता कोनों को काटने में सक्षम है जहां फ्लक्स कॉलबैक पंजीकरण का उपयोग करता है।

Redux में कोई बुनियादी अंतर नहीं है, लेकिन मुझे लगता है कि यह कुछ अमूर्तताओं को आसान बनाता है, या कम से कम इसे लागू करना संभव है, जो फ्लक्स में लागू करना कठिन या असंभव होगा।

Reducer संरचना

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

दूसरी ओर, Redux पृष्ठ पर अंक लगाना रचना के लिए प्राकृतिक धन्यवाद है। यह सभी तरह से नीचे की ओर reducers है, इसलिए आप एक reducer कारखाना लिख सकते हैं जो पृष्ठ पर अंक लगाना उत्पन्न करता है और फिर अपने reducer के पेड़ में इसका उपयोग करता है । यह इतना आसान क्यों है, इसकी कुंजी यह है कि फ्लक्स में, स्टोर सपाट होते हैं, लेकिन Redux में, रिड्यूसर को कार्यात्मक रचना के माध्यम से नेस्ट किया जा सकता है, ठीक उसी तरह जैसे रिएक्ट घटकों को नेस्टेड किया जा सकता है।

यह पैटर्न नो-यूजर-कोड undo/redo जैसी अद्भुत विशेषताओं को भी सक्षम बनाता है। क्या आप कोड के दो लाइन होने पर एक फ्लक्स ऐप में Undo / Redo को प्लग करने की कल्पना कर सकते हैं? मुश्किल से। Redux के साथ, यह है- redain, reducer संरचना पैटर्न के लिए धन्यवाद। मुझे इस बारे में कुछ भी नया करने की आवश्यकता नहीं है - यह पैटर्न का बीड़ा उठाया है और एल्म आर्किटेक्चर में विस्तार से वर्णन किया है जो स्वयं फ्लक्स से प्रभावित था।

सर्वर रेंडरिंग

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

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

अभी भी निम्नलिखित समस्याएं हैं जिन्हें आपको फ्लक्स में हल करने की आवश्यकता है (या तो स्वयं या अपने पसंदीदा फ्लक्स लाइब्रेरी जैसे Flummox या Alt ):

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

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

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

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

डेवलपर का अनुभव

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

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

जब Redux को reducer कोड को फिर से लोड करने की आवश्यकता होती है, तो वह replaceReducer() कॉल replaceReducer() , और ऐप नए कोड के साथ चलता है। फ्लक्स में, डेटा और फ़ंक्शंस फ़्लक्स स्टोर्स में उलझे हुए हैं, इसलिए आप "केवल फ़ंक्शन को प्रतिस्थापित नहीं कर सकते"। इसके अलावा, आपको किसी तरह डिस्पैचर के साथ नए संस्करणों को फिर से पंजीकृत करना होगा- कुछ Redux के पास भी नहीं है।

पारिस्थितिकी तंत्र

Redux में एक समृद्ध और तेजी से बढ़ता पारिस्थितिकी तंत्र है । ऐसा इसलिए है क्योंकि यह middleware जैसे कुछ विस्तार बिंदु प्रदान करता middleware । इसका उपयोग logging , Promises , Observables लिए समर्थन, routing , अपरिवर्तनीयता देव जाँच , persistence , आदि जैसे मामलों को ध्यान में रखकर किया गया था। ये सभी उपयोगी नहीं होंगे, लेकिन ऐसे उपकरणों का एक सेट तक पहुंचना अच्छा है जिन्हें आसानी से एक साथ काम करने के लिए जोड़ा जा सकता है।

सादगी

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

इसे सरल रखना महत्वपूर्ण है क्योंकि उच्च स्तर के अमूर्त को लागू करते समय यह आपको सन्न रखता है।

अधिकांश फ्लक्स लाइब्रेरी के विपरीत, Redux API की सतह छोटी है। यदि आप डेवलपर की चेतावनियों, टिप्पणियों और पवित्रता की जाँच को हटा देते हैं, तो यह 99 पंक्तियाँ हैं । डीबग करने के लिए कोई ट्रिकी async कोड नहीं है।

आप वास्तव में इसे पढ़ सकते हैं और सभी Redux को समझ सकते हैं।

फ्लक्स की तुलना में Redux का उपयोग करने के डाउनसाइड पर मेरा उत्तर भी देखें।


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

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

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


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

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

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

हमने तय किया है कि आगे बढ़ते हुए हम Redux जा रहे हैं और मेरा सुझाव है कि आप भी ऐसा ही करें;


यहाँ फ्लक्स पर Redux की सरल व्याख्या दी गई है। Redux में डिस्पैचर नहीं है। यह reducers नामक शुद्ध कार्यों पर निर्भर करता है। इसे डिस्पैचर की जरूरत नहीं है। प्रत्येक क्रिया एकल स्टोर को अपडेट करने के लिए एक या अधिक reducers द्वारा नियंत्रित की जाती है। चूंकि डेटा अपरिवर्तनीय है, इसलिए reducers एक नया अपडेटेड स्टेट लौटाते हैं जो स्टोर को अपडेट करता है

अधिक जानकारी के लिए फ्लक्स बनाम रेडक्स


Quora में, कोई कहता है :

सबसे पहले, फ्लक्स के बिना रिएक्ट के साथ एप्लिकेशन लिखना पूरी तरह से संभव है।

इसके अलावा यह दृश्य आरेख, जिसे मैंने दोनों के त्वरित दृश्य को दिखाने के लिए बनाया है, संभवतः उन लोगों के लिए एक त्वरित उत्तर है जो पूरे उत्तर को नहीं पढ़ना चाहते हैं:

लेकिन अगर आप अभी भी अधिक जानने में रुचि रखते हैं, तो पढ़ें।

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

शायद आपको लगेगा कि Redux आपके ऐप के लिए है और शायद आपको पता चलेगा, कि Redux एक ऐसी समस्या को हल करने की कोशिश कर रहा है जिसका आप वास्तव में अनुभव नहीं कर रहे हैं।

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

Redux डॉक्स से :

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

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

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

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

फ़्लक्स, CQRS और इवेंट सोर्सिंग के नक्शेकदम पर चलते हुए, Redux स्टेट्स म्यूटेशन का अनुमान लगाने का प्रयास करता है कि कैसे और कब अपडेट हो सकते हैं। ये प्रतिबंध Redux के तीन सिद्धांतों में परिलक्षित होते हैं।

Redux डॉक्स से भी:

मूल अवधारणा
Redux अपने आप में बहुत सरल है।

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

{
  todos: [{
    text: 'Eat food',
    completed: true
  }, {
    text: 'Exercise',
    completed: false
  }],
  visibilityFilter: 'SHOW_COMPLETED'
}

यह ऑब्जेक्ट एक "मॉडल" की तरह है सिवाय इसके कि कोई सेटर नहीं है। ऐसा इसलिए है ताकि कोड के अलग-अलग हिस्से राज्य में मनमाने ढंग से बदलाव न कर सकें, जिससे हार्ड-टू-रिप्रेजेंट बग्स हो सकते हैं।

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

{ type: 'ADD_TODO', text: 'Go to swimming pool' }
{ type: 'TOGGLE_TODO', index: 1 }
{ type: 'SET_VISIBILITY_FILTER', filter: 'SHOW_ALL' }

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

function visibilityFilter(state = 'SHOW_ALL', action) {
  if (action.type === 'SET_VISIBILITY_FILTER') {
    return action.filter;
  } else {
    return state;
  }
}

function todos(state = [], action) {
  switch (action.type) {
  case 'ADD_TODO':
    return state.concat([{ text: action.text, completed: false }]);
  case 'TOGGLE_TODO':
    return state.map((todo, index) =>
      action.index === index ?
        { text: todo.text, completed: !todo.completed } :
        todo
   )
  default:
    return state;
  }
}

और हम एक और reducer लिखते हैं जो हमारे ऐप की संपूर्ण स्थिति को संबंधित राज्य कुंजी के लिए उन दो reducers को कॉल करके प्रबंधित करता है:

function todoApp(state = {}, action) {
  return {
    todos: todos(state.todos, action),
    visibilityFilter: visibilityFilter(state.visibilityFilter, action)
  };
}

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





redux