Reducer কিভাবে স্টেট পরিবর্তন করে?

Reducer Redux-এ একটি ফাংশন যা অ্যাপ্লিকেশনের স্টেট পরিবর্তনের জন্য দায়িত্ব পালন করে। এটি অ্যাকশন (Action) এবং বর্তমান স্টেট (State) গ্রহণ করে এবং একটি নতুন স্টেট রিটার্ন করে। Reducer কখনোই সরাসরি স্টেট পরিবর্তন করে না, বরং একটি নতুন স্টেট অবজেক্ট তৈরি করে এবং সেটি রিটার্ন করে। Redux-এ স্টেট অপরিবর্তনীয় (immutable) থাকে, অর্থাৎ স্টেটের কপি তৈরি করে পরিবর্তন করা হয়, যাতে আগের স্টেটটি অক্ষত থাকে।

Reducer কী?

Reducer একটি পিউর ফাংশন (Pure Function) যা নিম্নলিখিত দুটো ইনপুট গ্রহণ করে:

1. State (বর্তমান স্টেট): এটি স্টোরে থাকা বর্তমান অবস্থা।
2. Action (একশন): এটি একটি অবজেক্ট, যা পরিবর্তনের সংকেত প্রদান করে এবং সাধারণত একটি type এবং প্রয়োজনীয় ডেটা (payload) ধারণ করে।

Reducer এই দুটো ইনপুট গ্রহণ করে একটি নতুন স্টেট রিটার্ন করে, যা স্টোরে সংরক্ষিত হয়। Reducer কখনোই স্টেট পরিবর্তন করে না; বরং, এটি প্রতিবার একটি নতুন কপি তৈরি করে এবং রিটার্ন করে।

Reducer কিভাবে কাজ করে?

Redux-এর স্টেটে কোনো পরিবর্তন ঘটানোর জন্য, reducer-কে action এবং current state দেয়া হয়। রিডিউসার একশন অনুসারে স্টেটের নতুন কপি তৈরি করে। এটি একাধারে স্টেটকে অপরিবর্তনীয় রাখে এবং প্রতিটি একশনের জন্য সঠিক পরিবর্তন করতে সহায়তা করে।

Reducer এর উদাহরণ:

ধরা যাক, একটি অ্যাপ্লিকেশন রয়েছে যেখানে ব্যবহারকারীরা টুডু আইটেম যোগ করতে পারেন এবং টুডু আইটেম গুলি মুছতে পারেন।

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

// Reducer
function todoReducer(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;
  }
}

এখানে:

• State = initialState: ডিফল্ট স্টেট, যেখানে টুডু আইটেমের কোনো তালিকা নেই।
• Reducer: todoReducer একশন অনুযায়ী স্টেট পরিবর্তন করবে। এক্ষেত্রে ADD_TODO বা REMOVE_TODO একশন অনুযায়ী টুডু আইটেম যোগ বা মুছে ফেলা হবে।

Reducer এর কাজের ধাপ:

1. Current State গ্রহণ করা: রিডিউসারটি স্টোরের বর্তমান স্টেট নেয়।
2. Action গ্রহণ করা: একশনটি নেয়, যা স্টেট পরিবর্তন করার সংকেত দেয় (যেমন, ADD_TODO, REMOVE_TODO)।
3. New State তৈরি করা: রিডিউসার বর্তমান স্টেট থেকে একটি নতুন স্টেট তৈরি করে এবং ঐ পরিবর্তনগুলো রিটার্ন করে। পুরোনো স্টেট কখনোই পরিবর্তন করা হয় না।
4. New State রিটার্ন করা: তৈরি করা নতুন স্টেটটি রিডিউসার রিটার্ন করে এবং স্টোরে সংরক্ষিত হয়।

স্টেট অপরিবর্তনীয়তা (Immutability) এবং Reducer

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

উদাহরণ: (Immutability এর গুরুত্ব)

