Redux-এ Thunks-এর পরিচিতি

পূর্ববর্তী অধ্যায়ে আমরা ডেটা বিনিময়ের জন্য সার্ভার, ডেটাবেস এবং ক্লায়েন্টের কাজ সংগঠিত করেছি। এখন আমাদের শেষ সেতুটি তৈরি করতে হবে, যা আমাদের 'সিঙ্ক্রোনাস'ভাবে সংগঠিত Redux অ্যাপ্লিকেশনটিকে অ্যাসিঙ্ক্রোনাস ক্লায়েন্টের সাথে ইন্টারঅ্যাক্ট করতে সাহায্য করবে, যেটি আমরা পূর্ববর্তী অধ্যায়ের শেষ পাঠে তৈরি করেছিলাম, যাতে অনুরোধ পাঠানো এবং প্রতিক্রিয়ায় প্রয়োজনীয় ডেটা পাওয়া যায়।

আমরা পূর্ববর্তী বিভাগের প্রথম পাঠগুলি থেকে মনে রাখি যে, Redux অ্যাসিঙ্ক্রোনাস লজিক নিয়ে কাজ করার বিষয়ে কিছু জানে না এবং এর জন্য আমরা thunk middleware ব্যবহার করব। এই middleware প্রেরণ করা actions নিয়ে কাজ করতে, আমাদের thunk কোডে store-এর dispatch এবং getState পদ্ধতিগুলি ব্যবহার করতে এবং dispatch পদ্ধতিকে শুধুমাত্র সাধারণ JS অবজেক্ট নয়, বরং ফাংশন এবং প্রমিসের মতো সত্ত্বাগুলির সাথেও কাজ করতে সাহায্য করে।

সাধারণত thunk-ফাংশনটি দুটি আর্গুমেন্ট dispatch এবং getState (প্রয়োজনে) সহ কল করা হয়, যা এই ফাংশনের বডিতে ব্যবহার করা যেতে পারে। এর সাহায্যে সাধারণ অ্যাকশন পাঠানো যায়। এটিকে store.dispatch এর মাধ্যমেও পাঠানো যেতে পারে। এই ধরনের একটি ফাংশনের উদাহরণ নিচে দেওয়া হল:

const changeColorThunk = (dispatch, getState) => {
	const colorBefore = getState()
	console.log(`Old Color: ${colorBefore.color}`)
	
	dispatch(changeColor())
	
	const colorAfter = getState()
	console.log(`New Color: ${colorAfter.color}`)
}

store.dispatch(changeColorThunk)

এখন আমাদের পণ্যগুলির অ্যাপ্লিকেশনটি খুলি। প্রথম জিনিস যা আমরা অ্যাপ্লিকেশন চালু করার সময় সার্ভার থেকে পাব তা হল পণ্যের তালিকা। যেহেতু সাধারণত thunks গুলি স্লাইস-ফাইলে লেখা হয়, তাই আমরা productsSlice.js ফাইলটি খুলব।

আনন্দের খবর হল যে আমাদের Redux Thunk ইনস্টল করতে কোন ঝামেলা পোহাতে হবে না, কারণ RTK থেকে configureStore ফাংশনটি ইতিমধ্যেই এটি আমাদের জন্য করে দেবে। তাই শুধু ফাইলে ইম্পোর্টে createAsyncThunk যোগ করব:

import { createSlice, nanoid, createAsyncThunk } from '@reduxjs/toolkit'

আমাদের ক্লায়েন্টটিও ইম্পোর্টে যোগ করি:

import { client } from '../../api/client'

এবং এখন createAsyncThunk এর সাহায্যে পণ্য পেতে আমাদের প্রথম thunk তৈরি করব, এটি করব initialState অবজেক্ট ডিক্লেয়ার করার পরেই:

export const fetchProducts = createAsyncThunk()

createAsyncThunk এর প্রথম প্যারামিটার হবে জেনারেট করা অ্যাকশনের টাইপের জন্য একটি স্ট্রিং নেবে, এবং দ্বিতীয়টি হবে payload-এর জন্য একটি কলব্যাক-ফাংশন, যা ফলস্বরূপ হয় ডেটা বা একটি ত্রুটি সহ প্রমিস রিটার্ন করবে (client.js ফাইলটি দেখুন)। ফাংশনের কোডে আমরা client.get কল করি এবং এটিকে সেই পাথটি পাস করি, যা আমরা সার্ভারে উল্লেখ করেছি (server.js-তে http.get এর গ্রহণ করা প্যারামিটারগুলি দেখুন):

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

আপনার শিক্ষার্থীদের অ্যাপ্লিকেশনটি খুলুন। এতে studentsSlice.js ফাইলটি খুলুন। এতে thunk তৈরি করার জন্য createAsyncThunk ফাংশনটি ইম্পোর্ট করুন, পাশাপাশি সার্ভারে API রিকোয়েস্ট পাঠানোর জন্য client ইম্পোর্ট করুন।

initialState অবজেক্ট ডিক্লেয়ার করার পরেই createAsyncThunk ব্যবহার করে thunk তৈরি করুন fetchStudents শিক্ষার্থীদের তালিকা পেতে, যা GET-রিকোয়েস্ট পাঠাবে /fakeServer/students ঠিকানায়, উল্লেখ করা আপনার server.js ফাইলে, এবং রিটার্ন করবে response.data, যেমন পাঠের উপকরণে দেখানো হয়েছে। createAsyncThunk-এর প্রথম প্যারামিটার হিসেবে অ্যাকশন টাইপের জন্য students/fetchStudents স্ট্রিংটি উল্লেখ করুন।