Why Use Redux in React? Complete Guide in Bangla

React ব্যবহার করার সময় কি কখনো আপনাদের মনে হয়েছে, "এই কম্পোনেন্ট থেকে ঐ কম্পোনেন্টে ডেটা পাঠানো এত জটিল কেন?" বা, "State ম্যানেজমেন্ট এর জন্য আরও ভালো উপায় কি হতে পারে?

আমরা জানি, React আমাদের কম্পোনেন্টগুলোর মধ্যে state শেয়ার করার জন্য খুবই কার্যকর। কিন্তু যখন অ্যাপ্লিকেশন বড় হতে থাকে, তখন এই state ম্যানেজমেন্ট এতটা জটিল হয়ে যায় যে কোড পড়া এবং মেইনটেন করা যেন একটা দুঃস্বপ্ন হয়ে দাঁড়ায়। এই সমস্যাগুলো সমাধানের জন্য Redux এসেছে। Redux এমন একটি লাইব্রেরি যা আমাদের state ম্যানেজমেন্টকে আরও সহজ এবং কার্যকর করে তোলে। এই পোস্টে আমরা খুব গভীরভাবে Redux-এর প্রতিটি দিক আলোচনা করবো।

আসুন, আমরা একবার ভাবি একটি React অ্যাপ্লিকেশন তৈরি করেছি যেখানে ডেটা Parent Component থেকে Child Component হয়ে আরও অনেক Nested Component পর্যন্ত যেতে হবে। এখন প্রতিটি লেভেলে ডেটা পাঠানোর জন্য props ব্যবহার করতে হচ্ছে। প্রথমে এটা সহজ মনে হলেও, অ্যাপ বড় হতে থাকলে এটা খুব জটিল হয়ে যায়। এই সমস্যার নাম হলো Props Drilling।

ধরি, আমাদের App কম্পোনেন্টের কাছে একটি state আছে, এবং সেই state আমরা AddToCartButton কম্পোনেন্টে পাঠাতে চাই। কিন্তু সমস্যা হলো, MainContent, ProductList আর Proeduct কম্পোনেন্টের মধ্য দিয়ে সেই state পাঠানো ছাড়া অন্য কোনো উপায় নেই। ফলে, এমন অনেক props ডেটা মাঝের কম্পোনেন্টে পৌঁছে যায় যেগুলো তাদের দরকারই নেই।

Props Drilling এর সমস্যা গুলো হলোঃ

1. কোড জটিল হয়ে যায়।
2. মাঝের কম্পোনেন্টগুলো অপ্রয়োজনীয় ডেটা বহন করে।
3. ডেটা শেয়ারিং ত্রুটিপূর্ণ এবং সময়সাপেক্ষ হয়।

React আমাদের জন্য Context API নামের একটি সমাধান এনেছে, যা Props Drilling সমস্যা অনেকটা সমাধান করতে পারে। Context API ব্যবহার করলে আমরা ডেটা সরাসরি প্রয়োজনীয় কম্পোনেন্টে পাঠাতে পারি, মাঝের কম্পোনেন্টগুলো এড়িয়ে। এটি নিঃসন্দেহে একটি ভালো সমাধান। তবে বড় অ্যাপ্লিকেশনের ক্ষেত্রে Context API এর কিছু সীমাবদ্ধতা রয়েছে।

Problems with Context API

1. Performance Issues: যখন Context এর state পরিবর্তিত হয়, তখন সেই Context এর নিচের সব কম্পোনেন্ট একসাথে re-render হয়। ফলে বড় অ্যাপ্লিকেশনে পারফরমেন্স সমস্যা দেখা দেয়।
2. Nested Providers: Context API এর Nested Providers ব্যবহার করলে কোড জটিল হয়ে যায়। একাধিক Context ব্যবহার করার ফলে Provider এর ভেতরে Provider থাকে, যাকে Provider Hell বলা হয়।
3. Scalability Issues: Context API ছোট বা মাঝারি অ্যাপ্লিকেশনের জন্য ভালো, কিন্তু বড় এবং জটিল অ্যাপ্লিকেশনের state ম্যানেজমেন্টের জন্য এটি পর্যাপ্ত নয়।"

তাহলে, Context API এর এই সীমাবদ্ধতাগুলো ছাড়িয়ে যাওয়ার জন্য আমাদের প্রয়োজন Redux। Redux আমাদের state ম্যানেজমেন্ট আরও সহজ এবং কার্যকর করতে সাহায্য করে। আসুন, এখন আমরা Redux কীভাবে কাজ করে এবং এটি কীভাবে আমাদের state ম্যানেজমেন্ট সহজ করে তোলে, তা নিয়ে আলোচনা করি।

