Redux Thunk কী এবং কিভাবে কাজ করে?

Redux Thunk হল একটি middleware যা Redux স্টোরের মধ্যে অ্যাসিনক্রোনাস অ্যাকশন (Asynchronous Actions) হ্যান্ডল করতে ব্যবহৃত হয়। Redux সাধারণত সিনক্রোনাস (synchronous) একশন পরিচালনা করে, কিন্তু অনেক সময় অ্যাপ্লিকেশনে অ্যাসিনক্রোনাস কাজ করতে হয় (যেমন, API কল বা ডেটা ফেচ)। Redux Thunk এই সমস্যা সমাধান করে, কারণ এটি আপনাকে অ্যাকশন ক্রিয়েটর (Action Creators) থেকে ফাংশন ডিসপ্যাচ করার অনুমতি দেয়, যেগুলো এক বা একাধিক অ্যাকশন ডিসপ্যাচ করতে পারে।

Redux Thunk মূলত পিউর ফাংশন (Pure Function)-এর মত কাজ করে এবং একশন ক্রিয়েটরকে ফাংশন রিটার্ন করতে দেয়, যা স্টোর-এ ডিসপ্যাচ হতে পারে।

Redux Thunk কীভাবে কাজ করে?

Redux সাধারণত অ্যাকশন ক্রিয়েটর থেকে একটি অবজেক্ট রিটার্ন করার জন্য প্রত্যাশা করে, কিন্তু Redux Thunk আপনাকে একশন ক্রিয়েটরের ভিতরে একটি ফাংশন রিটার্ন করতে দেয়। এই ফাংশনটি ডিসপ্যাচ (dispatch) এবং getState ফাংশন প্যারামিটার হিসেবে গ্রহণ করে। এরপর, এই ফাংশনটি অ্যাসিনক্রোনাস কাজ (যেমন, API কল) সম্পাদন করতে পারে এবং যখন কাজটি সম্পন্ন হয়, তখন স্টোরে একটি নতুন একশন ডিসপ্যাচ করতে পারে।

Redux Thunk এফেক্টিভভাবে অ্যাসিনক্রোনাস প্রক্রিয়াগুলিকে Redux স্টেট ম্যানেজমেন্টের সাথে একত্রিত করতে সহায়তা করে।

Redux Thunk এর কাজের ধাপ

1. অ্যাসিনক্রোনাস একশন ডিসপ্যাচ: অ্যাসিনক্রোনাস একশন ক্রিয়েটর একটি ফাংশন রিটার্ন করে, যা একাধিক ডিসপ্যাচ অপারেশন করতে পারে। এই ফাংশনটি সাধারণত API কল বা অন্যান্য অ্যাসিনক্রোনাস কাজ পরিচালনা করে।
2. ডেটা লোড করা: একশন ক্রিয়েটর ফাংশনটি API বা অন্য কোনও এক্সটার্নাল সোর্স থেকে ডেটা ফেচ করার জন্য কল করতে পারে।
3. একশন ডিসপ্যাচ করা: যখন অ্যাসিনক্রোনাস কাজটি সম্পন্ন হয়, তখন স্টোরে একশন ডিসপ্যাচ করা হয়, যেটি নতুন স্টেট তৈরি করতে ব্যবহৃত হয়।

Redux Thunk এর উদাহরণ

ধরা যাক, আমাদের একটি অ্যাপ্লিকেশন আছে যেখানে টাস্কের তালিকা লোড করতে হবে একটি API থেকে। এই কাজটি করা হবে Redux Thunk ব্যবহার করে।

1. API কলের জন্য অ্যাকশন ক্রিয়েটর (Action Creator) তৈরি করা

// Action types
const FETCH_TASKS_REQUEST = 'FETCH_TASKS_REQUEST';
const FETCH_TASKS_SUCCESS = 'FETCH_TASKS_SUCCESS';
const FETCH_TASKS_FAILURE = 'FETCH_TASKS_FAILURE';

// Action creators
function fetchTasksRequest() {
  return {
    type: FETCH_TASKS_REQUEST
  };
}

function fetchTasksSuccess(tasks) {
  return {
    type: FETCH_TASKS_SUCCESS,
    payload: tasks
  };
}

function fetchTasksFailure(error) {
  return {
    type: FETCH_TASKS_FAILURE,
    payload: error
  };
}

// Thunk action creator (Asynchronous action creator)
function fetchTasks() {
  return function(dispatch) {
    // Dispatch request action (to set loading state)
    dispatch(fetchTasksRequest());
    
    // Perform the asynchronous API call
    fetch('https://api.example.com/tasks')
      .then(response => response.json())
      .then(data => {
        // Dispatch success action when data is fetched
        dispatch(fetchTasksSuccess(data));
      })
      .catch(error => {
        // Dispatch failure action when there's an error
        dispatch(fetchTasksFailure(error));
      });
  };
}

