Redux সাধারণত সিঙ্ক্রোনাস অ্যাকশন (synchronous actions) ব্যবহারের জন্য ডিজাইন করা হয়েছিল, যেখানে একশনগুলি স্টেট পরিবর্তন করার জন্য সরাসরি রিডিউসারে পাস করা হয়। তবে, অনেক সময় অ্যাসিনক্রোনাস কাজ (যেমন, API কল, টাইমার, বা ডেটা ফেচিং) করতে হয়, যেখানে স্টেট পরিবর্তন এক সেকেন্ডে ঘটে না। এই ধরনের অ্যাসিনক্রোনাস একশনগুলিকে হ্যান্ডল করার জন্য Redux-এ কিছু মেথড এবং মiddleware ব্যবহৃত হয়, যার মধ্যে সবচেয়ে জনপ্রিয় হল Redux Thunk এবং Redux Saga।
অ্যাসিনক্রোনাস অ্যাকশন কী?
অ্যাসিনক্রোনাস অ্যাকশন হল এমন অ্যাকশন যা তাত্ক্ষণিকভাবে স্টেট পরিবর্তন করে না। এর মধ্যে একটি অ্যাসিনক্রোনাস অপারেশন থাকতে পারে, যেমন:
- API থেকে ডেটা ফেচ করা
- সময় সাপেক্ষ কাজ (যেমন, টাইমআউট বা ডিলে)
- অন্য কোনো asynchronous কাজ
Redux-এ অ্যাসিনক্রোনাস কাজ পরিচালনা করতে হলে, আমরা সাধারণত একশন ডিসপ্যাচের আগে কিছু অতিরিক্ত কাজ করতে পারি। এই কাজগুলির জন্য সাধারণত middleware ব্যবহার করা হয়, যেমন Redux Thunk বা Redux Saga।
Redux Thunk: অ্যাসিনক্রোনাস অ্যাকশন হ্যান্ডল করার জন্য একটি মেথড
Redux Thunk একটি middleware যা Redux স্টোরে ব্যবহৃত হয়। এটি আপনাকে অ্যাসিনক্রোনাস ফাংশন ডিসপ্যাচ করার সুযোগ দেয়। সাধারণত, Redux অ্যাকশন অবজেক্ট হিসেবে শুধুমাত্র একটি প্লেইন অবজেক্ট গ্রহণ করে, কিন্তু Redux Thunk আপনাকে ফাংশন ডিসপ্যাচ করার সুযোগ দেয়, যা তখন কার্যকর হয় এবং অ্যাসিনক্রোনাস কাজ পরিচালনা করে।
Redux Thunk ইনস্টলেশন এবং কনফিগারেশন
npm install redux-thunk
redux-thunk ইনস্টল করার পরে, আপনি এটি Redux স্টোরে ব্যবহার করতে পারেন।
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
// রিডিউসার ফাংশন
function reducer(state = { data: [] }, action) {
switch (action.type) {
case 'FETCH_DATA_SUCCESS':
return { ...state, data: action.payload };
default:
return state;
}
}
// স্টোর তৈরি
const store = createStore(reducer, applyMiddleware(thunk));
Thunk এর মাধ্যমে অ্যাসিনক্রোনাস অ্যাকশন হ্যান্ডল করা
Redux Thunk আপনাকে অ্যাসিনক্রোনাস ফাংশন ডিসপ্যাচ করার সুযোগ দেয়। থাঙ্ক ফাংশন dispatch এবং getState ফাংশন পাস করে দেয়, যা অ্যাসিনক্রোনাস কাজ সম্পাদন করার পর স্টোরে নতুন অ্যাকশন ডিসপ্যাচ করতে ব্যবহৃত হয়।
Thunk অ্যাকশন ক্রিয়েটর:
// Action creator with thunk
function fetchData() {
return function(dispatch) {
dispatch({ type: 'FETCH_DATA_START' });
// অ্যাসিনক্রোনাস API কল
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
})
.catch(error => {
dispatch({ type: 'FETCH_DATA_FAILURE', payload: error });
});
};
}
এখানে, fetchData একটি অ্যাকশন ক্রিয়েটর যা থাঙ্ক ফাংশন হিসেবে কাজ করছে:
- প্রথমে FETCH_DATA_START অ্যাকশন ডিসপ্যাচ করা হয় (এটি সাধারণত লোডিং স্টেট নির্দেশ করে)।
- তারপর, API কল করা হয়। যখন ডেটা পাওয়া যাবে, তখন FETCH_DATA_SUCCESS অ্যাকশন ডিসপ্যাচ হবে এবং ডেটা
payloadহিসেবে পাস করা হবে। - যদি কোনো ত্রুটি ঘটে, তবে FETCH_DATA_FAILURE অ্যাকশন ডিসপ্যাচ করা হবে।
Thunk ব্যবহার করে অ্যাকশন ডিসপ্যাচ করা
Redux স্টোরে থাঙ্ক ব্যবহার করতে, আপনি dispatch ফাংশন ব্যবহার করতে পারেন, যেটি অ্যাসিনক্রোনাস ফাংশন ডিসপ্যাচ করার অনুমতি দেয়।
// Store থেকে dispatch করা
store.dispatch(fetchData());
এখানে, fetchData() থাঙ্ক ফাংশন ডিসপ্যাচ করার মাধ্যমে অ্যাসিনক্রোনাস অপারেশনটি শুরু হয় এবং রিডিউসার নতুন স্টেট আপডেট করে।
Redux Thunk এর সুবিধা
- সহজ ব্যবহৃত: থাঙ্ক ব্যবহারের মাধ্যমে অ্যাসিনক্রোনাস কাজ সহজেই Redux এর মধ্যে পরিচালনা করা যায়।
- বিভিন্ন কাজের সমাধান: থাঙ্ক বিভিন্ন অ্যাসিনক্রোনাস কাজের জন্য কার্যকর, যেমন API কল, টাইমার, বা ওয়েবসকেট ব্যবহার।
- স্টেট ম্যানেজমেন্ট: থাঙ্কের মাধ্যমে অ্যাসিনক্রোনাস কাজের ফলাফলকে স্টেট হিসেবে Redux স্টোরে রাখা সম্ভব।
Redux Saga: আরও উন্নত অ্যাসিনক্রোনাস কাজের জন্য
Redux Saga একটি উন্নত middleware যা অ্যাসিনক্রোনাস কাজ, পারালাল প্রক্রিয়াগুলি এবং সাইড এফেক্ট হ্যান্ডলিং করতে ব্যবহৃত হয়। এটি ES6 জেনারেটর ফাংশন ব্যবহার করে, যেটি অ্যাসিনক্রোনাস কোডকে আরও মেনটেইনেবল এবং সিঙ্ক্রোনাস মনে হয় এমনভাবে লেখার সুযোগ দেয়।
Redux Thunk এর তুলনায়, Redux Saga আরো জটিল অ্যাসিনক্রোনাস প্রক্রিয়া যেমন ফ্লো কন্ট্রোল, রিট্রাই, ডেবাউন্সিং, এবং ওয়েটিং সিগন্যাল হ্যান্ডলিং সহজ করে।
Redux Saga ব্যবহার করার জন্য, redux-saga ইনস্টল করতে হবে।
npm install redux-saga
এর পর, saga তৈরি করে এবং middleware হিসেবে Redux স্টোরে যুক্ত করতে হয়।
সারাংশ
Redux Thunk অ্যাসিনক্রোনাস অ্যাকশন হ্যান্ডল করার জন্য এক জনপ্রিয় middleware, যা অ্যাসিনক্রোনাস ফাংশন ডিসপ্যাচ করার অনুমতি দেয়। এটি API কল, টাইমার, অথবা অন্যান্য অ্যাসিনক্রোনাস কাজের জন্য কার্যকর। Redux Saga আরও উন্নত অ্যাসিনক্রোনাস কাজের জন্য ব্যবহৃত হয়, যেমন প্যারালাল কাজ, সাইড এফেক্ট হ্যান্ডলিং, এবং আরো। Redux-এ অ্যাসিনক্রোনাস একশনগুলো দক্ষভাবে পরিচালনা করার মাধ্যমে অ্যাপ্লিকেশনের স্টেট ম্যানেজমেন্ট আরো শক্তিশালী এবং স্কেলেবল করা যায়।
Read more