---

Redux কী? এটি একটি প্রশ্ন যা অনেকের মনে আসে, বিশেষ করে যারা React-এ নতুন। Redux হলো এমন একটি লাইব্রেরি, যা JavaScript অ্যাপ্লিকেশনের জন্য state ম্যানেজমেন্ট সহজ করে। কিন্তু প্রশ্ন হলো কেন আমরা Redux ব্যবহার করবো? Redux কীভাবে কাজ করে? চলুন এই প্রশ্নগুলোর উত্তর খুঁজি।

Redux হলো একটি predictable state container। এর মানে হলো, এটি আমাদের অ্যাপ্লিকেশনের state বা data কে একটি নির্দিষ্ট নিয়ম মেনে এক জায়গায় সংরক্ষণ করে। ফলে state পরিবর্তন কোথায়, কখন এবং কীভাবে হচ্ছে, তা সহজেই বোঝা যায়।

Redux এর সবচেয়ে বড় সুবিধা হলো, এটি predictable। এর মানে, একবার state পরিবর্তনের নিয়ম (reducers) সেট করলে, state সবসময় নির্দিষ্ট নিয়মেই পরিবর্তিত হবে।

Redux ব্যবহারের কয়েকটি মূল কারণ হলো:

1. Centralized State Management: Redux আমাদের state এক জায়গায় সংরক্ষণ করতে দেয়। ফলে পুরো অ্যাপ্লিকেশনে ডেটা ম্যানেজ করা সহজ হয়।
2. Predictability: State কখন এবং কীভাবে পরিবর্তিত হচ্ছে, তা সবসময় একই নিয়ম মেনে চলে। এটি debug করা সহজ করে।
3. Time Travel Debugging: Redux DevTools ব্যবহার করে আমরা আমাদের state পরিবর্তনের ইতিহাস দেখতে এবং সেটা undo বা redo করতে পারি।

Redux কীভাবে কাজ করে, তা বোঝার জন্য আমাদের তিনটি গুরুত্বপূর্ণ জিনিস জানতে হবে Store, Action, এবং Reducer।

1. Store: Redux Store হলো সেই জায়গা যেখানে আমাদের অ্যাপ্লিকেশনের পুরো state সংরক্ষিত হয়। এটি হলো Redux এর মস্তিষ্ক। ধরি, একটি React অ্যাপ্লিকেশন আছে, যেখানে একটি counter state রাখতে হবে। এই state আমরা Store-এ সংরক্ষণ করবো, যাতে অ্যাপের যেকোনো জায়গা থেকে এটি ব্যবহার করা যায়।
2. Action: Action হলো এমন একটি জাভাস্ক্রিপ্ট অবজেক্ট, যা বলে দেয় অ্যাপ্লিকেশনে কী করতে হবে। Action হলো Redux এর মাধ্যমে state পরিবর্তনের প্রথম ধাপ।
3. Reducer: Reducer হলো একটি pure function, যা বলে দেয় Action এর ভিত্তিতে state কীভাবে পরিবর্তিত হবে। এটি আগের state এবং নতুন action নিয়ে কাজ করে এবং একটি নতুন state রিটার্ন করে।

Redux-এর কাজ করার পুরো প্রক্রিয়াটি একটি সাইকেলের মতো।

1. Dispatch an Action: কম্পোনেন্ট থেকে একটি Action পাঠানো হয়।
2. Reducer Processes the Action: Reducer Action অনুযায়ী state আপডেট করে।
3. Store Updates the State: Store নতুন state ধরে রাখে, যা কম্পোনেন্টে পৌঁছে যায়।

---

Redux শেখার এই পর্যায়ে আমরা বুঝেছি Redux কীভাবে কাজ করে। কিন্তু প্রশ্ন হলো Redux ব্যবহার করা কি সবসময় সহজ? সত্যি কথা বলতে, Vanilla Redux (Redux এর সাধারণ ব্যবহার) কখনো কখনো জটিল ও ক্লান্তিকর হয়ে যায়।

প্রথমে আমরা দেখবো Vanilla Redux ব্যবহারের কিছু সমস্যাঃ

1. Boilerplate Code: Redux এ অনেক boilerplate কোড লিখতে হয়। প্রতিটি action, reducer, এবং store সেটআপ করার জন্য প্রচুর সময় লাগে।
2. Complex Configuration: Store configure করতে middleware যোগ করা এবং enhancer সেট করা অনেক সময় জটিল হয়ে যায়।
3. Immutability Management: Reducer ফাংশন লেখার সময় state কে immutable রাখতে হবে। এটা নিশ্চিত করার জন্য অনেক manual কোড লিখতে হয়, যা নতুনদের জন্য ভীতিকর।
4. Debugging and Scaling Issues: Redux DevTools সাপোর্ট থাকলেও vanilla Redux-এ debugging এবং বড় অ্যাপ্লিকেশন ম্যানেজ করা কঠিন হয়ে যায়।

