Web Development Redux Thunk এবং Asynchronous Actions গাইড ও নোট

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

Asynchronous Actions কী?

Asynchronous Actions হল সেগুলি, যেগুলি সম্পূর্ণ হতে কিছু সময় নেয়। উদাহরণস্বরূপ:

• API কল করা
• ডেটাবেসে লেখার কাজ
• সময়সীমা সম্পন্ন হতে অপেক্ষা করা

Redux-এ, সাধারণ একশনগুলো সিনক্রোনাস হয়, অর্থাৎ, একশন ডিসপ্যাচ করা হলে তা সঙ্গতিপূর্ণভাবে স্টেট পরিবর্তন করে। কিন্তু যখন অ্যাসিনক্রোনাস কাজের প্রয়োজন হয়, তখন Redux এর ডিফল্ট পদ্ধতি যথেষ্ট নয়। এই জন্য Redux Thunk মডিউল ব্যবহার করা হয়, যা অ্যাসিনক্রোনাস কাজকে সমর্থন দেয়।

Redux Thunk কী?

Redux Thunk হল একটি middleware, যা Redux এর একশন ক্রিয়েটর ফাংশনগুলিকে ফাংশন হতে সক্ষম করে। সাধারণত একশনগুলি এক্সপ্লিকিট অবজেক্ট হিসেবে ফিরে আসে, কিন্তু Redux Thunk এই একশন ক্রিয়েটরগুলোকে ফাংশন হিসেবে ব্যবহার করতে দেয়, যা dispatch বা getState ফাংশন গ্রহণ করে। এই ফাংশনটি সাধারণত অ্যাসিনক্রোনাস কাজ সম্পাদন করার জন্য ব্যবহৃত হয়।

Redux Thunk সাধারণত অ্যাসিনক্রোনাস একশন পরিচালনার জন্য ব্যবহৃত হয়, যা API কল বা অন্যান্য ব্যাকগ্রাউন্ড কার্যকলাপ করে এবং তারপর সেই ডেটার ভিত্তিতে স্টেট পরিবর্তন করে।

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

Redux Thunk একশন ক্রিয়েটর ফাংশনগুলোকে ফাংশনে রূপান্তরিত করে, যা ডিসপ্যাচ ফাংশন এবং স্টেটের অ্যাক্সেস করতে পারে। যখন অ্যাসিনক্রোনাস কাজ সম্পন্ন হয়, তখন থাঙ্ক ডিসপ্যাচ করতে পারে।

উদাহরণ:

ধরা যাক, আমাদের একটি টুডু অ্যাপ্লিকেশন আছে, যেখানে API থেকে টুডু তালিকা ফেচ করা হবে। এখানে Redux Thunk ব্যবহার করা হয়েছে:

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

// Initial state
const initialState = {
  todos: [],
  loading: false,
  error: null
};

// Reducer
function todosReducer(state = initialState, action) {
  switch (action.type) {
    case 'FETCH_TODOS_REQUEST':
      return { ...state, loading: true };
    case 'FETCH_TODOS_SUCCESS':
      return { ...state, loading: false, todos: action.payload };
    case 'FETCH_TODOS_FAILURE':
      return { ...state, loading: false, error: action.payload };
    default:
      return state;
  }
}

// Action creator with Redux Thunk (asynchronous action)
function fetchTodos() {
  return function(dispatch) {
    // Dispatching the start of the fetch
    dispatch({ type: 'FETCH_TODOS_REQUEST' });

    // Simulating an API call
    fetch('https://jsonplaceholder.typicode.com/todos')
      .then(response => response.json())
      .then(data => {
        // Dispatching the success action with fetched data
        dispatch({ type: 'FETCH_TODOS_SUCCESS', payload: data });
      })
      .catch(error => {
        // Dispatching failure action in case of an error
        dispatch({ type: 'FETCH_TODOS_FAILURE', payload: error });
      });
  };
}

// Create store with Thunk middleware
const store = createStore(todosReducer, applyMiddleware(thunk));

// Dispatch the fetchTodos action
store.dispatch(fetchTodos());

এখানে:

