एडवांस्ड रिएक्टज: रिएक्ट + रेडक्स + सागा के लिए सर्वश्रेष्ठ अभ्यास

कॉफी के लिए सोचा

सबसे पहली बात, रिएक्ट क्या है, इस पर एक त्वरित परिचय। यह एक जावास्क्रिप्ट पुस्तकालय है जिसका उपयोग उपयोगकर्ता इंटरफेस के निर्माण के लिए किया जाता है। इसने सामने आने के बाद से विकास परिदृश्य को बदल दिया है। इसलिए, यदि आप रिएक्ट या Vue.js जैसे लाइब्रेरी के सामने वाले वेब डेवलपर बनना चाहते हैं, तो यह आज के उद्योग में लगभग आवश्यक है। यदि आप अभी रिएक्ट सीखना शुरू कर रहे हैं तो यहाँ एक बढ़िया ट्यूटोरियल है। https://reactjs.org/tutorial/tutorial.html।

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

हालाँकि, मैंने हमेशा एक ऐसे ट्यूटोरियल को खोजने के लिए संघर्ष किया है जो रिएक्ट की सभी उन्नत अवधारणाओं को एक कॉम्पैक्ट ट्यूटोरियल में बाँधता है।

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

चिट-चैट के साथ पर्याप्त। बात करते हैं कोड। इस रेपो से तैयार कोड डाउनलोड करें और README का पालन करें ताकि आप देख सकें और महसूस कर सकें कि हम यहां क्या बनाने जा रहे हैं। https://github.com/jelorivera08/react-starter-pack।

एप का लैंडिंग पेज

ऊपर, आप गणना स्थिति प्रदर्शित और चार बटन देख सकते हैं जो उनके संबंधित कार्यों को ट्रिगर करते हैं। उनके कार्य आत्म-व्याख्यात्मक हैं।

चयनकर्ताओं

काउंटर कंटेनर के अंदर सेलेक्टर्स.जेएस फाइल पर जाएं, जो पहला एडवांस्ड कॉन्सेप्ट हम यहां बना रहे हैं वह है क्रिएट सेलेक्टर। कोड को देखकर, सबसे पहले, कास्ट काउंट वैरिएबल redux स्टेट ट्री के अंदर स्टेट स्टेट का उपयोग करके काउंट स्टेट प्राप्त करता है। (। काउंट))।

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

फिर, परिणामी फ़ंक्शन का उपयोग mapStateToProps के अंदर किया जाएगा, और mapStateToProps के साथ, स्वाभाविक रूप से, कॉन्फ़िगर करने के लिए अगली चीज mapDispatchToProps है।

कार्रवाई बनाएँ

जब भी रिड्यूसर क्रियाओं को भेजना होता है, तो हमें हमेशा इसके प्रकार और संबंधित स्विच केस को रिड्यूसर को घोषित करना पड़ता है कि यह एप्लिकेशन स्थिति को बदलने के लिए बाद में प्रवेश करेगा। Reduxsauce से createActions पैकेज के साथ, हम एक पत्थर से दो पक्षियों को मार सकते हैं। हमें इस पैकेज से पूरी तरह से लाभ उठाने के लिए रिड्यूसर के साथ रिड्यूसर को भी प्रारूपित करना चाहिए।

कम करने

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

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

Redux गाथा

यहाँ हमारे कार्यक्रम का गाथा हिस्सा है। हमारे कार्यों को कॉल करने के तरीके के अलावा सब कुछ समान है। हम उस प्रकार की कार्रवाई का उपयोग करते हैं जो हमने पहले बनाई थी और उन्हें हमारी चौकीदार गाथा के अंदर उपयोग करते हुए अतुल्यकालिक कॉल भेजने के लिए उपयोग किया था जो बाद में हमारे redux राज्य वृक्ष को प्रभावित करेगा।

एप्लिकेशन के बहुत बेहतर async फील के लिए नेटवर्क लेटेंसी को मॉक करने में देरी होती है। ओह, और अंत में, सुनिश्चित करें कि हम प्रदर्शन के बारे में नहीं भूलते हैं।

कोड विभाजन

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

निष्कर्ष के तौर पर,

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

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

यह हमेशा छोटी चीजें है

इसके साथ, मुझे उम्मीद है कि मैंने इस छोटे से लेख के साथ आपकी प्रतिक्रिया को समझने में आपकी मदद की है। चीयर्स!