Redux में action ऑब्जेक्ट के लिए डेटा तैयार करना

हाल ही में हमने आपके साथ बात की थी कि फ़ंक्शन createSlice एक ही आर्ग्युमेंट की अपेक्षा करता है जब action.payload बनाया जाता है। एक तरफ तो यह इसके उपयोग को आसान बनाता है, दूसरी तरफ action ऑब्जेक्ट की सामग्री तैयार करने के लिए अतिरिक्त कदमों की आवश्यकता हो सकती है।

आइए हमारे उत्पादों वाले एप्लिकेशन को खोलें, और उसमें NewProductForm.jsx फ़ाइल खोलें। निम्नलिखित कोड लाइन पर ध्यान दें:

dispatch(productAdded({
	id: nanoid(), name, desc, price, amount
}))

यहाँ हम payload ऑब्जेक्ट को सीधे React कंपोनेंट में ही बना रहे हैं और इसे एक्शन productAdded में पास कर रहे हैं। लेकिन क्या होगा अगर हमें ऐसा ही एक्शन कई कंपोनेंट्स से भेजना पड़े या फिर उसे बनाने की लॉजिक जटिल हो जाए? सिद्धांत रूप में, हमारे कंपोनेंट को इस बात से कोई फर्क नहीं पड़ना चाहिए कि इस एक्शन के लिए payload में ऑब्जेक्ट कैसा दिखता है। साथ ही, कोड की लगातार नकल हमें स्वीकार्य नहीं है।

ये समस्याएं फिर से हल करने में हमारी मदद कर सकता है हमारा प्रसिद्ध createSlice, क्योंकि रिड्यूसर लिखते समय यह हमें कॉलबैक फ़ंक्शन prepare का उपयोग करने की अनुमति देता है, जिसमें विभिन्न प्रकार की लॉजिक लिखी जा सकती है, रैंडम नंबर जेनरेट किए जा सकते हैं आदि। ऐसे में रिड्यूसर फील्ड का मान निम्नलिखित ऑब्जेक्ट के रूप में दर्शाया जा सकता है:

{reducer, prepare}

आइए हमारी productsSlice.js फ़ाइल खोलें और रिड्यूसर productAdded के लिए कोड बदलें। अब कोड का यह हिस्सा:

productAdded(state, action) {
	state.push(action.payload)
},

हम इसे निम्नलिखित में बदल देंगे, जिसमें फ़ंक्शन reducer store में स्टेट को अपडेट करने का काम करेगा, और prepare - payload ऑब्जेक्ट वापस करेगा जनरेट किए गए id और हमारे अन्य डेटा के साथ:

productAdded: {
	reducer(state, action) {
		state.push(action.payload)
	},
	prepare(name, desc, price, amount) {
		return {
			payload: {
				id: nanoid(),
				name,
				desc,
				price,
				amount,
			},
		}
	},
},

चूंकि अब हम id जेनरेट करेंगे यहाँ, कंपोनेंट में नहीं, आइए nanoid को इम्पोर्ट में जोड़ें:

import { createSlice, nanoid } from '@reduxjs/toolkit'

अंत में, बदलाव करते हैं NewProductForm.jsx में। इसके बजाय लाइन का:

dispatch(productAdded({
	id: nanoid(), name, desc, price, amount
}))

हमारे पास ऐसी लाइन होगी, जिसमें हम बस अल्पविराम से अपने आवश्यक डेटा पास करेंगे (इस फ़ाइल में nanoid को इम्पोर्ट से हटाना न भूलें):

dispatch(productAdded(name, desc, price, amount))

आइए एप्लिकेशन चलाएँ, फिर एक नया उत्पाद बनाएँ और सुनिश्चित करें कि हमने कुछ भी खराब नहीं किया है।

अपने छात्रों वाला एप्लिकेशन खोलें। StudentsSlice.js फ़ाइल में अपने रिड्यूसर studentAdded को इस तरह से फिर से लिखें, कि वह {reducer, prepare} ऑब्जेक्ट के रूप में हो, जैसा पाठ में दिखाया गया है।

NewStudentForm.jsx फ़ाइल में संबंधित बदलाव करें, जैसा पाठ में दिखाया गया है। एप्लिकेशन चलाएँ और सुनिश्चित करें, कि सब कुछ पहले की तरह काम कर रहा है।