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 স্লাইসে action-এর 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 স্লাইসে action-এর payload থেকে একটি নতুন শিক্ষার্থী যোগ করবে, যেমনটি পাঠে দেখানো হয়েছে।