রিডাক্স (Redux)

রিডাক্স  (ইংরেজি: Redux)  হলো একটি স্টেট ম্যানেজমেন্ট লাইব্রেরি, যা মূলত JavaScript অ্যাপ্লিকেশনগুলির জন্য তৈরি করা হয়েছে। এটি একটি কেন্দ্রীয় স্টেটের ধারণাকে ব্যবহার করে এবং ব্যবহারকারীর ইন্টারফেস (UI) এর অবস্থা নিয়ন্ত্রণে সহায়তা করে। Redux সাধারণত React সহ বিভিন্ন ফ্রেমওয়ার্ক এবং লাইব্রেরির সাথে ব্যবহার করা হয়, তবে এটি অন্যান্য জাভাস্ক্রিপ্ট অ্যাপ্লিকেশনেও কাজ করে।

Redux: একটি বিস্তারিত বাংলা টিউটোরিয়াল

ভূমিকা

Redux হলো একটি জাভাস্ক্রিপ্ট স্টেট ম্যানেজমেন্ট লাইব্রেরি, যা বিশেষভাবে জটিল অ্যাপ্লিকেশনের স্টেট (ডেটা) ম্যানেজ করার জন্য ব্যবহৃত হয়। Redux মূলত React সহ বিভিন্ন ফ্রন্ট-এন্ড ফ্রেমওয়ার্কে স্টেট ম্যানেজমেন্ট সহজ করতে ব্যবহৃত হয়। এটি একটি প্রেডিক্টেবল স্টেট কন্টেইনার, যেখানে অ্যাপ্লিকেশনের সব স্টেট এক জায়গায় থাকে, ফলে অ্যাপ্লিকেশনের বিভিন্ন অংশে স্টেট ম্যানেজ করা এবং শেয়ার করা সহজ হয়।

Redux এর মূল উদ্দেশ্য হলো একটি অ্যাপ্লিকেশনের স্টেট এর কেন্দ্রীয় নিয়ন্ত্রণ প্রদান করা, যাতে অ্যাপ্লিকেশনের প্রতিটি পরিবর্তন ট্র্যাক করা যায় এবং তা পূর্বনির্ধারিত নিয়ম অনুসারে পরিচালিত হয়। এটি মূলত একটি Flux আর্কিটেকচারের উপর ভিত্তি করে তৈরি এবং Functional Programming এর ধারণা ব্যবহার করে।

Redux এর বৈশিষ্ট্য

1. Single Source of Truth: Redux-এ পুরো অ্যাপ্লিকেশনের স্টেট একটি সেন্ট্রাল স্টোর-এ সংরক্ষণ করা হয়, যা একক সোর্স হিসেবে কাজ করে।
2. Immutability: Redux-এ স্টেট পরিবর্তন সরাসরি করা যায় না; বরং নতুন স্টেট তৈরি করা হয়। এর ফলে পুরোনো স্টেট অক্ষত থাকে এবং নতুন স্টেট ব্যবহৃত হয়।
3. Predictability: Redux-এ স্টেট ম্যানেজমেন্ট সম্পূর্ণ প্রেডিক্টেবল, কারণ প্রতিটি অ্যাকশন পূর্বনির্ধারিত নিয়ম অনুযায়ী স্টেট পরিবর্তন করে।
4. Middleware Support: Redux middleware সমর্থন করে, যেমন Redux Thunk, যা অ্যাসিনক্রোনাস অ্যাকশন হ্যান্ডেল করতে সহায়ক।
5. Debugging সুবিধা: Redux-এ প্রতিটি স্টেট পরিবর্তন ট্র্যাক করা যায়, যা ডিবাগিং এবং কোডের লজিক বুঝতে খুব সহায়ক।
6. Cross-Framework Compatibility: যদিও Redux সাধারণত React এর সাথে ব্যবহৃত হয়, তবে এটি Vue, Angular, এবং Vanilla JavaScript এর সাথেও ব্যবহার করা যায়।

Redux এর মূল উপাদানসমূহ

Store: Redux-এ store হলো সেই জায়গা যেখানে অ্যাপ্লিকেশনের সমস্ত স্টেট সংরক্ষণ করা হয়। Store-এর মাধ্যমে পুরো অ্যাপ্লিকেশনের স্টেট একসাথে ম্যানেজ করা যায়।