1. fetchTodos: এটি একটি অ্যাসিনক্রোনাস একশন ক্রিয়েটর। এটি dispatch ফাংশন গ্রহণ করে এবং FETCH_TODOS_REQUEST ডিসপ্যাচ করার পর API থেকে ডেটা ফেচ করে।
2. Redux Thunk Middleware: এটি dispatch ফাংশনকে ফাংশন হিসেবে গ্রহণ করতে দেয়, যা অ্যাসিনক্রোনাস কাজ (যেমন API কল) সম্পাদন করতে পারে।
3. Reducer: রিডিউসারটি একশন টাইপ অনুযায়ী স্টেট পরিবর্তন করে (যেমন FETCH_TODOS_REQUEST, FETCH_TODOS_SUCCESS বা FETCH_TODOS_FAILURE)।

Redux Thunk এর সুবিধা

1. Asynchronous Action Handling: Redux Thunk অ্যাসিনক্রোনাস কাজ পরিচালনা করতে সহায়তা করে, যেমন API কল বা অন্য সময়সীমাবদ্ধ কার্যকলাপ।
2. Dispatching Multiple Actions: Redux Thunk একাধিক অ্যাকশন ডিসপ্যাচ করতে পারে, যেমন প্রথমে একটি "Request" অ্যাকশন, তারপর "Success" অথবা "Failure" অ্যাকশন।
3. Access to Dispatch and State: Thunk অ্যাকশন ক্রিয়েটর dispatch এবং getState ফাংশন অ্যাক্সেস করতে পারে, যা অ্যাসিনক্রোনাস কাজের পরে স্টেট আপডেট করতে সহজ করে তোলে।

Redux Thunk ছাড়াও Asynchronous Actions Handling

Redux Thunk ছাড়া, Redux অ্যাপ্লিকেশনে অ্যাসিনক্রোনাস একশন পরিচালনার জন্য আরও কিছু জনপ্রিয় middleware ব্যবহার করা হয়:

1. Redux Saga: এটি একটি আরও উন্নত পদ্ধতি, যা ES6 Generator Functions ব্যবহার করে অ্যাসিনক্রোনাস একশনগুলোকে কার্যকরভাবে ম্যানেজ করে।
2. Redux Observable: এটি RxJS (Reactive Extensions) ব্যবহার করে অ্যাসিনক্রোনাস স্ট্রিম হ্যান্ডলিং করার জন্য ব্যবহৃত হয়।

তবে, Redux Thunk সাধারণত অ্যাসিনক্রোনাস কাজ সহজভাবে পরিচালনার জন্য সবচেয়ে সহজ এবং জনপ্রিয় পদ্ধতি।

সারাংশ

Redux Thunk একটি middleware যা Redux অ্যাপ্লিকেশনগুলিতে অ্যাসিনক্রোনাস একশন পরিচালনা করতে সাহায্য করে। এটি একশন ক্রিয়েটর ফাংশনগুলোকে ফাংশন হিসেবে পরিণত করে, যা dispatch ফাংশন গ্রহণ করে এবং অ্যাসিনক্রোনাস কাজ সম্পাদন করতে পারে। Redux Thunk ব্যবহার করে আমরা API কল, টাইমার, অথবা অন্যান্য ব্যাকগ্রাউন্ড কাজ সম্পাদন করতে পারি এবং তারপর সেই ডেটার উপর ভিত্তি করে স্টেট পরিবর্তন করতে পারি। 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 ইনটিগ্রেট হয়ে যায়।

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 একটি অ্যাকশন ক্রিয়েটর যা থাঙ্ক ফাংশন হিসেবে কাজ করছে:

1. প্রথমে FETCH_DATA_START অ্যাকশন ডিসপ্যাচ করা হয় (এটি সাধারণত লোডিং স্টেট নির্দেশ করে)।
2. তারপর, API কল করা হয়। যখন ডেটা পাওয়া যাবে, তখন FETCH_DATA_SUCCESS অ্যাকশন ডিসপ্যাচ হবে এবং ডেটা payload হিসেবে পাস করা হবে।
3. যদি কোনো ত্রুটি ঘটে, তবে FETCH_DATA_FAILURE অ্যাকশন ডিসপ্যাচ করা হবে।

Thunk ব্যবহার করে অ্যাকশন ডিসপ্যাচ করা

Redux স্টোরে থাঙ্ক ব্যবহার করতে, আপনি dispatch ফাংশন ব্যবহার করতে পারেন, যেটি অ্যাসিনক্রোনাস ফাংশন ডিসপ্যাচ করার অনুমতি দেয়।

