Redux में एक और स्लाइस जोड़ना

पिछली कक्षाओं में हमने उत्पादों के लिए products स्लाइस पर काफी काम किया। एक वास्तविक Redux एप्लिकेशन में, state में विभिन्न उद्देश्यों के लिए कई स्लाइस हो सकते हैं। इसलिए इस पाठ में हम state में विक्रेताओं के लिए एक और स्लाइस जोड़ेंगे, जो वास्तव में हमारे एप्लिकेशन में उत्पादों को जोड़ेंगे।

आइए हमारा उत्पादों वाला एप्लिकेशन खोलें और पहली चीज़ जो हम करेंगे, वह है parts फ़ोल्डर में एक और फ़ोल्डर sellers बनाना, यहाँ हम विक्रेताओं से संबंधित सारा कोड और कंपोनेंट्स रखेंगे।

अब, उत्पादों के मामले की तरह, आइए विक्रेताओं के लिए एक स्लाइस बनाएं। सबसे पहले sellers फ़ोल्डर में sellersSlice.js फ़ाइल बनाएं और इसमें createSlice इम्पोर्ट करें:

import { createSlice } from '@reduxjs/toolkit'

हम मानक चरण करना जारी रखते हैं। स्लाइस के प्रारंभिक मान के रूप में चार विक्रेता बनाएं। सरलता के लिए उनके दो फ़ील्ड होंगे - id और name:

const initialState = [
	{ id: '0', name: 'Super Power' },
	{ id: '1', name: 'Miracle Life' },
	{ id: '2', name: 'Dolls&Toys' },
	{ id: '3', name: 'Granny' },
]

नीचे createSlice की सहायता से स्लाइस sellers बनाएं, इसे प्रारंभिक मान पास करें। चूंकि हम न तो विक्रेताओं को जोड़ेंगे, न ही उनके डेटा को अपडेट करेंगे, तो आइए reducers वाला फ़ील्ड अभी के लिए खाली रहने दें:

const sellersSlice = createSlice({
	name: 'sellers',
	initialState,
	reducers: {},
})

फ़ाइल के अंत में प्राप्त reducer के एक्सपोर्ट के बारे में न भूलें:

export default sellersSlice.reducer

अब हमें app फ़ोल्डर में store.js फ़ाइल खोलनी होगी और प्राप्त reducer को इम्पोर्ट करना होगा:

import sellersReducer from '../parts/sellers/sellersSlice'

और फिर configureStore में इसे sellers के लिए reducer के रूप में नियुक्त करें:

export default configureStore({
	reducer: {
		products: productsReducer,
		sellers: sellersReducer,
	},
})

अपना छात्रों वाला एप्लिकेशन खोलें। एक और फ़ोल्डर teachers बनाएं, यहाँ आपके पास शिक्षकों से संबंधित कोड वाली फ़ाइलें होंगी। इसमें फ़ाइल teachersSlice.js बनाएं। पाठ की सामग्री का उपयोग करते हुए, इसमें teachers स्लाइस createSlice की सहायता से बनाएं।

प्रत्येक शिक्षक ऑब्जेक्ट में आपके पास तीन गुण हों: id, name (जिसमें उपनाम और आद्याक्षर होंगे, उदाहरण के लिए 'पेट्रोव ए.वी.') और विषय (जो भी आप सोचें - भौतिकी, गणित, जीवविज्ञान आदि)। स्लाइस के प्रारंभिक मान के रूप में शिक्षकों के साथ 3 ऐसे ऑब्जेक्ट बनाएं।

प्राप्त reducer teachersReducer को store.js में इम्पोर्ट करें और इसे teachers के लिए reducer के रूप में नियुक्त करें, जैसा कि पाठ में दिखाया गया है।