Redux में state structure को बदलना

पहला चरण जिसे हम लागू करेंगे, वह है हमारे Redux एप्लिकेशन का किसी बाहरी सर्वर के साथ इंटरैक्शन के लिए - एप्लिकेशन शुरू होने पर उस पर संग्रहीत डेटा प्राप्त करना। लेकिन इससे पहले, आइए हम अपने एप्लिकेशन में कुछ बदलाव करें।

हमारे उत्पादों वाला एप्लिकेशन खोलें, और उसमें फ़ाइल productsSlice.js खोलें। initialState की परिभाषा पर ध्यान दें। शुरू में, उत्पादों वाला हमारा स्लाइस productsSlice एक ऐरे है जिसमें उत्पादों के डेटा वाली ऑब्जेक्ट्स हैं (हमारे मामले में उनमें से दो हैं)। सबसे पहले, क्योंकि अब हम उन्हें सर्वर से लोड करेंगे, इसलिए हमें उन्हें initialState से हटाने की आवश्यकता है। दूसरी बात, हम सर्वर पर API requests भेजेंगे और उनकी स्थिति के बारे में जानना हमारे लिए महत्वपूर्ण होगा। इन दो बातों को ध्यान में रखते हुए, आइए initialState को बदलें। अब इसे बस products (यहां शुरू में कोई डेटा नहीं होगा, बस एक खाली ऐरे), status और error फ़ील्ड वाला एक ऑब्जेक्ट बनने दें। अब initialState के लिए हमारा कोड थोड़ा छोटा हो जाएगा:

const initialState = {
	products: [],
	status: 'idle',
	error: null,
}

अभी हमने status को 'idle' (निष्क्रिय) सेट किया है, क्योंकि शुरू में हम कोई requests नहीं भेज रहे हैं, लेकिन सामान्य तौर पर यह बदलेगा और 'loading', 'succeeded', 'failed' मान ले सकता है। याद रखें, कि status को दर्शाने के लिए आप वे नाम चुन सकते हैं जो आपके लिए सुविधाजनक हों।

कोड में नीचे जाएं। initialState में बदलाव के बाद, हमें उस कोड को भी बदलना चाहिए, जिसमें हम reducer functions में इस state के साथ काम करते हैं। productAdded के लिए कोड देखें:

state.push(action.payload)

अब नए उत्पादों को हम सीधे उत्पादों वाले state में नहीं, बल्कि उसकी प्रॉपर्टी state.products में डालेंगे। इसलिए, उपर्युक्त लाइन को इससे बदलें:

state.products.push(action.payload)

तदनुसार, reducer reactionClicked के लिए वही बदलाव करेंगे। इसके बजाय:

const currentProduct = state.find((product) => product.id === productId)

अब यह होगा:

const currentProduct = state.products.find((product) => product.id === productId)

state को state.products से स्वयं reducer productUpdated के कोड में भी बदलें।

अपने छात्रों वाला एप्लिकेशन खोलें। उसमें फ़ाइल studentsSlice.js खोलें। अब आपका initialState तीन गुण रखे: students, status, error - इसे पाठ में दिखाए अनुसार बदलें।

संबंधित बदलाव कोड में नीचे भी करें। अपने तीन reducer functions के कोड में state को state.students से बदलें।