// ভুল
state.todos.push(action.payload); // এটি সরাসরি স্টেট পরিবর্তন করছে, যা ঠিক নয়

// সঠিক
return {
  ...state,
  todos: [...state.todos, action.payload] // নতুন কপি তৈরি করা হচ্ছে
};

এখানে:

• Push মেথড ব্যবহার করলে স্টেট সরাসরি পরিবর্তিত হবে, যা Redux এর মূল নীতি বিরোধী।
• Spread Operator (...) ব্যবহার করলে একটি নতুন কপি তৈরি হয়, যা স্টেটের অপরিবর্তনীয়তা বজায় রাখে।

Reducer এবং Action

রিডিউসার ফাংশনটি একটি switch-case স্টেটমেন্টের মাধ্যমে একশন অনুসারে স্টেট পরিবর্তন করে। সাধারণত, একশনের type এর উপর ভিত্তি করে রিডিউসার সিদ্ধান্ত নেয় কীভাবে স্টেট পরিবর্তন করবে।

উদাহরণ:

function todoReducer(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; // যদি কোনো একশন না পাওয়া যায়, তাহলে স্টেট অপরিবর্তিত থাকবে
  }
}

এখানে:

• ADD_TODO: একটি নতুন টুডু আইটেম যোগ করার জন্য, বর্তমান todos অ্যারের উপর নতুন আইটেম যোগ করে একটি নতুন স্টেট রিটার্ন করা হচ্ছে।
• REMOVE_TODO: একটি নির্দিষ্ট টুডু আইটেম মুছে ফেলার জন্য, filter মেথড ব্যবহার করা হচ্ছে, যা একটি নতুন অ্যারে তৈরি করে এবং সেটি রিটার্ন করে।

Reducer এর ব্যবহার

Reducer ফাংশনটির ব্যবহার স্টেট পরিবর্তনের জন্য অপরিহার্য। এটি একটি নির্দিষ্ট এবং পূর্বানুমানযোগ্য উপায়ে স্টেট পরিবর্তন নিশ্চিত করে, যার ফলে অ্যাপ্লিকেশনটি ডিবাগ এবং মেইনটেন করা সহজ হয়।

Reducer এর সুবিধা:

1. পূর্বানুমানযোগ্য: প্রতিটি একশন এবং রিডিউসারের মাধ্যমে স্টেটের পরিবর্তন পূর্বানুমানযোগ্য হয়।
2. ডিবাগ সহজ: স্টেটের সমস্ত পরিবর্তন রিডিউসারের মাধ্যমে হওয়ায়, ডিবাগিং সহজ হয়ে যায়।
3. পরিবর্তনশীল নয় (Immutable): স্টেট কখনো সরাসরি পরিবর্তন করা হয় না, বরং নতুন কপি তৈরি করা হয়, যা একটি নির্ভরযোগ্য এবং সুরক্ষিত স্টেট ম্যানেজমেন্ট সিস্টেম তৈরি করে।
4. কমপ্লেক্স স্টেট ম্যানেজমেন্ট: যখন অ্যাপ্লিকেশনটি বড় হয়, তখন বিভিন্ন অংশে স্টেট পরিবর্তন করার জন্য রিডিউসার এবং অ্যাকশনগুলো খুব কার্যকরী।

সারাংশ

Reducer হলো Redux-এর একটি মূল উপাদান, যা অ্যাকশনের ভিত্তিতে স্টেট পরিবর্তন করে। এটি একটি পিউর ফাংশন হিসেবে কাজ করে, যা স্টেটের নতুন কপি তৈরি করে এবং রিটার্ন করে। স্টেট কখনো সরাসরি পরিবর্তিত হয় না, বরং এটি অপরিবর্তনীয় (immutable) রাখা হয়। Reducer রিডিউসার ফাংশনের মাধ্যমে স্টেটের কাঠামো এবং আচরণ সংজ্ঞায়িত করা হয়, এবং এটি অ্যাকশনের ধরণ অনুযায়ী স্টেটকে পরিবর্তন করে।