Redux में रिड्यूसर

पिछले पाठ में हमने फ़ंक्शन createSlice की मदद से उत्पादों के लिए एक स्लाइस products और एक रिड्यूसर बनाया था जो स्टोर में संग्रहीत इस स्लाइस को अपडेट करेगा। एक बार फिर से याद दिला दूं, कि Redux में स्टेट डेटा रिड्यूसरों की मदद से बदला जाता है।

यह याद रखना जरूरी है कि रिड्यूसरों पर कई प्रतिबंध लगे होते हैं। रिड्यूसर वर्तमान स्टेट और action ऑब्जेक्ट के प्राप्त मूल्यों के आधार पर ही स्टेट को अपडेट करता है, और फिर तय करता है कि स्टेट को कैसे बदलना है और उसका नया मूल्य लौटाता है।

हम जानते हैं कि डिफ़ॉल्ट रूप से JavaScript में ऑब्जेक्ट और ऐरे म्यूटेबल (परिवर्तनशील) होते हैं। हम यह भी जानते हैं कि state को सीधे नहीं बदलना चाहिए, ऐसे में केवल कॉपी के साथ काम करना चाहिए। रिड्यूसर को भी इस नियम का पालन करना चाहिए। लेकिन ऐसे लॉजिक को मैन्युअल रूप से लिखना काफी थकाऊ और जटिल हो सकता है, और यहाँ createSlice फ़ंक्शन मदद के लिए आता है, जो Immer लाइब्रेरी का उपयोग करता है, जो आपके 'म्यूटेबल' कोड को 'नॉन-म्यूटेबल' में बदल देती है। इस तरह, केवल createSlice या createReducer फ़ंक्शन का उपयोग करते समय ही गुनाह करना और जीवन आसान बनाना संभव है।

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

हमारे एप्लिकेशन में एक store है जिसे हमने पिछले पाठों में बनाया था, लेकिन अभी तक इसमें कुछ भी नहीं है। आइए हमारी store.js फ़ाइल खोलें और इसमें थोड़ा कोड जोड़ें। शुरुआत के लिए इसमें उत्पादों के लिए reducer फ़ंक्शन इम्पोर्ट करें:

app/store.jsimport productsReducer from '../parts/products/productsSlice'

अब रिड्यूसर के रूप में हम इम्पोर्ट किए गए फ़ंक्शन productsReducer को निर्दिष्ट कर सकते हैं:

app/store.jsexport default configureStore({
  reducer: {
    products: productsReducer
  }
})

उपरोक्त लाइन से हम अपने store को बता रहे हैं कि अब जब भी action उत्पन्न होगा, स्लाइस state.products के लिए सारा डेटा productsReducer रिड्यूसर द्वारा अपडेट किया जाएगा।

अब आप एप्लिकेशन लॉन्च कर सकते हैं (ध्यान दें, कि कंसोल से अमान्य रिड्यूसर की चेतावनी गायब हो गई है!), ब्राउज़र में Redux DevTools खोलें और इसके टैब में घूमें। उदाहरण के लिए, Inspector टैब में State टैब पर क्लिक करके हम अपने दो उत्पाद ऑब्जेक्ट्स को देख सकते हैं, जो एप्लिकेशन के पहली बार लॉन्च होने पर प्रारंभिक स्टेट मान के रूप में दिखाई दिए। Log monitor टैब पर हम देख सकते हैं कि ग्लोबल स्टेट में कौन से स्लाइस हैं - यह products स्लाइस है, जिसमें दो ऑब्जेक्ट शामिल हैं। Chart टैब पर भी एक नजर डालें।