2. Reducer তৈরি করা

const initialState = {
  loading: false,
  tasks: [],
  error: ''
};

function tasksReducer(state = initialState, action) {
  switch (action.type) {
    case FETCH_TASKS_REQUEST:
      return {
        ...state,
        loading: true
      };
    case FETCH_TASKS_SUCCESS:
      return {
        ...state,
        loading: false,
        tasks: action.payload
      };
    case FETCH_TASKS_FAILURE:
      return {
        ...state,
        loading: false,
        error: action.payload
      };
    default:
      return state;
  }
}

3. Store তৈরি করা

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

const store = createStore(
  tasksReducer,
  applyMiddleware(thunk)
);

// Dispatch the thunk action to fetch tasks
store.dispatch(fetchTasks());

এখানে:

• fetchTasks() একটি Thunk action creator, যা প্রথমে fetchTasksRequest() অ্যাকশন ডিসপ্যাচ করে API কল শুরু হওয়ার সংকেত দেয়।
• API থেকে ডেটা আসলে, fetchTasksSuccess() অ্যাকশন ডিসপ্যাচ করা হয় যাতে টাস্কগুলোর ডেটা স্টোরে যুক্ত হয়।
• কোনো সমস্যা হলে, fetchTasksFailure() অ্যাকশন ডিসপ্যাচ করে ত্রুটি স্টেট সেট করা হয়।

Redux Thunk এর সুবিধা

1. অ্যাসিনক্রোনাস কাজ পরিচালনা: Redux Thunk ব্যবহার করে আপনি অ্যাসিনক্রোনাস একশন এবং ডেটা লোডিং কাজগুলো খুব সহজেই Redux স্টোরে সংহত করতে পারেন।
2. স্টেটের পরিবর্তন কার্যকরভাবে ম্যানেজ করা: অ্যাসিনক্রোনাস কাজের শেষ হলে, আপনি একাধিক একশন ডিসপ্যাচ করে স্টেট পরিবর্তন করতে পারেন।
3. সামাজিক কোড: অ্যাসিনক্রোনাস ফাংশনকে স্টোরে ডিসপ্যাচ করা এবং তারপর একশন ডিসপ্যাচ করা, পুরো প্রক্রিয়াটি খুবই পরিষ্কার এবং সংগঠিত করে।
4. কোনো অ্যাসিনক্রোনাস কোড ব্লক না হয়: Redux Thunk আপনাকে অ্যাসিনক্রোনাস কাজগুলো সিঙ্ক্রোনাস স্টাইলে লিখতে সহায়তা করে, যা কোডের পরিষ্কারতা এবং রিডেবিলিটি বাড়ায়।

Redux Thunk vs Redux Saga

Redux Saga আরেকটি জনপ্রিয় middleware যা অ্যাসিনক্রোনাস কাজ পরিচালনার জন্য ব্যবহৃত হয়। তবে, Redux Saga এবং Redux Thunk-এর মধ্যে কিছু মৌলিক পার্থক্য রয়েছে:

• Redux Thunk ফাংশনাল স্টাইল ব্যবহার করে, যেখানে আপনি ফাংশন রিটার্ন করেন যেটি স্টোরে ডিসপ্যাচ করতে পারে।
• Redux Saga জেনারেটর ফাংশন ব্যবহার করে এবং এটি একটু কমপ্লেক্স কাজের জন্য উপযুক্ত, যেমন একাধিক অ্যাসিনক্রোনাস কাজের চেইনিং বা উইথড্রাওয়ার প্রক্রিয়া।

Redux Thunk সাধারণত ছোট এবং মাঝারি অ্যাপ্লিকেশনগুলোর জন্য বেশি উপযুক্ত, যেখানে অ্যাসিনক্রোনাস একশনগুলোকে সহজভাবে হ্যান্ডল করা হয়।

সারাংশ

Redux Thunk একটি middleware যা Redux-এ অ্যাসিনক্রোনাস একশন পরিচালনার জন্য ব্যবহৃত হয়। এটি আপনাকে Thunk action creator তৈরি করতে দেয়, যা অ্যাসিনক্রোনাস কাজের জন্য API কল করতে পারে এবং কাজের শেষে এক বা একাধিক একশন ডিসপ্যাচ করতে পারে। Redux Thunk ব্যবহার করলে অ্যাপ্লিকেশনের স্টেট পরিবর্তন সহজভাবে পরিচালনা করা যায় এবং অ্যাসিনক্রোনাস প্রক্রিয়া Redux-এর স্টেট ম্যানেজমেন্টের মধ্যে seamlessly ইনটিগ্রেট হয়ে যায়।