Actions: Actions হলো সেই নির্দেশাবলী যা Redux এর স্টোরে স্টেট পরিবর্তনের জন্য পাঠানো হয়। প্রতিটি Action একটি type এবং প্রয়োজন হলে কিছু payload ডেটা ধারণ করে। উদাহরণস্বরূপ, একটি Action:

{
  type: 'INCREMENT',
  payload: 1
}

Reducers: Reducers হলো ফাংশন, যা স্টোর থেকে actions গ্রহণ করে এবং সেই অনুযায়ী নতুন স্টেট তৈরি করে। Reducers মূলত নির্ধারণ করে কীভাবে অ্যাকশনের ভিত্তিতে স্টেট পরিবর্তিত হবে।

const counterReducer = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + action.payload;
    case 'DECREMENT':
      return state - action.payload;
    default:
      return state;
  }
};

Dispatch: Dispatch হলো সেই পদ্ধতি, যার মাধ্যমে Action গুলো স্টোরে পাঠানো হয়। Dispatch-এর মাধ্যমে Redux Store-এ Action প্রেরণ করা হয়, যা Reducer-এর মাধ্যমে স্টেট পরিবর্তন করে।

store.dispatch({ type: 'INCREMENT', payload: 1 });

Selectors: Selectors হলো ফাংশন, যা Store থেকে স্টেট সংগ্রহ করে এবং UI-তে প্রদর্শন করে।

Redux এর কাজের ধাপ

ধাপ ১: Redux ইনস্টলেশন

Redux ইনস্টল করার জন্য আপনি npm ব্যবহার করতে পারেন। সাধারণত React এর সাথে Redux ব্যবহার করা হয়, তাই আপনি react-redux প্যাকেজও ইনস্টল করতে পারেন:

npm install redux react-redux

ধাপ ২: Redux Store তৈরি করা

Redux Store তৈরি করার জন্য আপনাকে একটি Reducer ফাংশন তৈরি করতে হবে এবং তারপর createStore ফাংশন ব্যবহার করে Store তৈরি করতে হবে।

import { createStore } from 'redux';

// একটি সাধারণ Reducer ফাংশন
const counterReducer = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + action.payload;
    case 'DECREMENT':
      return state - action.payload;
    default:
      return state;
  }
};

// Store তৈরি করা
const store = createStore(counterReducer);

ধাপ ৩: Store থেকে স্টেট গ্রহণ করা

Redux Store থেকে স্টেট গ্রহণ করতে getState() ফাংশন ব্যবহার করা হয়। এটি বর্তমান স্টেট রিটার্ন করে।

console.log(store.getState()); // আউটপুট: 0

ধাপ ৪: Action Dispatch করা

স্টেট পরিবর্তনের জন্য Store-এ Action পাঠাতে dispatch() ফাংশন ব্যবহার করা হয়। উদাহরণস্বরূপ, INCREMENT Action Dispatch করা:

store.dispatch({ type: 'INCREMENT', payload: 1 });
console.log(store.getState()); // আউটপুট: 1

ধাপ ৫: Store Subscribe করা

Redux Store-এ কোনো পরিবর্তন হলে তা পর্যবেক্ষণ করতে subscribe() ফাংশন ব্যবহার করা হয়। এর মাধ্যমে যখনই Store-এ কোনো পরিবর্তন হবে, তখন এটি একটি কলব্যাক ফাংশন চালাবে।

store.subscribe(() => {
  console.log('Current State:', store.getState());
});

store.dispatch({ type: 'INCREMENT', payload: 2 });

ধাপ ৬: React এর সাথে Redux ব্যবহার করা

React এর সাথে Redux ব্যবহার করতে হলে আপনি react-redux লাইব্রেরি ব্যবহার করতে পারেন, যা React কম্পোনেন্টগুলিকে Redux Store-এ সংযুক্ত করতে সহায়তা করে।

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import counterReducer from './reducers';
import App from './App';

// Store তৈরি করা
const store = createStore(counterReducer);

