Web Development Reducer কী এবং এর কাজ গাইড ও নোট

Reducer হল Redux-এর একটি গুরুত্বপূর্ণ উপাদান, যা স্টেট পরিবর্তনের জন্য দায়িত্বশীল। এটি একটি পিউর ফাংশন যা অ্যাকশন (Action) এবং বর্তমান স্টেট (State) গ্রহণ করে এবং একটি নতুন স্টেট রিটার্ন করে। Redux-এ স্টেট কখনো সরাসরি পরিবর্তন হয় না; পরিবর্তনের জন্য Reducer ব্যবহৃত হয়।

Reducer কী?

Reducer একটি ফাংশন যা দুইটি প্যারামিটার গ্রহণ করে:

1. State (স্টেট): এটি বর্তমান স্টেট, যা আগে থেকে স্টোরে সংরক্ষিত থাকে। প্রথমবার রিডিউসার চলার সময়, এটি সাধারণত একটি ডিফল্ট স্টেট হতে পারে।
2. Action (একশন): এটি একটি অবজেক্ট যা স্টেট পরিবর্তনের সংকেত দেয় এবং এর মধ্যে একটি type থাকে যা জানায় কোন ধরনের পরিবর্তন ঘটাতে হবে। একশনটি সাধারণত একটি payload ধারণ করে, যা নতুন ডেটা বা অতিরিক্ত তথ্য থাকতে পারে।

Reducer ফাংশনের কাজ হল, একশনটি পেয়ে বর্তমান স্টেটের উপর ভিত্তি করে নতুন স্টেট তৈরি করা। এটি কোনো অবস্থাতেই সরাসরি স্টেট পরিবর্তন করে না, বরং একটি নতুন স্টেট রিটার্ন করে, যাতে পুরনো স্টেট অপরিবর্তিত থাকে।

Reducer এর কাজ

1. স্টেট পরিবর্তন করা: Reducer অ্যাকশন অনুসারে স্টেটের পরিবর্তন ঘটায়।
2. নতুন স্টেট রিটার্ন করা: Reducer কখনোই সরাসরি স্টেট পরিবর্তন করে না, বরং একটি নতুন স্টেট অবজেক্ট রিটার্ন করে।
3. পিউর ফাংশন: Reducer একটি পিউর ফাংশন, অর্থাৎ এটি একই ইনপুটের জন্য সর্বদা একই আউটপুট প্রদান করে এবং কোনো পার্শ্বপ্রতিক্রিয়া (side effect) সৃষ্টি করে না।

Reducer এর উদাহরণ

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

// Initial state
const initialState = {
  todos: [],
};

// Reducer function
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)
      };
    case 'TOGGLE_TODO':
      return {
        ...state,
        todos: state.todos.map(todo =>
          todo.id === action.payload.id
            ? { ...todo, completed: !todo.completed }
            : todo
        )
      };
    default:
      return state;
  }
}

এখানে:

• ADD_TODO: টুডু আইটেম যোগ করতে ব্যবহৃত হয়। নতুন টুডু আইটেম action.payload থেকে আসে এবং এটি স্টেটের todos অ্যারের মধ্যে যোগ করা হয়।
• REMOVE_TODO: টুডু আইটেম মুছে ফেলা হয়। action.payload.id অনুযায়ী আইটেমটি ফিল্টার করা হয়।
• TOGGLE_TODO: টুডু আইটেমের স্ট্যাটাস পরিবর্তন হয়, অর্থাৎ, একটি টুডু আইটেমটি সম্পন্ন (completed) বা অসম্পন্ন (incomplete) হবে।

এছাড়া, যদি কোনো একশন না মেলে (অর্থাৎ ডিফল্ট), তবে পুরনো স্টেট রিটার্ন হয়।

Reducer এর মূল বৈশিষ্ট্য

1. পিউর ফাংশন: Reducer কখনোই স্টেট পরিবর্তন করে না; এটি নতুন স্টেট অবজেক্ট তৈরি করে এবং রিটার্ন করে। এটি কোনো পার্শ্বপ্রতিক্রিয়া সৃষ্টি করে না।
2. স্টেট অপরিবর্তনীয়তা (Immutable State): Reducer স্টেটকে অপরিবর্তনীয় (immutable) রাখে, অর্থাৎ পুরনো স্টেট কখনো সরাসরি পরিবর্তিত হয় না। নতুন স্টেট তৈরি করে ফেরত দেওয়া হয়।
3. স্টেটের মূল অবস্থা (Initial State): Reducer প্রথমবার চলার সময় একটি ডিফল্ট বা ইনিশিয়াল স্টেট গ্রহণ করে।
4. একশন টাইপ (Action Type): Reducer স্টেট পরিবর্তনের জন্য একশনের type এর মাধ্যমে সিদ্ধান্ত নেয় কোন পরিবর্তনটি ঘটবে।

Reducer ফাংশনের কাঠামো

Redux এ, একটি অ্যাপ্লিকেশনে সাধারণত একাধিক রিডিউসার থাকতে পারে। এই রিডিউসারগুলো combineReducers এর মাধ্যমে একত্রিত করা হয়। এর মাধ্যমে, একাধিক রিডিউসার একসাথে কাজ করতে পারে এবং একক স্টোরে সংগঠিত স্টেট সঞ্চিত থাকে।

import { combineReducers } from 'redux';

// Individual reducers
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 { name: action.payload.name };
    default:
      return state;
  }
}

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

এখানে:

• todosReducer: টুডু আইটেমের স্টেট পরিচালনা করে।
• userReducer: ব্যবহারকারীর তথ্যের স্টেট পরিচালনা করে।

এখন, rootReducer দুটি রিডিউসারকে একত্রিত করেছে এবং একটি একক স্টোর তৈরি করেছে।

Reducer এর গুরুত্বপূর্ণ নিয়মাবলী

1. স্টেট অপরিবর্তনীয়তা (State Immutability): Reducer কখনোই স্টেটকে সরাসরি পরিবর্তন করবে না। পুরনো স্টেটের একটি নতুন কপি তৈরি করবে এবং সেটি রিটার্ন করবে।
2. একশন টাইপ (Action Type): Reducer একশন টাইপ দেখে সিদ্ধান্ত নেবে কোন পরিবর্তন ঘটাতে হবে।
3. ফাংশনাল রিডিউসার (Functional Reducers): Reducer একটি পিউর ফাংশন হবে, যেটি একই ইনপুটের জন্য একই আউটপুট দেবে এবং কোনো পার্শ্বপ্রতিক্রিয়া তৈরি করবে না।

সারাংশ

Reducer হলো একটি ফাংশন যা অ্যাকশন এবং বর্তমান স্টেট নিয়ে নতুন স্টেট তৈরি করে। এটি কখনোই সরাসরি স্টেট পরিবর্তন করে না, বরং একটি নতুন স্টেট রিটার্ন করে। Reducer হল Redux-এর একটি পিউর ফাংশন যা স্টেটের অপরিবর্তনীয়তা বজায় রাখে। এতে একাধিক রিডিউসার থাকতে পারে, যেগুলো একত্রিত হয়ে একটি কেন্দ্রীয় স্টোরে স্টেট পরিচালনা করে।