এই সব সমস্যার সমাধান নিয়ে এসেছে Redux Toolkit। এটি Redux ব্যবহারের জন্য একটি আধুনিক, সহজ এবং opinionated উপায়।

Redux Toolkit কী?

Redux Toolkit হলো Redux এর জন্য একটি অফিসিয়াল প্যাকেজ, যা আমাদের state ম্যানেজমেন্ট আরও সহজ ও কার্যকর করতে সাহায্য করে। এটি Redux এর সাধারণ কাজগুলোকে সহজ করে এবং boilerplate কোড কমায়।

কেন Redux Toolkit ব্যবহার করা উচিত?

1. Simpler Store Configuration: Redux Toolkit এর configureStore মেথড দিয়ে খুব সহজেই store configure করা যায়। Middleware এবং Redux DevTools সাপোর্ট অটোমেটিকভাবে এড করা থাকে।
2. Built-in createSlice: createSlice আমাদের action এবং reducer একসঙ্গে তৈরি করতে দেয়। ফলে কোড লেখার ঝামেলা কমে যায়।
3. Immutability with Immer: Redux Toolkit এর ভিতরে Immer নামে একটি লাইব্রেরি ব্যবহার করা হয়। এটি state কে immutable রাখতে সাহায্য করে। ফলে nested state পরিবর্তন করা সহজ হয়।
4. Redux DevTools and Middleware Integration: Redux Toolkit DevTools এবং middleware এর ইন্টিগ্রেশন অটোমেটিকভাবে দেয়, যা debugging সহজ করে।
5. Scalable and Maintainable: Redux Toolkit বড় অ্যাপ্লিকেশন ম্যানেজ করার জন্য আদর্শ। এটি কোড সহজে পড়া এবং মেইনটেইন করা সম্ভব করে।

Redux Toolkit Redux ব্যবহারের জন্য সহজ, আধুনিক এবং efficient উপায়। Vanilla Redux এর তুলনায় এটি দ্রুত, কম কোডে কাজ করে এবং বড় প্রজেক্ট পরিচালনার জন্য উপযুক্ত।

---

আমরা Redux এবং Redux Toolkit সম্পর্কে অনেক কিছু শিখেছি। কিন্তু এখন প্রশ্ন হলো React অ্যাপ্লিকেশনে Redux কীভাবে ব্যবহার করবো? এর জন্য আমাদের দরকার একটি ব্রিজ বা সংযোগ, যা React এবং Redux এর মধ্যে কাজ করবে। এই সংযোগের নাম হলো React-Redux।

React-Redux হলো একটি অফিসিয়াল লাইব্রেরি, যা React কম্পোনেন্ট এবং Redux store-এর মধ্যে যোগাযোগ স্থাপন করতে সাহায্য করে। এটি Redux এর state এবং actions কে React-এর সাথে ব্যবহার করার একটি সহজ এবং কার্যকর উপায়।

কেন আমরা React-Redux ব্যবহার করবো?

1. Simplifies State Access: Redux এর state এবং actions সরাসরি React কম্পোনেন্টে অ্যাক্সেস করা জটিল হতে পারে। React-Redux এটি সহজ করে।
2. Efficient Updates: React-Redux Redux state-এর পরিবর্তনের উপর ভিত্তি করে React কম্পোনেন্টগুলোকে efficient ভাবে আপডেট করে।
3. Built-in Best Practices: React-Redux অনেকগুলো built-in best practices ফলো করে। এটি আমাদের জন্য boilerplate কোড কমায় এবং performance উন্নত করে।

Core Concepts of React-Redux

1. Provider Component: React-Redux একটি Provider কম্পোনেন্ট প্রদান করে, যা Redux store কে পুরো React অ্যাপ্লিকেশনে access করতে দেয়।

import { Provider } from 'react-redux';
import store from './store';

const App = () => (
  <Provider store={store}>
    <MyComponent />
  </Provider>
);

1. Hooks for State and Dispatch: React-Redux ব্যবহার করার জন্য আমরা দুটি গুরুত্বপূর্ণ হুক ব্যবহার করি useSelector এবং useDispatch। - useSelector: Redux store থেকে state পড়ার জন্য। - useDispatch: Redux store-এ action পাঠানোর জন্য।

