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 স্লাইসে action-এর payload থেকে সরাসরি একটি নতুন পণ্য যোগ করবে (মনে রাখবেন, এই ধরনের কোড শুধুমাত্র createSlice-এর অনন্য ক্ষমতার কারণে সম্ভব):

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

হ্যাঁ, উপায় দ্বারা, ইম্পোর্ট লাইন থেকে nanoid সরাতে ভুলবেন না, এবং ফাইলের শেষে এক্সপোর্ট করা একশনগুলোর তালিকা থেকে productAdded সরাতে ভুলবেন না।