"कार्रवाई में प्रतिक्रिया" पुस्तक

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

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

अंश। अध्याय 11. Redux और प्रतिक्रिया को एकीकृत करना

• Reducers Redux के लिए यह निर्धारित करने का एक तरीका है कि राज्य को कैसे बदलना चाहिए।
• रिएक्ट के साथ Redux का उपयोग करना।
• Redux ऐप आर्किटेक्चर का उपयोग करने के लिए ट्रांसफॉर्म लेटर्स सोशल।
• एप्लीकेशन में लाइक और कमेंट जोड़ना।

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

स्रोत कोड प्राप्त करना

पहले की तरह, आप इस अध्याय से उदाहरणों के लिए स्रोत कोड github.com/react-in-action/letters-social पर GitHub रिपॉजिटरी में जाकर प्राप्त कर सकते हैं। यदि आप स्क्रैच से अपने यहां काम शुरू करने की योजना बनाते हैं, तो अध्याय 7 और 8 से उदाहरणों का स्रोत कोड लें (यदि आपने उनका अध्ययन किया और स्वयं उदाहरण पूरा किया है) या इस अध्याय (अध्याय-10-11) से संबंधित शाखा का संदर्भ लें।

याद रखें कि प्रत्येक शाखा में अध्याय का अंतिम कोड होता है (उदाहरण के लिए, अध्याय-10-11 में अध्याय 10 और 11 के अंत में प्राप्त कोड शामिल है)। आप वर्तमान अध्याय से नमूना कोड प्राप्त करने के लिए कमांड-लाइन शेल में अपनी पसंद के निम्नलिखित कमांड को चला सकते हैं। यदि कोई रिपॉजिटरी नहीं है, तो कमांड चलाएँ:

git clone git@github.com:react-in-action/letters-social.git 

यदि आपने पहले ही रिपॉजिटरी को क्लोन कर लिया है, तो निम्नलिखित हैं:

 git checkout chapter-10-11 

शायद आप दूसरे अध्याय से यहां चले गए हैं, इसलिए यह देखने के लायक है कि क्या आपके पास कमांड का उपयोग करके सभी आवश्यक निर्भरताएं स्थापित हैं:

 npm install 

11.1। गियरबॉक्स निर्धारित करते हैं कि राज्य को कैसे बदलना चाहिए

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

लेकिन गियरबॉक्स क्या हैं? यदि आपने अभी भी Redux की सादगी का आनंद लिया है, तो आप निराश नहीं होंगे: ये केवल सरल कार्य हैं जिनका एक उद्देश्य है। गियरबॉक्स शुद्ध कार्य हैं जो पिछली स्थिति और कार्रवाई को तर्क के रूप में लेते हैं और अगले राज्य को वापस करते हैं। Redux दस्तावेज़ीकरण के अनुसार, उन्हें reducers कहा जाता है क्योंकि उनकी विधि हस्ताक्षर Array.prototype.reduce (उदाहरण के लिए, [1,2,3] .reduce ((a, b) => a + b, 0) को पास किए गए डेटा की तरह दिखता है।

गियरबॉक्स को शुद्ध कार्य होना चाहिए, जिसका अर्थ है कि, इनपुट को देखते हुए, वे हर बार उसी अनुरूप आउटपुट का उत्पादन करेंगे। यह क्रियाओं या मिडलवेयर के साथ विरोधाभास है जहां साइड इफेक्ट उत्पन्न होते हैं और एपीआई कॉल अक्सर होते हैं। कुछ भी अतुल्यकालिक या अशुद्ध (जैसे कि Date.now या Math.random ()) को रिड्यूसर में करना एक विरोधी प्रतिमान है जो अनुप्रयोग के प्रदर्शन या विश्वसनीयता को नीचा दिखा सकता है। Redux डॉक्स में यह क्लॉज़ होता है: “एक ही तर्क प्राप्त करने के बाद, उसे अगले राज्य की गणना करनी होगी और उसे वापस करना होगा। कोई आश्चर्य नहीं। कोई साइड इफेक्ट नहीं। कोई एपीआई कॉल नहीं। कोई बदलाव नहीं। बस एक गणना। ” इस पर अधिक के लिए redux.js.org/basics/reducers देखें।

11.1.1। राज्य का रूप और प्रारंभिक अवस्था

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

आप एक प्रारंभिक राज्य फ़ाइल बनाएंगे जो राज्य के आकार और संरचना को निर्धारित करने में मदद करती है। कॉन्स्टेंट फ़ोल्डर में, initialState.js नामक एक फाइल बनाएं।


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

11.1.2। आने वाले कार्यों का जवाब देने के लिए गियरबॉक्स सेट करना

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

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

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


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


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


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

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



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

Redux में प्रवासन: क्या यह आवश्यक है?

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

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

»पुस्तक की अधिक जानकारी प्रकाशक की वेबसाइट पर पाई जा सकती है
» सामग्री
» अंश

फेरीवालों के लिए कूपन पर 20% की छूट - प्रतिक्रिया