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

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

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

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

parts/sellers/sellersSlice.jsimport { createSlice } from '@reduxjs/toolkit'

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

sellers/sellersSlice.jsconst initialState = [
  { id: '0', name: 'Super Power' },
  { id: '1', name: 'Miracle Life' },
  { id: '2', name: 'Dolls&Toys' },
  { id: '3', name: 'Granny' },
]

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

sellers/sellersSlice.jsconst sellersSlice = createSlice({
  name: 'sellers',
  initialState,
  reducers: {},
})

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

sellers/sellersSlice.jsexport default sellersSlice.reducer

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

app/store.jsimport sellersReducer from '../parts/sellers/sellersSlice'

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

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