Redux लेखक यहाँ!
Redux फ्लक्स से अलग नहीं है । कुल मिलाकर इसकी समान वास्तुकला है, लेकिन Redux कार्यात्मक संरचना का उपयोग करके कुछ जटिलता कोनों को काटने में सक्षम है जहां फ्लक्स कॉलबैक पंजीकरण का उपयोग करता है।
Redux में कोई मूलभूत अंतर नहीं है, लेकिन मुझे लगता है कि यह कुछ अमूर्तताओं को आसान बनाता है, या कम से कम इसे लागू करना संभव है, जो फ्लक्स में लागू करना कठिन या असंभव होगा।
Reducer संरचना
उदाहरण के लिए, अंकुरण लीजिए। मेरा फ्लक्स + रिएक्ट राउटर उदाहरण पृष्ठांकन को संभालता है, लेकिन इसके लिए कोड भयानक है। एक कारण यह भयानक है कि फ्लक्स दुकानों में कार्यक्षमता का पुन: उपयोग करने के लिए अप्राकृतिक बनाता है। यदि दो दुकानों को अलग-अलग क्रियाओं के जवाब में पेजिनेशन को संभालने की आवश्यकता होती है, तो उन्हें या तो एक सामान्य आधार स्टोर से प्राप्त करने की आवश्यकता होती है (बुरा! आप अपने आप को एक विशेष डिजाइन में लॉक कर रहे हैं जब आप विरासत का उपयोग करते हैं), या बाहरी रूप से परिभाषित फ़ंक्शन को कॉल करें। ईवेंट हैंडलर, जिसे किसी तरह फ्लक्स स्टोर के निजी राज्य में काम करना होगा। पूरी बात गड़बड़ है (हालांकि संभव के दायरे में निश्चित रूप से)।
दूसरी ओर, Redux पृष्ठ पर अंक लगाना रचना के लिए प्राकृतिक धन्यवाद है। यह सभी तरह से नीचे की ओर reducers है, इसलिए आप एक reducer फैक्ट्री लिख सकते हैं, जो pagination reducers उत्पन्न करता है और फिर इसे अपने reducer के पेड़ में उपयोग करता है । यह इतना आसान क्यों है, इसकी कुंजी यह है कि फ्लक्स में, स्टोर सपाट होते हैं, लेकिन Redux में, रिड्यूसर को कार्यात्मक रचना के माध्यम से घोंसला बनाया जा सकता है, ठीक उसी तरह जैसे रिएक्ट घटकों को नेस्ट किया जा सकता है।
यह पैटर्न नो-यूजर-कोड अनडू / रीडो जैसी अद्भुत विशेषताओं को भी सक्षम बनाता है । क्या आप कोड के दो लाइन होने पर एक फ्लक्स ऐप में Undo / Redo को प्लग करने की कल्पना कर सकते हैं? मुश्किल से। Redux के साथ, यह है- redain, रचनाकार पैटर्न पैटर्न के लिए धन्यवाद। मुझे इस बारे में कुछ नया करने की ज़रूरत नहीं है - यह पैटर्न का बीड़ा उठाया है और एल्म आर्किटेक्चर में विस्तार से वर्णन किया गया है जो स्वयं फ्लक्स से प्रभावित था।
सर्वर रेंडरिंग
लोग फ़्लक्स के साथ सर्वर पर ठीक प्रतिपादन कर रहे हैं, लेकिन यह देखते हुए कि हमारे पास 20 फ़्लक्स लाइब्रेरी हैं, जो सर्वर रेंडरिंग को "आसान" बनाने का प्रयास कर रहे हैं, शायद फ़्लक्स के सर्वर पर कुछ खुरदरे किनारे हैं। सच्चाई यह है कि फेसबुक बहुत सर्वर रेंडरिंग नहीं करता है, इसलिए वे इसके बारे में बहुत चिंतित नहीं हैं, और इसे आसान बनाने के लिए पारिस्थितिकी तंत्र पर भरोसा करते हैं।
पारंपरिक फ्लक्स में, स्टोर एकल हैं। इसका मतलब है कि सर्वर पर अलग-अलग अनुरोधों के लिए डेटा को अलग करना मुश्किल है। असंभव नहीं, लेकिन कठिन है। यही कारण है कि अधिकांश फ्लक्स लाइब्रेरी (और साथ ही नए फ्लक्स यूटिल्स ) अब आपको एकल के बजाय कक्षाओं का उपयोग करने का सुझाव देते हैं, इसलिए आप प्रति अनुरोध स्टोर को तुरंत कर सकते हैं।
अभी भी निम्नलिखित समस्याएं हैं जिन्हें आपको फ्लक्स में हल करने की आवश्यकता है (या तो स्वयं या अपने पसंदीदा फ्लक्स लाइब्रेरी जैसे फ्लूमॉक्स या ऑल्ट की मदद से ):
- यदि स्टोर कक्षाएं हैं, तो मैं अनुरोध के अनुसार डिस्पैचर के साथ उन्हें कैसे बनाऊं और नष्ट कर दूं? मैं स्टोर कब पंजीकृत करूं?
- मैं दुकानों से डेटा को कैसे हाइड करता हूं और बाद में इसे क्लाइंट पर रीहाइड्रेट करता हूं? क्या मुझे इसके लिए विशेष तरीकों को लागू करने की आवश्यकता है?
बेशक फ्लक्स फ्रेमवर्क (वेनिला फ्लक्स नहीं) के पास इन समस्याओं का समाधान है, लेकिन मुझे लगता है कि वे अधूरे हैं। उदाहरण के लिए, फ्लुमॉक्स आपको लागू करने serialize()और deserialize()अपने स्टोर में करने के लिए कहता है । ऑल्ट इस शिलालेख को यह प्रदान करके हल करता है takeSnapshot()कि स्वचालित रूप से आपके राज्य को JSON के पेड़ में क्रमबद्ध करता है।
Redux अभी और आगे बढ़ता है: चूंकि सिर्फ एक स्टोर (कई रिड्यूसर द्वारा प्रबंधित) है, इसलिए आपको (पुनः) हाइड्रेशन को प्रबंधित करने के लिए किसी विशेष एपीआई की आवश्यकता नहीं है। आपको "फ्लश" या "हाइड्रेट" स्टोर करने की आवश्यकता नहीं है - बस एक ही स्टोर है, और आप इसकी वर्तमान स्थिति पढ़ सकते हैं, या एक नए राज्य के साथ एक नया स्टोर बना सकते हैं। प्रत्येक अनुरोध को एक अलग स्टोर उदाहरण मिलता है। Redux के साथ सर्वर रेंडरिंग के बारे में और पढ़ें।
फिर, यह फ्लक्स और रेडक्स दोनों में कुछ संभव है, लेकिन फ्लक्स पुस्तकालयों ने एक टन एपीआई और सम्मेलनों को पेश करके इस समस्या को हल किया है, और रेडक्स को भी इसे हल करने की आवश्यकता नहीं है क्योंकि इसमें वह समस्या नहीं है। वैचारिक सरलता के लिए पहला स्थान धन्यवाद।
डेवलपर का अनुभव
मैंने वास्तव में Redux को एक लोकप्रिय फ़्लक्स लाइब्रेरी बनने का इरादा नहीं दिया था - मैंने इसे लिखा था क्योंकि मैं समय की यात्रा के साथ हॉट रीलोडिंग पर अपने रिएक्टयूरोप बात पर काम कर रहा था । मेरा एक मुख्य उद्देश्य था: कार्रवाई को पार करते हुए मक्खी पर रेड्यूसर कोड को बदलना या यहां तक कि "अतीत को बदलना" संभव है, और राज्य को पुनर्गणित होते हुए देखें।
मैंने एक भी फ्लक्स लाइब्रेरी नहीं देखी है जो ऐसा करने में सक्षम है। रिएक्ट हॉट लोडर आपको ऐसा करने की अनुमति नहीं देता है - वास्तव में यदि आप फ्लक्स स्टोर को संपादित करते हैं तो यह टूट जाता है क्योंकि यह नहीं जानता कि उनके साथ क्या करना है।
जब Redux को reducer कोड को पुनः लोड करने की आवश्यकता होती है, तो यह कॉल करता है replaceReducer(), और ऐप नए कोड के साथ चलता है। फ्लक्स में, डेटा और फ़ंक्शंस फ़्लक्स स्टोर्स में उलझे हुए हैं, इसलिए आप "केवल फ़ंक्शन को प्रतिस्थापित नहीं कर सकते"। इसके अलावा, आपको किसी तरह डिस्पैचर के साथ नए संस्करणों को फिर से पंजीकृत करना होगा- कुछ Redux के पास भी नहीं है।
पारिस्थितिकी तंत्र
Redux में एक समृद्ध और तेजी से बढ़ता पारिस्थितिकी तंत्र है । ऐसा इसलिए है क्योंकि यह मिडलवेयर जैसे कुछ विस्तार बिंदु प्रदान करता है । इसका उपयोग लॉगिंग , प्रोमिस , ऑब्ज़र्वबल्स के लिए समर्थन , रूटिंग , अपरिवर्तनीयता देव जाँच , दृढ़ता , आदि जैसे मामलों को ध्यान में रखकर किया गया था। ये सभी उपयोगी नहीं होंगे, लेकिन ऐसे उपकरणों का एक सेट तक पहुंचना अच्छा है जिन्हें आसानी से एक साथ काम करने के लिए जोड़ा जा सकता है।
सादगी
Redux फ़्लक्स के सभी लाभों (रिकॉर्डिंग और पुनरावृत्ति, यूनिडायरेक्शनल डेटा फ्लो, निर्भर म्यूटेशन) को संरक्षित करता है और डिस्पैचर और स्टोर पंजीकरण शुरू किए बिना नए लाभ (आसान पूर्ववत करना, हॉट रीलोडिंग) जोड़ता है।
इसे सरल रखना महत्वपूर्ण है क्योंकि उच्च स्तर के अमूर्त को लागू करते समय यह आपको सन्न रखता है।
अधिकांश फ्लक्स लाइब्रेरी के विपरीत, Redux API की सतह छोटी है। यदि आप डेवलपर की चेतावनियों, टिप्पणियों और पवित्रता की जाँच को हटा देते हैं, तो यह 99 पंक्तियाँ हैं । डीबग करने के लिए कोई ट्रिकी async कोड नहीं है।
आप वास्तव में इसे पढ़ सकते हैं और सभी Redux को समझ सकते हैं।
फ्लक्स की तुलना में Redux का उपयोग करने के डाउनसाइड पर मेरा उत्तर भी देखें ।
