Multiple Reducers তৈরি এবং কম্বাইন করা

Redux অ্যাপ্লিকেশনে একাধিক reducer তৈরি এবং কম্বাইন (combine) করার প্রক্রিয়া অত্যন্ত গুরুত্বপূর্ণ, কারণ এটি স্টেটের বিভিন্ন অংশ আলাদা করে ম্যানেজ করার সুযোগ দেয়। সাধারণত অ্যাপ্লিকেশনগুলিতে একাধিক ধরনের স্টেট থাকে, এবং প্রতিটি ধরনের স্টেটকে আলাদা রিডিউসারের মাধ্যমে নিয়ন্ত্রণ করা হয়।

এটি বিশেষত বড় অ্যাপ্লিকেশনগুলিতে প্রয়োজনীয় হয়, যেখানে বিভিন্ন ধরনের স্টেটের জন্য আলাদা রিডিউসার প্রয়োজন হয়। combineReducers ফাংশন ব্যবহার করে আমরা একাধিক রিডিউসারকে একটি রুট রিডিউসারে একত্রিত (combine) করতে পারি।

Multiple Reducers কীভাবে কাজ করে?

Redux-এ, স্টেট সাধারণত একটি বড় অবজেক্ট হিসেবে থাকে, এবং স্টেটের বিভিন্ন অংশের জন্য আলাদা আলাদা রিডিউসার থাকতে পারে। প্রতিটি রিডিউসার একটি নির্দিষ্ট অংশের স্টেটকে পরিবর্তন করে। combineReducers ফাংশন ব্যবহার করে আমরা একাধিক রিডিউসারকে একটি একক রিডিউসারে কম্বাইন (combine) করি।

combineReducers এর ব্যবহার

combineReducers Redux-এর একটি বিল্ট-ইন ফাংশন, যা একাধিক রিডিউসারকে একত্রিত করতে ব্যবহৃত হয়। এটি প্রতিটি রিডিউসারকে একটি নির্দিষ্ট স্টেট স্লাইসের জন্য দায়িত্ব প্রদান করে এবং সব রিডিউসারকে একটি একক রিডিউসারে কম্বাইন করে।

combineReducers এর সাধারণ কাঠামো:

import { combineReducers } from 'redux';

// প্রথম রিডিউসার
function todosReducer(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [...state, action.payload];
    default:
      return state;
  }
}

// দ্বিতীয় রিডিউসার
function userReducer(state = { name: '' }, action) {
  switch (action.type) {
    case 'SET_USER':
      return { ...state, name: action.payload };
    default:
      return state;
  }
}

// কম্বাইন করা
const rootReducer = combineReducers({
  todos: todosReducer,
  user: userReducer
});

export default rootReducer;

এখানে:

• todosReducer একটি রিডিউসার যা টুডু আইটেমগুলির স্টেট পরিচালনা করে।
• userReducer একটি রিডিউসার যা ইউজারের তথ্যের স্টেট পরিচালনা করে।
• combineReducers ফাংশনটি এই দুটি রিডিউসারকে একটি রুট রিডিউসারে একত্রিত করছে, যেখানে todos এবং user দুটি আলাদা স্টেট স্লাইস।

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

combineReducers একটি অবজেক্ট গ্রহণ করে, যেখানে প্রতিটি কীগুলি রিডিউসারের নাম এবং মান হলো সংশ্লিষ্ট রিডিউসার ফাংশন। এই ফাংশনটি একত্রিত রিডিউসার রিটার্ন করে, যা স্টোরের মাধ্যমে স্টেট আপডেট করতে ব্যবহৃত হয়।

উদাহরণস্বরূপ, স্টোরে যে স্টেট থাকবে, তা হবে:

{
  todos: [ ... ],  // todosReducer দ্বারা পরিচালিত
  user: { name: '' } // userReducer দ্বারা পরিচালিত
}

এভাবে, todos এবং user এর জন্য আলাদা স্টেট রয়েছে, এবং প্রতিটি স্টেটকে আলাদা রিডিউসার দ্বারা পরিচালিত করা হচ্ছে। যখন কোনো অ্যাকশন ডেসপ্যাচ করা হয়, তখন প্রতিটি রিডিউসার সেই অ্যাকশনটি পরীক্ষা করে, এবং যদি তা প্রযোজ্য হয়, স্টেট পরিবর্তন করে।

