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

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

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

products/productsSlice.jsexport const addProduct = createAsyncThunk()

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

products/productsSlice.jsexport const addProduct = createAsyncThunk(
  'products/addProduct',
  async (newProduct) => {}
)

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

products/productsSlice.jsexport 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 की बदौलत संभव है):

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

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