// Store থেকে dispatch করা
store.dispatch(fetchData());

এখানে, fetchData() থাঙ্ক ফাংশন ডিসপ্যাচ করার মাধ্যমে অ্যাসিনক্রোনাস অপারেশনটি শুরু হয় এবং রিডিউসার নতুন স্টেট আপডেট করে।

Redux Thunk এর সুবিধা

1. সহজ ব্যবহৃত: থাঙ্ক ব্যবহারের মাধ্যমে অ্যাসিনক্রোনাস কাজ সহজেই Redux এর মধ্যে পরিচালনা করা যায়।
2. বিভিন্ন কাজের সমাধান: থাঙ্ক বিভিন্ন অ্যাসিনক্রোনাস কাজের জন্য কার্যকর, যেমন API কল, টাইমার, বা ওয়েবসকেট ব্যবহার।
3. স্টেট ম্যানেজমেন্ট: থাঙ্কের মাধ্যমে অ্যাসিনক্রোনাস কাজের ফলাফলকে স্টেট হিসেবে 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-এ অ্যাসিনক্রোনাস একশনগুলো দক্ষভাবে পরিচালনা করার মাধ্যমে অ্যাপ্লিকেশনের স্টেট ম্যানেজমেন্ট আরো শক্তিশালী এবং স্কেলেবল করা যায়।

Redux-এ API call বা Asynchronous actions ম্যানেজ করার জন্য Redux Thunk খুবই জনপ্রিয় একটি মিডলওয়্যার। সাধারণ Redux অ্যাকশনের মাধ্যমে আমরা শুধুমাত্র সিঙ্ক্রোনাস কাজ যেমন স্টেট পরিবর্তন করতে পারি। কিন্তু যখন আমাদের এপিআই কল বা অন্যান্য অ্যাসিঙ্ক্রোনাস কার্যক্রম পরিচালনা করতে হয়, তখন Redux Thunk আমাদের সাহায্য করে।

Redux Thunk কী?

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

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

Redux Thunk মিডলওয়্যার Redux স্টোরে ইনস্টল করা হলে, Redux অ্যাকশন ক্রিয়েটর ফাংশন রিটার্ন করার জন্য প্রস্তুত থাকে। যখন Thunk অ্যাকশন ক্রিয়েটর কল করা হয়, তখন এটি একটি ফাংশন রিটার্ন করে যা dispatch এবং getState ফাংশন গ্রহণ করতে পারে। এই ফাংশনটি অ্যাসিঙ্ক্রোনাস কাজ সম্পন্ন করার পর dispatch ফাংশন ব্যবহার করে Redux স্টেটে নতুন অ্যাকশন পাঠাতে পারে।

Thunk এর ব্যবহার

Redux-এ API কল করার জন্য Thunk ব্যবহারের একটি সাধারণ উদাহরণ দেওয়া হলো। এতে আমরা একটি API কল থেকে ডেটা নিয়ে Redux স্টেটে সেট করতে শিখবো।

স্টেপ 1: Redux Thunk ইনস্টল করা

প্রথমে, আমাদের Thunk মিডলওয়্যার ইনস্টল করতে হবে:

npm install redux-thunk

স্টেপ 2: Redux Store এ Thunk মিডলওয়্যার যুক্ত করা

Store তৈরি করার সময়, applyMiddleware ফাংশন ব্যবহার করে আমরা Thunk মিডলওয়্যারটি যুক্ত করি:

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

// Store তৈরি করা Thunk মিডলওয়্যার দিয়ে
const store = createStore(rootReducer, applyMiddleware(thunk));

export default store;

স্টেপ 3: API Call এর জন্য Thunk অ্যাকশন ক্রিয়েটর তৈরি করা

এখন API কল করার জন্য আমরা Thunk ব্যবহার করে একটি অ্যাকশন ক্রিয়েটর তৈরি করবো। Thunk অ্যাকশন ক্রিয়েটর ফাংশন হিসেবে একটি ফাংশন রিটার্ন করবে, যা আসলে API কল করবে এবং তারপরে Redux স্টেটে ডেটা আপডেট করবে।