Multiple Reducers এর ব্যবহারের সুবিধা

1. কোডের গঠন: একাধিক রিডিউসার ব্যবহার করে, অ্যাপ্লিকেশনটির স্টেটকে আলাদা আলাদা অংশে বিভক্ত করা যায়, যা কোডের গঠন পরিষ্কার এবং সহজ করে।
2. স্টেট ম্যানেজমেন্ট: আলাদা রিডিউসার ব্যবহার করলে স্টেটের বিভিন্ন অংশকে আলাদা আলাদা ভাবে নিয়ন্ত্রণ করা সহজ হয়।
3. স্কেলেবিলিটি: অ্যাপ্লিকেশন বড় হলে নতুন রিডিউসার যোগ করা সহজ হয়। একাধিক রিডিউসার কম্বাইন করে অ্যাপ্লিকেশনটি আরও স্কেলেবল এবং মেইনটেনেবল হয়।
4. রিডিউসারের পুনঃব্যবহারযোগ্যতা: একটি রিডিউসার শুধুমাত্র নির্দিষ্ট স্টেট স্লাইসের জন্য কাজ করে, তাই এটি অন্য জায়গায় পুনঃব্যবহার করা সম্ভব।

combineReducers এর ব্যবহার উদাহরণ

ধরা যাক, আমাদের একটি অ্যাপ্লিকেশন আছে যেখানে টুডু লিস্ট এবং ইউজার প্রোফাইল দুইটি আলাদা ডাটা স্টেট রয়েছে। আমরা এই দুটি স্টেটের জন্য আলাদা রিডিউসার তৈরি করে সেগুলো কম্বাইন করব।

স্টেপ 1: আলাদা রিডিউসার তৈরি

// টুডু রিডিউসার
const initialState = {
  todos: []
};

function todosReducer(state = initialState, action) {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        ...state,
        todos: [...state.todos, action.payload]
      };
    case 'REMOVE_TODO':
      return {
        ...state,
        todos: state.todos.filter(todo => todo.id !== action.payload.id)
      };
    default:
      return state;
  }
}

// ইউজার রিডিউসার
const userInitialState = {
  user: { name: '', age: null }
};

function userReducer(state = userInitialState, action) {
  switch (action.type) {
    case 'SET_USER':
      return {
        ...state,
        user: action.payload
      };
    default:
      return state;
  }
}

স্টেপ 2: combineReducers ব্যবহার করে রিডিউসার কম্বাইন করা

import { combineReducers } from 'redux';

const rootReducer = combineReducers({
  todos: todosReducer,
  user: userReducer
});

export default rootReducer;

স্টেপ 3: Redux Store তৈরি করা

import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

combineReducers এর আরো উন্নত ব্যবহার

Redux-এ বিভিন্ন ধরনের স্টেট থাকতে পারে যেমন:

• নেটওয়ার্ক স্টেট: যা API কলের স্টেট ম্যানেজমেন্ট করবে।
• UI স্টেট: যা UI এর ভিউ, যেমন লোডিং স্টেট, শো/হাইড মডেল ইত্যাদি পরিচালনা করবে।
• অথেন্টিকেশন স্টেট: যা লগইন, লগআউট ইত্যাদি ম্যানেজ করবে।

এইসব স্টেটের জন্য আলাদা আলাদা রিডিউসার তৈরি করতে পারেন এবং সবগুলোকে combineReducers এর মাধ্যমে একত্রিত করতে পারেন।

সারাংশ

Multiple Reducers তৈরি করা এবং combineReducers ফাংশন ব্যবহার করে একত্রিত করা Redux অ্যাপ্লিকেশনে স্টেট ম্যানেজমেন্টকে আরও পরিষ্কার, স্কেলেবল এবং মেইনটেনেবল করে। একাধিক রিডিউসার ব্যবহার করলে স্টেটের বিভিন্ন স্লাইসের জন্য আলাদা রিডিউসার তৈরি করা সহজ হয়, এবং এতে কোডের গঠন পরিষ্কার ও পুনঃব্যবহারযোগ্য হয়। combineReducers একটি গুরুত্বপূর্ণ টুল যা বিভিন্ন রিডিউসারকে একত্রিত করে অ্যাপ্লিকেশনের স্টেট ম্যানেজমেন্টকে আরও শক্তিশালী করে তোলে।