Redux में thunk का उपयोग करके डेटा भेजना

पिछले पाठ में, हमने अपने नकली सर्वर पर POST अनुरोध के प्रसंस्करण को समझा। आइए अब एक thunk फ़ंक्शन लिखें जो सर्वर पर अनुरोध भेजेगी।

आइए हमारे उत्पादों वाले एप्लिकेशन को खोलें, और उसमें फ़ाइल productsSlice.js खोलें। अब thunk fetchProducts के बाद createAsyncThunk की सहायता से हम एक thunk addProduct बनाएंगे:

export const addProduct = createAsyncThunk()

पहले पैरामीटर के रूप में हम createAsyncThunk में 'products/addProduct' पास करेंगे, और दूसरे के रूप में एक अतुल्यकालिक कॉलबैक, जो नए उत्पाद के डेटा वाली वस्तु लेगा:

export const addProduct = createAsyncThunk(
	'products/addProduct',
	async (newProduct) => {}
)

इस कॉलबैक के कोड में, हम क्लाइंट को कॉल करेंगे, उसे पथ और उत्पाद वाली वस्तु पैरामीटर के रूप में देकर, और फिर प्रतिक्रिया का डेटा वापस करेंगे:

export const addProduct = createAsyncThunk(
	'products/addProduct',
	async (newProduct) => {
		const response = await client.post('/fakeServer/products', newProduct)
		return response.data
	}
)

अब नीचे कोड में productsSlice के लिए reducers फ़ील्ड देखें। पहले हम रिड्यूसर productAdded की सहायता से नया उत्पाद जोड़ते थे, जिसमें reducer और prepare मेथड्स थे। अब हम सर्वर पर आवश्यक डेटा जनरेट कर रहे हैं और thunk के साथ काम कर रहे हैं, इसलिए यहाँ से पूरी तरह से रिड्यूसर productAdded को कोड से हटा देंगे। फिर extraReducers मेथड (इसके कोड के अंत में) में एक और अतिरिक्त रिड्यूसर जोड़ेंगे, जो सफल अनुरोध की स्थिति में स्लाइस products में नया उत्पाद सीधे एक्शन के payload से जोड़ देगा (याद रखें कि ऐसा कोड केवल createSlice की बदौलत संभव है):

.addCase(addProduct.fulfilled, (state, action) => {
	state.products.push(action.payload)
})

हाँ, वैसे, आयात वाली लाइनों से nanoid को हटाना न भूलें, और फ़ाइल के अंत में एक्शन्स के निर्यात से productAdded को हटा दें।

अपने छात्रों वाले एप्लिकेशन को खोलें। उसमें फ़ाइल studentsSlice.js खोलें। createAsyncThunk की सहायता से एक और thunk addStudent बनाएं, जो नया छात्र जोड़ने के लिए सर्वर पर POST अनुरोध भेजेगा, जैसा पाठ में दिखाया गया है।

इसके बाद नीचे studentsSlice के लिए परिवर्तन करें: reducers प्रॉपर्टी में रिड्यूसर studentAdded को पूरी तरह से हटा दें। और extraReducers फ़ील्ड में एक अतिरिक्त रिड्यूसर जोड़ें, जो सफल अनुरोध की स्थिति में, स्लाइस students में नया छात्र एक्शन के payload से जोड़ेगा, जैसा पाठ में दिखाया गया है।