// actions.js
export const fetchData = () => {
  return (dispatch) => {
    // API কল করা
    dispatch({ type: 'FETCH_DATA_REQUEST' });

    fetch('https://jsonplaceholder.typicode.com/posts')
      .then((response) => response.json())
      .then((data) => {
        // ডেটা সফলভাবে পাওয়ার পর স্টেট আপডেট করা
        dispatch({
          type: 'FETCH_DATA_SUCCESS',
          payload: data,
        });
      })
      .catch((error) => {
        // যদি API কলটি ব্যর্থ হয়, তাহলে error ম্যানেজ করা
        dispatch({
          type: 'FETCH_DATA_FAILURE',
          payload: error,
        });
      });
  };
};

এখানে, fetchData একটি Thunk অ্যাকশন ক্রিয়েটর যা একটি ফাংশন রিটার্ন করছে। এই ফাংশনটি প্রথমে FETCH_DATA_REQUEST অ্যাকশন ডিসপ্যাচ করে, তারপর API কল করে এবং সফল হলে FETCH_DATA_SUCCESS বা ব্যর্থ হলে FETCH_DATA_FAILURE অ্যাকশন ডিসপ্যাচ করে।

স্টেপ 4: Reducer তৈরি করা

API কলের সাফল্য বা ব্যর্থতার উপর ভিত্তি করে স্টেট পরিবর্তন করার জন্য একটি রিডিউসার তৈরি করা হবে।

// reducer.js
const initialState = {
  loading: false,
  data: [],
  error: '',
};

const dataReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_DATA_REQUEST':
      return { ...state, loading: true };

    case 'FETCH_DATA_SUCCESS':
      return { ...state, loading: false, data: action.payload };

    case 'FETCH_DATA_FAILURE':
      return { ...state, loading: false, error: action.payload };

    default:
      return state;
  }
};

export default dataReducer;

এখানে:

• FETCH_DATA_REQUEST: API কল শুরু হওয়া অবস্থায় loading সত্য হবে।
• FETCH_DATA_SUCCESS: API কল সফল হলে ডেটা স্টেটে যোগ করা হবে।
• FETCH_DATA_FAILURE: যদি কোনো ত্রুটি ঘটে, তা স্টেটে error হিসেবে রাখা হবে।

স্টেপ 5: React কম্পোনেন্টে API কল ব্যবহার করা

এখন, আমরা আমাদের React কম্পোনেন্টে এই অ্যাকশন ক্রিয়েটরটি কল করে API থেকে ডেটা নিয়ে Redux স্টেটে সেট করতে পারি।

// App.js
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchData } from './actions';

