Redux के साथ काम करने की कठिनाइयों और उनके समाधान

हमारे बीच रेड

यह सबसे लोकप्रिय स्टेट-मैनेजर `में से एक है ।

यह उपयोग करना आसान है, पारदर्शी और पूर्वानुमान योग्य है। इसके साथ, आप डेटा के भंडारण और संशोधन को व्यवस्थित कर सकते हैं। और अगर हम मानते हैं कि कार्रवाई `s और reducer` s redux का हिस्सा है` a, तो हम अतिशयोक्ति के बिना कह सकते हैं कि वह हमारे अनुप्रयोगों के विषय क्षेत्र (उर्फ व्यावसायिक तर्क) के सभी तर्क का धारक है।

क्या सब कुछ इतना रसपूर्ण है?

इसकी सभी सादगी और पारदर्शिता के लिए, Redux का उपयोग करने में कई कमियां हैं ...

राज्य में डेटा ' redux ' और एक साधारण जावास्क्रिप्ट ऑब्जेक्ट में झूठ और सामान्य तरीके से प्राप्त किया जा सकता है, आपको बस रास्ता जानने की जरूरत है।

लेकिन हम इस डेटा को कैसे व्यवस्थित करते हैं? केवल 2 विकल्प हैं: एक फ्लैट सूची और एक पदानुक्रमित मॉडल ।

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



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




एक और चुनौती परीक्षण है। हां, रिड्यूक्स परीक्षण के लिए प्रलेखन में एक अलग लेख है, लेकिन अब यह reducer और एक्शन-कूटर जैसे व्यक्तिगत कलाकृतियों के परीक्षण के बारे में नहीं है।

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

इस सूची में चयनकर्ता को जोड़ें, जिसके परिणाम विशेष रूप से reducer के कार्य पर निर्भर करते हैं ...

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

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

सस्ते में कोड कैसे करें?

समाधान के लिए खोजें

Redux के लाभों को संरक्षित करने और वर्णित नुकसान से छुटकारा पाने का तरीका जानने के लिए, आपको यह समझने की आवश्यकता है कि यह डेटा जीवन चक्र में क्या निर्भर करता है:

• कार्रवाई की रिपोर्ट की घटनाओं, कस्टम और अधिक
• Reducer`s क्रिया के लिए प्रतिक्रिया करता है और डेटा स्थिति को परिवर्तित या परिवर्तित नहीं करता है
• डेटा परिवर्तन अपने आप में एक घटना है और अन्य डेटा को बदलने का कारण हो सकता है।

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

एक ब्लैक बॉक्स में पूरे रेडक्स चिड़ियाघर को मिलाएं

लेकिन क्या होगा अगर हम एक मॉड्यूल में एक्शन , रेड्यूसर और सेलेक्टर को लपेटते हैं और यह सिखाते हैं कि यह उसके डेटा के स्थान के लिए विशिष्ट पथ पर निर्भर नहीं है?

क्या होगा यदि सभी उपयोगकर्ता क्रियाएं, उदाहरण के लिए, उदाहरण विधि को कॉल करके प्रतिबद्ध हैं: user.addFriend (friendId) ? और डेटा गेट्टर के माध्यम से प्राप्त किया जाता है: user.getFriendsCount () ?

क्या होगा यदि हम सरल आयात के साथ उपयोगकर्ता की सभी कार्यक्षमता को आयात कर सकते हैं ?

 const userModule from 'node_modules/user-module'; 

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

प्रत्येक मॉड्यूल में एक नियंत्रक , एक रिड्यूसर और एक एक्शन होता है और इसमें निम्नलिखित विशेषताएं होती हैं:

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

नतीजतन, हमें एक ब्लैक बॉक्स मिलता है जो अपने डेटा को स्वयं प्रबंधित कर सकता है और बाहरी कोड के साथ संचार करने के लिए हैंडल करता है।

एक ही समय में, यह एक ही रीडक्स है , इसकी यूनिडायरेक्शनल डेटा स्ट्रीम, पारदर्शिता और पूर्वानुमान के साथ।

और चूंकि ये सभी एक ही redux और सभी एक ही reducers हैं , इसलिए आप उनसे कोई भी संरचना बना सकते हैं, जिसके लिए एप्लिकेशन डोमेन लॉजिक की आवश्यकता होती है।