import { useSelector, useDispatch } from 'react-redux';
import { increment } from './counterSlice';

const Counter = () => {
  const count = useSelector((state) => state.counter.count);
  const dispatch = useDispatch();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch(increment())}>Increment</button>
    </div>
  );
};

1. Optimized Re-renders: React-Redux এর হুক এবং connect মেথড state পরিবর্তনের সময় কম্পোনেন্টগুলোকে optimized ভাবে re-render করতে সাহায্য করে।

React-Redux React এবং Redux-এর মধ্যে একটি ব্রিজ তৈরি করে, যা ডেটা ম্যানেজমেন্টকে সহজ এবং কার্যকর করে। Provider, useSelector, এবং useDispatch এর মতো টুল ব্যবহার করে আমরা Redux এর state এবং actions React কম্পোনেন্টে আনতে পারি।

---

Redux এর বেসিক মেকানিজম আমরা শিখেছি। কিন্তু রিয়েল ওয়ার্ল্ড অ্যাপ্লিকেশনগুলোতে অনেক সময় আমাদের asynchronous ডেটা ফেচিং বা জটিল লজিক হ্যান্ডল করতে হয়। এখন আমরা Redux এর কিছু অ্যাডভান্সড টপিক, যেমন middleware, async actions, এবং debugging tools সম্পর্কে জানবো।

Middleware হলো Redux-এর জন্য একটি powerful tool, যা actions এবং reducers এর মধ্যে কাজ করে। এটি action dispatch হওয়ার পর এবং reducer পর্যন্ত পৌঁছানোর আগে এক্সিকিউট হয়।

Why Use Middleware?

1. Logging: Track actions dispatched and state changes.
2. Error Handling: Catch errors during action processing.
3. Async Operations: Handle tasks like API calls or delayed updates.

জটিল অ্যাপ্লিকেশনে আমাদের অনেক সময় asynchronous ডেটা ফেচ করতে হয়। Redux Toolkit এর createAsyncThunk ফাংশন এটি সহজ করে।

Step-by-Step Example: Fetching API Data

1. Define Async Thunk

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

export const fetchUserData = createAsyncThunk(
  'user/fetchUserData',
  async (userId, thunkAPI) => {
    const response = await fetch(`/api/users/${userId}`);
    return response.json();
  }
);

2. Add Thunk to Slice

const userSlice = createSlice({
  name: 'user',
  initialState: { data: null, loading: false, error: null },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchUserData.pending, (state) => {
        state.loading = true;
      })
      .addCase(fetchUserData.fulfilled, (state, action) => {
        state.loading = false;
        state.data = action.payload;
      })
      .addCase(fetchUserData.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message;
      });
  },
});

export default userSlice.reducer;

3. Use in Component

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchUserData } from './userSlice';

const UserProfile = ({ userId }) => {
  const dispatch = useDispatch();
  const { data, loading, error } = useSelector((state) => state.user);

  useEffect(() => {
    dispatch(fetchUserData(userId));
  }, [dispatch, userId]);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;

  return <div>User: {data.name}</div>;
};

export default UserProfile;

Redux DevTools হলো Redux অ্যাপ্লিকেশন ডিবাগিংয়ের জন্য সবচেয়ে কার্যকর টুল। এটি আমাদের actions এবং state পরিবর্তন পর্যবেক্ষণ করতে সাহায্য করে।

Setting Up Redux DevTools

• Redux Toolkit already integrates Redux DevTools, so no additional setup is required.

Steps to Use:

1. Open your app in a browser.
2. Install the Redux DevTools browser extension.
3. Inspect the app's state and actions directly in the extension.

Redux DevTools এর মাধ্যমে আমরা যেকোনো সময়ের state এবং actions রিভিউ করতে পারি। এটি ডেভেলপারদের জন্য একটি অসাধারণ টুল।

---

এই পোস্টটিতে আমরা Redux এবং Redux Toolkit এর অনেক দিক আলোচনা করেছি। Redux Toolkit এর মাধ্যমে আমরা দেখলাম কীভাবে জটিল অ্যাপ্লিকেশনগুলোর state ম্যানেজমেন্ট সহজ করা যায়। এটি আমাদের সময় এবং কোডিং এফোর্ট দুটোই বাঁচায়।

এই পোস্টটি তৈরি করতে AI এর সাহায্য নেওয়া হয়েছে। তবে প্রতিটি অংশের পরিকল্পনা, উপস্থাপনা এবং চূড়ান্ত সম্পাদনা আমার নিজস্ব প্রচেষ্টার ফল।

ধন্যবাদ।