रिड्यूसर और एक्शन रेडक्स में

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

सबसे पहले हमारे उत्पाद एप्लिकेशन में हम फाइल productsSlice.jsx खोलेंगे और createSlice के लिए reducer गुण में फंक्शन productAdded लिखेंगे, जो स्टोर में उत्पाद जोड़ने का काम करेगी, जो उसे दिए गए वर्तमान स्टेट और एक्शन पर आधारित होगी। यहां यह नोट करना महत्वपूर्ण है कि हमें पूरा state नहीं दिया जाता, बल्कि केवल वह हिस्सा दिया जाता है जो उत्पादों के लिए जिम्मेदार है (स्लाइस products केवल इसी को जानता है)। नए उत्पाद वाली ऑब्जेक्ट action ऑब्जेक्ट के payload गुण में होगी, जो फॉर्म में सेव बटन दबाने पर हैंडलर द्वारा जेनरेट की जाएगी। परिणामस्वरूप रिड्यूसर productAdded createSlice में कोड में इस तरह दिखेगा:

const productsSlice = createSlice({
	name: 'products',
	initialState,
	reducers: {
		productAdded(state, action) {
			state.push(action.payload)
		},
	},
})

और एक्शन के बारे में क्या? ट्यूटोरियल की शुरुआत में ही हमने इस बात का उल्लेख किया था कि action एक प्रकार की घटना होती है, जो ऑब्जेक्ट के रूप में प्रस्तुत होती है, जो एप्लिकेशन में घटित हुई चीज का वर्णन करती है। हमने इस बारे में भी बात की थी कि action creator फंक्शन का उपयोग किया जा सकता है, जो हमारे लिए ऐसा ऑब्जेक्ट बनाएगी, उदाहरण के लिए इस तरह:

const addProduct = newProduct => {
	return {
		type: 'products/productAdded',
		payload: newProduct
	}
}

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

export const { productAdded } = productsSlice.actions
export default productsSlice.reducer

अपना छात्रों वाला एप्लिकेशन खोलें, और फिर studentsSlice.jsx फाइल खोलें, पाठ में दिखाए अनुसार createSlice के लिए reducer फील्ड का मान लिखें।

studentsSlice.jsx फाइल के अंत में प्राप्त action creator फंक्शन का एक्सपोर्ट जोड़ें।