const App = () => {
  const dispatch = useDispatch();
  
  // Redux স্টেট থেকে ডেটা এবং লোডিং স্টেট
  const { loading, data, error } = useSelector((state) => state.data);

  useEffect(() => {
    dispatch(fetchData()); // API কল করার জন্য fetchData ডিসপ্যাচ করা
  }, [dispatch]);

  return (
    <div>
      {loading && <h2>Loading...</h2>}
      {error && <h2>Error: {error}</h2>}
      {!loading && !error && (
        <ul>
          {data.map((item) => (
            <li key={item.id}>{item.title}</li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default App;

এখানে:

• useEffect হুক ব্যবহার করে আমরা কম্পোনেন্ট রেন্ডার হওয়া মাত্রই API কল করার জন্য fetchData অ্যাকশন ডিসপ্যাচ করছি।
• useSelector হুক দিয়ে আমরা Redux স্টেট থেকে ডেটা, লোডিং এবং এরর স্টেটকে নিয়ে আসছি।

সারাংশ

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

Redux-এ সাধারণত সিনক্রোনাস (synchronous) একশন ব্যবহৃত হয়, কিন্তু অ্যাসিনক্রোনাস (asynchronous) কাজ, যেমন API কল, ডেটাবেস সংযোগ, বা লম্বা সময় নেওয়া প্রসেস পরিচালনা করার জন্য কিছু অতিরিক্ত কৌশল প্রয়োজন। Redux নিজে অ্যাসিনক্রোনাস কাজের জন্য কোনও বিল্ট-ইন মেকানিজম প্রদান করে না, তবে middleware যেমন Redux Thunk, Redux Saga, অথবা Redux Toolkit এর মাধ্যমে অ্যাসিনক্রোনাস কাজ সহজভাবে পরিচালনা করা যায়।

এছাড়া, অ্যাসিনক্রোনাস কাজের সময় Error Handling (ত্রুটি পরিচালনা) গুরুত্বপূর্ণ, যাতে ব্যবহারকারীরা ত্রুটি সম্পর্কিত সঠিক তথ্য পায় এবং অ্যাপ্লিকেশনটি স্থিতিশীল থাকে।

অ্যাসিনক্রোনাস ডেটা লোড

Redux-এ অ্যাসিনক্রোনাস ডেটা লোড করার জন্য সবচেয়ে সাধারণভাবে ব্যবহৃত Redux Thunk middleware। Thunk হলো একটি ফাংশন যা স্টোর ডিসপ্যাচ করতে পারে এবং যেকোনো অ্যাসিনক্রোনাস কোড পরিচালনা করতে পারে। এখানে অ্যাসিনক্রোনাস ডেটা লোড করার একটি সাধারণ উদাহরণ দেওয়া হলো।

১. Redux Thunk দিয়ে অ্যাসিনক্রোনাস ডেটা লোড

Redux Thunk হলো একটি মiddleware, যা অ্যাসিনক্রোনাস একশন ক্রিয়েটর (action creators) তৈরি করতে সাহায্য করে। অ্যাসিনক্রোনাস কাজের জন্য আপনি Thunk ফাংশন ব্যবহার করতে পারেন, যা অ্যাসিনক্রোনাস কাজ সম্পন্ন হওয়ার পর একশন ডিসপ্যাচ করে।

উদাহরণ:

ধরা যাক, একটি API থেকে টুডু আইটেম লোড করতে হবে।

// Action Types
const FETCH_TODOS_REQUEST = 'FETCH_TODOS_REQUEST';
const FETCH_TODOS_SUCCESS = 'FETCH_TODOS_SUCCESS';
const FETCH_TODOS_FAILURE = 'FETCH_TODOS_FAILURE';

// Action Creators
const fetchTodosRequest = () => ({
  type: FETCH_TODOS_REQUEST
});

const fetchTodosSuccess = (todos) => ({
  type: FETCH_TODOS_SUCCESS,
  payload: todos
});

const fetchTodosFailure = (error) => ({
  type: FETCH_TODOS_FAILURE,
  payload: error
});

// Asynchronous Action Creator using Thunk
const fetchTodos = () => {
  return (dispatch) => {
    dispatch(fetchTodosRequest()); // Request শুরু
    fetch('https://jsonplaceholder.typicode.com/todos')
      .then(response => response.json())
      .then(todos => {
        dispatch(fetchTodosSuccess(todos)); // ডেটা সফলভাবে লোড হলে
      })
      .catch(error => {
        dispatch(fetchTodosFailure(error.message)); // ত্রুটি হলে
      });
  };
};

এখানে:

• fetchTodos ফাংশনটি একটি অ্যাসিনক্রোনাস একশন ক্রিয়েটর, যা API থেকে ডেটা লোড করতে থাঙ্ক ব্যবহার করে।
• প্রথমে fetchTodosRequest ডিসপ্যাচ করা হয়, যার মাধ্যমে রিকোয়েস্ট শুরু হয়েছে এমন সংকেত দেওয়া হয়।
• API কল সফল হলে fetchTodosSuccess ডিসপ্যাচ হয় এবং টুডো ডেটা লোড হয়।
• যদি কোনো ত্রুটি হয়, তবে fetchTodosFailure ডিসপ্যাচ হয়, এবং ত্রুটির বার্তা পাঠানো হয়।

২. Redux Store এবং Reducer

Redux স্টোরে স্টেট পরিবর্তন করার জন্য, রিডিউসার ব্যবহার করা হয়। এখানে একটি রিডিউসার রয়েছে যা অ্যাসিনক্রোনাস ডেটা লোডের স্টেটের পরিবর্তনগুলি পরিচালনা করে।

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

function todosReducer(state = initialState, action) {
  switch (action.type) {
    case FETCH_TODOS_REQUEST:
      return {
        ...state,
        loading: true
      };
    case FETCH_TODOS_SUCCESS:
      return {
        ...state,
        loading: false,
        todos: action.payload
      };
    case FETCH_TODOS_FAILURE:
      return {
        ...state,
        loading: false,
        error: action.payload
      };
    default:
      return state;
  }
}

এখানে:

• FETCH_TODOS_REQUEST একশনের মাধ্যমে loading স্টেটকে true করা হয়, যা UI-তে লোডিং স্পিনার দেখাতে সাহায্য করে।
• FETCH_TODOS_SUCCESS একশনের মাধ্যমে ডেটা লোড হয়ে গেলে loading false করা হয় এবং টুডু আইটেমগুলি স্টেটে রাখা হয়।
• FETCH_TODOS_FAILURE একশনের মাধ্যমে কোনো ত্রুটি ঘটলে error স্টেট আপডেট হয়।

৩. UI এ অ্যাসিনক্রোনাস স্টেট এবং Error Handling

এখন UI-তে অ্যাসিনক্রোনাস স্টেট এবং ত্রুটি প্রদর্শন করা হবে। উদাহরণস্বরূপ, আমরা লোডিং স্টেট এবং ত্রুটি বার্তা দেখাতে পারি।

function TodoList() {
  const dispatch = useDispatch();
  const todos = useSelector(state => state.todos);
  const loading = useSelector(state => state.loading);
  const error = useSelector(state => state.error);

  useEffect(() => {
    dispatch(fetchTodos()); // অ্যাসিনক্রোনাস ডেটা লোডিং শুরু
  }, [dispatch]);

  if (loading) {
    return <div>Loading...</div>; // লোডিং হলে
  }

  if (error) {
    return <div>Error: {error}</div>; // ত্রুটি হলে
  }

  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
}

এখানে:

• useSelector ব্যবহার করে অ্যাপ্লিকেশনের স্টেট থেকে todos, loading, এবং error তথ্য নেওয়া হচ্ছে।
• useEffect হুক ব্যবহার করে, কম্পোনেন্ট লোড হলে fetchTodos() একশন ডিসপ্যাচ করা হচ্ছে।
• যদি ডেটা লোড হচ্ছে, তবে "Loading..." বার্তা দেখানো হচ্ছে।
• যদি কোনো ত্রুটি ঘটে, তবে ত্রুটির বার্তা প্রদর্শিত হচ্ছে।

৪. Redux Toolkit ব্যবহার করে অ্যাসিনক্রোনাস ডেটা লোড এবং Error Handling

Redux Toolkit, যেটি Redux-এর জন্য আধুনিক এবং সহজ উপায় প্রদান করে, সেখানে createAsyncThunk নামের একটি বিল্ট-ইন ফাংশন রয়েছে, যা অ্যাসিনক্রোনাস কাজের জন্য ব্যবহৃত হয়।

উদাহরণ:

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

// Async thunk to fetch todos
export const fetchTodos = createAsyncThunk('todos/fetchTodos', async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos');
  return response.json();
});

// Slice
const todosSlice = createSlice({
  name: 'todos',
  initialState: {
    todos: [],
    loading: false,
    error: ''
  },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchTodos.pending, (state) => {
        state.loading = true;
      })
      .addCase(fetchTodos.fulfilled, (state, action) => {
        state.loading = false;
        state.todos = action.payload;
      })
      .addCase(fetchTodos.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message;
      });
  }
});

export default todosSlice.reducer;

এখানে:

• createAsyncThunk ব্যবহার করা হয়েছে যা অ্যাসিনক্রোনাস API কলকে সহজ করে দেয়।
• extraReducers এর মাধ্যমে অ্যাসিনক্রোনাস ডেটা লোডের তিনটি ধাপ (pending, fulfilled, rejected) হ্যান্ডেল করা হচ্ছে।

সারাংশ

Redux-এ অ্যাসিনক্রোনাস ডেটা লোড এবং ত্রুটি হ্যান্ডলিং করার জন্য:

1. Redux Thunk ব্যবহৃত হয়, যা অ্যাসিনক্রোনাস একশন ক্রিয়েটর তৈরি করতে সাহায্য করে।
2. অ্যাসিনক্রোনাস কাজের সময় স্টেট পরিবর্তন এবং ত্রুটি হ্যান্ডলিং pending, fulfilled, এবং rejected অ্যাকশন দ্বারা পরিচালনা করা হয়।
3. Redux Toolkit এর createAsyncThunk ব্যবহার করে কোডটি আরও সহজ এবং পরিস্কার করা যায়।

এভাবে, অ্যাসিনক্রোনাস কাজগুলি Redux-এর মাধ্যমে সহজে হ্যান্ডেল করা যায় এবং ত্রুটির সময় ব্যবহারকারীকে যথাযথ তথ্য প্রদান করা সম্ভব হয়।