ReactDOM.render(
  

Redux এর সুবিধা

1. Predictable State Management: Redux ব্যবহার করে স্টেট পরিবর্তন সবসময় পূর্বনির্ধারিত নিয়ম অনুযায়ী হয়, তাই অ্যাপ্লিকেশনের স্টেট প্রেডিক্টেবল থাকে।
2. Centralized State: Redux স্টেটকে একটি কেন্দ্রিয় স্টোরে সংরক্ষণ করে, যা অ্যাপ্লিকেশনের বিভিন্ন অংশ থেকে সহজেই অ্যাক্সেসযোগ্য।
3. Debugging সুবিধা: Redux-এ প্রতিটি অ্যাকশন ট্র্যাক করা যায় এবং Redux DevTools এর মাধ্যমে সহজেই ডিবাগিং করা যায়।
4. Middleware Support: Redux বিভিন্ন ধরনের middleware সমর্থন করে, যেমন Redux Thunk, যা অ্যাসিনক্রোনাস অ্যাকশন পরিচালনা করতে সহায়ক।
5. Code Organization: Redux অ্যাপ্লিকেশনের লজিক এবং স্টেট ম্যানেজমেন্টকে সুসংগঠিত রাখে, যা বড় আকারের অ্যাপ্লিকেশন তৈরিতে সহায়ক।

Redux এর অসুবিধা

1. শেখার সময়: Redux এর কনসেপ্ট এবং কাজের পদ্ধতি নতুনদের জন্য কিছুটা জটিল হতে পারে।
2. বয়লারপ্লেট কোড: Redux ব্যবহার করতে গেলে অনেক বয়লারপ্লেট কোড লিখতে হয়, যেমন actions, reducers, এবং store configuration।
3. অতিরিক্ত জটিলতা: ছোট প্রজেক্টের জন্য Redux অতিরিক্ত জটিল হতে পারে, যেখানে এত বেশি স্টেট ম্যানেজমেন্ট প্রয়োজন নেই।

Redux Alternatives

Redux এর বিকল্প হিসেবে কিছু জনপ্রিয় স্টেট ম্যানেজমেন্ট লাইব্রেরি রয়েছে:

1. Context API (React): React এর বিল্ট-ইন Context API ছোট অ্যাপ্লিকেশনের জন্য Redux এর বিকল্প হিসেবে কাজ করতে পারে।
2. MobX: MobX একটি সহজ এবং কার্যকর স্টেট ম্যানেজমেন্ট টুল, যা কম জটিলতার সাথে স্টেট ম্যানেজ করতে সহায়ক।
3. Recoil: Recoil একটি নতুন স্টেট ম্যানেজমেন্ট লাইব্রেরি, যা React এর জন্য বিশেষভাবে ডিজাইন করা হয়েছে।

Redux শেখার জন্য রিসোর্স

1. Redux অফিসিয়াল ডকুমেন্টেশন: https://redux.js.org/
2. YouTube টিউটোরিয়াল: YouTube এ "Redux Tutorial for Beginners" নামে বিভিন্ন ভিডিও পাওয়া যায়।
3. বই: "Redux Essentials" এবং "Learning Redux".

কিওয়ার্ড

• Store: Redux এর সেন্ট্রাল স্টোর, যেখানে অ্যাপ্লিকেশনের স্টেট সংরক্ষিত থাকে।
• Action: Action হলো একটি নির্দেশনা, যা স্টোরকে বলে কীভাবে স্টেট পরিবর্তন করতে হবে।
• Reducer: Reducer হলো একটি ফাংশন, যা অ্যাকশনের ভিত্তিতে স্টেট পরিবর্তন করে।
• Dispatch: Dispatch হলো পদ্ধতি, যার মাধ্যমে Action স্টোরে পাঠানো হয়।
• Middleware: Middleware হলো অ্যাপ্লিকেশনের মধ্যবর্তী স্তর, যা অ্যাকশন এবং স্টেট পরিবর্তনের মধ্যে অতিরিক্ত কাজ করতে পারে।

উপসংহার

Redux হলো একটি শক্তিশালী এবং প্রেডিক্টেবল স্টেট ম্যানেজমেন্ট টুল, যা জটিল এবং বড় আকারের অ্যাপ্লিকেশনের স্টেট ম্যানেজ করতে বিশেষভাবে কার্যকর। Redux স্টেট ম্যানেজমেন্টকে কেন্দ্রীয় নিয়ন্ত্রণে রাখে, যা অ্যাপ্লিকেশন ডেভেলপমেন্টকে সুসংগঠিত এবং কার্যকর করে তোলে। যদিও Redux ব্যবহার করতে গেলে কিছু বয়লারপ্লেট কোড লিখতে হয়, তবে এটি বড় আকারের অ্যাপ্লিকেশন এবং জটিল স্টেট ম্যানেজমেন্টের জন্য একটি আদর্শ টুল।