Redux में अतिरिक्त रिड्यूसर्स

आइए हमारे उत्पादों वाले एप्लिकेशन को खोलें, और इसमें productsSlice.js फ़ाइल खोलें। शायद आपने गौर किया होगा कि हमने thunk fetchProducts को एक अलग फ़ंक्शन के रूप में बनाया था? हमने ऐसा इसलिए किया, क्योंकि createSlice thunks को परिभाषित करने का समर्थन नहीं करता है। तो फिर हम products स्लाइस के रिड्यूसर को उन एक्शनों पर प्रतिक्रिया करने के लिए कैसे मजबूर करें जो products के बाहर परिभाषित हैं? आखिरकार, हमें ठीक उन एक्शनों को प्रोसेस करने की आवश्यकता है जो thunk fetchProducts द्वारा भेजे जाते हैं।

ऐसे मामलों के लिए createSlice में extraReducers नामक एक प्रॉपर्टी है, जो अतिरिक्त रिड्यूसर्स जोड़ने की अनुमति देती है, जो बदले में उन एक्शनों को प्रोसेस करेंगे जो इस स्लाइस में परिभाषित नहीं हैं।

आइए अब createSlice फ़ंक्शन के बॉडी में सभी रिड्यूसर्स वाली reducers प्रॉपर्टी के बाद एक और मेथड extraReducers जोड़ें:

extraReducers() {},

हमें इस मेथड को एक ऑब्जेक्ट builder पास करना होगा, जिसमें ऐसे मेथड्स हैं, जिनकी मदद से अतिरिक्त रिड्यूसर्स जोड़े जा सकते हैं:

extraReducers(builder) {},

हम builder के एक मेथड का उपयोग करेंगे - addCase, जो पहले पैरामीटर के रूप में action creator लेता है, और दूसरे के रूप में reducer लेता है। fetchProducts द्वारा रिक्वेस्ट भेजे जाने पर जो एक्शन भेजा जाएगा, उनमें से एक है fetchProducts.pending, जो हमें बताता है कि रिक्वेस्ट भेज दी गई है। आइए इस मामले में स्टेटस को 'in progress' में बदल दें (इससे पहले यह 'idle' था):

extraReducers(builder) {
	builder.addCase(fetchProducts.pending, (state) => {
		state.status = 'in progress'
	})
},

अब उस एक्शन को प्रोसेस करते हैं, जो सफल रिक्वेस्ट के मामले में भेजा जाएगा। यहां हम स्टेट में स्टेटस को केवल 'success' में ही नहीं बदलेंगे, बल्कि एक्शन के payload से प्रोडक्ट्स को products स्लाइस में भी ले आएंगे। सभी प्रोडक्ट्स को इकट्ठा करने के लिए हमें concat मेथड की आवश्यकता होगी:

extraReducers(builder) {
	builder
		.addCase(fetchProducts.pending, (state) => {
			state.status = 'in progress'
		})
		.addCase(fetchProducts.fulfilled, (state, action) => {
			state.status = 'success'
			state.products = state.products.concat(action.payload)
		})
},

अनुरोध विफल होने की स्थिति में हम स्टेटस को 'fail' में बदल देंगे और स्टेट में त्रुटि संदेश लिख देंगे:

.addCase(fetchProducts.rejected, (state, action) => {
	state.status = 'fail'
	state.error = action.error.message
})

अगर हम अभी अपना एप्लिकेशन चलाएं और मेन्यू में 'Products' पर क्लिक करें, तो कुछ सेकंड बाद (सर्वर पर हमारे द्वारा लगाए गए विलंब के बारे में याद है?) हम उत्पादों की सूची देखेंगे।

ठीक इसी तरह हम Redux DevTools में भी बदलाव देखेंगे। अब हमारे उत्पाद स्टेट में भी दिखाई देंगे ('State' टैब देखें), अगर आपने एक्शन products/fetchProducts/fulfilled पर क्लिक किया है। वहां नया स्टेटस 'success' भी दिखाई देगा। अब एक्शन products/fetchProducts/pending पर क्लिक करें और देखें कि 'State' टैब अब किस तरह अलग है।

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

अपना छात्रों वाला एप्लिकेशन खोलें। इसमें studentsSlice.js फ़ाइल खोलें। createSlice फ़ंक्शन के बॉडी में reducers प्रॉपर्टी के बाद extraReducers प्रॉपर्टी जोड़ें। extraReducers मेथड को builder पास करें।

builder.addCase मेथड की मदद से pending, fulfilled और rejected एक्शनों के लिए प्रोसेसिंग जोड़ें, जो fetchStudents द्वारा डेटा का अनुरोध करते समय भेजे जाते हैं, जैसा कि पाठ में दिखाया गया है।