Redux एप्लिकेशन के संचालन पर चर्चा

पिछले पाठों में, हमने Redux एप्लिकेशन के काम करने के लिए आवश्यक सभी घटकों को लागू किया। आइए निष्कर्ष निकालें और संक्षेप में उत्पादों के साथ हमारे एप्लिकेशन के काम के मुख्य चरणों से गुजरें।

पहले लॉन्च पर, हमारा एप्लिकेशन useSelector का उपयोग करके दो उत्पादों की सूची store से प्राप्त करता है और उन्हें स्क्रीन पर प्रदर्शित करता है। स्क्रीन पर एक फॉर्म भी दिखाई देता है जहां हम एक नए उत्पाद का डेटा दर्ज कर सकते हैं। जब उपयोगकर्ता सहेजें बटन दबाता है, तो बटन हैंडलर productAdded एक्शन डिस्पैच करता है, जिसमें नए उत्पाद का डेटा होता है जो उपयोगकर्ता ने फॉर्म में दर्ज किया था। हमने उत्पादों के स्लाइस के लिए जिस रिड्यूसर फंक्शन को लिखा था, वह इस action को प्राप्त करता है और उत्पादों की सरणी में एक नए उत्पाद वाली ऑब्जेक्ट जोड़ता है। Store कम्पोनेंट्स को बताता है कि संग्रहीत state डेटा बदल दिया गया था। हमारा ProductsList कम्पोनेंट संशोधित सरणी को पढ़ता है, रेंडरिंग को ट्रिगर करता है, जिसके परिणामस्वरूप हम उत्पादों की सूची में जोड़े गए उत्पाद को देखते हैं।

अब ब्राउज़र में Redux DevTools खोलें और एप्लिकेशन में एक और उत्पाद जोड़ें, और फिर Log monitor टैब देखें, यहां हम देख सकते हैं कि एप्लिकेशन लॉन्च होने पर हमारा state क्या था, और फिर, सहेजें बटन दबाने के बाद, action कैसे दिखाई दिया। हम इसकी payload प्रॉपर्टी और ग्लोबल स्टेट में परिवर्तन देख सकते हैं।

अगले अध्याय में, हम अपने Redux एप्लिकेशन में डेटा के साथ और अधिक मौलिक रूप से काम करेंगे।