Redux Toolkit (RTK) Tutorial: Modern React State Management

React Redux একসময় ডেভেলপারদের জন্য একটা আতঙ্কের নাম ছিল।

প্রচুর বয়লারপ্লেট কোড (Boilerplate code), জটিল কনফিগারেশন এবং একাধিক প্যাকেজ ইনস্টল করার ঝামেলা সব মিলিয়ে State Management করতে গিয়েই মাথা খারাপ হওয়ার জোগাড় হতো। এই সমস্যাগুলো চিরতরে দূর করতে Redux টিম নিয়ে এসেছে Redux Toolkit (RTK)।

আজকের ব্লগে আমরা জানব Redux Toolkit কী, কেন এটি ব্যবহার করা উচিত এবং রিয়েল-লাইফ প্রোজেক্টে এটি কীভাবে ইমপ্লিমেন্ট করতে হয়।

What is Redux Toolkit (RTK)?

Redux Toolkit বা সংক্ষেপে RTK হলো Redux-এর অফিশিয়াল এবং রেকমেন্ডেড টুলসেট।

এর মূল লক্ষ্য হলো Redux-এর জটিলতা কমিয়ে ডেভেলপারদের কাজ সহজ করা। আগে যেখানে Action, Reducer, এবং Action Type-এর জন্য আলাদা আলাদা ফাইল বানাতে হতো, RTK সেখানে মাত্র কয়েকটি বিল্ট-ইন ফাংশন দিয়ে পুরো কাজটা এক জায়গায় করে ফেলে।

আধুনিক ওয়েব ডেভেলপমেন্টে Redux বলতে মূলত Redux Toolkit-কেই বোঝায়।

Why You Should Migrate to RTK (Key Benefits)

RTK শুধু কোডের সাইজই কমায় না, এর আরও বেশ কিছু দারুণ সুবিধা রয়েছে:

• Less Boilerplate: createAction বা createReducer ম্যানুয়ালি লেখার দরকার নেই। RTK-এর createSlice ফাংশন স্বয়ংক্রিয়ভাবে এগুলো জেনারেট করে দেয়।
• Direct State Mutation (Immer.js): আগে Redux-এ State আপডেট করার সময় আগের State কপি (spread operator ...) করে কাজ করতে হতো, কারণ State ছিল Immutable। কিন্তু RTK ইন্টারনালি Immer.js ব্যবহার করে। ফলে আপনি চাইলেই সরাসরি state.value += 1 লিখতে পারবেন, বাকি মিউটেশনের কাজ Immer.js পর্দার আড়ালে হ্যান্ডেল করে নেবে।
• Built-in Redux Thunk: API কল বা Asynchronous কাজ করার জন্য আগে আলাদা করে Redux Thunk বা Redux Saga কনফিগার করতে হতো। RTK-তে Thunk ডিফল্টভাবে সেটআপ করা থাকে।
• Zero DevTools Setup: Redux DevTools এক্সটেনশন ব্যবহার করার জন্য আগে স্টোরে ম্যানুয়ালি কোড লিখতে হতো। RTK-তে configureStore ব্যবহার করলে এটি স্বয়ংক্রিয়ভাবে চালু হয়ে যায়।

Core APIs of Redux Toolkit

RTK মূলত ৩টি প্রধান ফাংশনের উপর দাঁড়িয়ে আছে:

1. configureStore(): এটি পুরোনো createStore()-এর আধুনিক রূপ। এটি দিয়ে গ্লোবাল স্টোর সেটআপ করা হয় এবং এটি ডিফল্টভাবেই প্রয়োজনীয় মিডলওয়্যার (Middleware) যুক্ত করে নেয়।
2. createSlice(): এটি RTK-এর সবচেয়ে পাওয়ারফুল ফাংশন। এটি একইসাথে Action এবং Reducer তৈরি করে দেয়।
3. createAsyncThunk(): API থেকে ডেটা ফেচ করার মতো Asynchronous কাজের জন্য এটি ব্যবহার করা হয়।

Step-by-Step Implementation (Code Example)

ধরে নিন, আমরা একটি ওয়েব অ্যাপ্লিকেশনের জন্য একটি SEO Analytics Dashboard বানাচ্ছি, যেখানে রিয়েল-টাইম ভিজিটরের সংখ্যা ট্র্যাক করতে হবে। চলুন দেখি RTK দিয়ে এটি কীভাবে করা যায়।

Step 1: Install Dependencies

প্রথমে টার্মিনালে নিচের কমান্ডটি রান করে RTK এবং React-Redux ইনস্টল করে নিন:

Bash

npm install @reduxjs/toolkit react-redux

Step 2: Create a Slice (analyticsSlice.js)

এখানে আমরা createSlice ব্যবহার করে আমাদের State, Actions এবং Reducers এক জায়গায় ডিক্লেয়ার করব।

JavaScript

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

const initialState = {
  activeVisitors: 0,
  userName: "Arif Almas"
};

export const analyticsSlice = createSlice({
  name: 'analytics',
  initialState,
  reducers: {
    visitorJoined: (state) => {
      // Immer.js-এর কারণে সরাসরি মিউটেট করা যাচ্ছে
      state.activeVisitors += 1;
    },
    visitorLeft: (state) => {
      if(state.activeVisitors > 0) {
         state.activeVisitors -= 1;
      }
    },
    addCustomVisitors: (state, action) => {
      // payload রিসিভ করে state আপডেট করা হচ্ছে
      state.activeVisitors += action.payload;
    }
  }
});

// স্বয়ংক্রিয়ভাবে তৈরি হওয়া Action গুলো এক্সপোর্ট করা হচ্ছে
export const { visitorJoined, visitorLeft, addCustomVisitors } = analyticsSlice.actions;

// স্টোরের জন্য Reducer এক্সপোর্ট করা হচ্ছে
export default analyticsSlice.reducer;

Step 3: Configure the Store (store.js)

এবার আমাদের গ্লোবাল স্টোর তৈরি করতে হবে এবং সেখানে slice-এর reducer যুক্ত করতে হবে।

JavaScript

import { configureStore } from '@reduxjs/toolkit';
import analyticsReducer from './analyticsSlice';

export const store = configureStore({
  reducer: {
    // এখানে আমাদের সব Slice-এর Reducer যুক্ত করতে হবে
    analytics: analyticsReducer,
  },
});

Step 4: Wrap App with Provider (main.jsx)

পুরো অ্যাপ্লিকেশন যেন এই স্টোর অ্যাক্সেস করতে পারে, তাই Root কম্পোনেন্টকে <Provider> দিয়ে মুড়িয়ে দিতে হবে।

JavaScript

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './store';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

Step 5: Use Redux State in Component (Dashboard.jsx)

সবশেষে, আমাদের ড্যাশবোর্ড কম্পোনেন্ট থেকে ডেটা রিড করতে useSelector এবং অ্যাকশন ট্রিগার করতে useDispatch ব্যবহার করব।

JavaScript

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { visitorJoined, visitorLeft, addCustomVisitors } from './analyticsSlice';

const Dashboard = () => {
  // Store থেকে State রিড করা
  const { activeVisitors, userName } = useSelector((state) => state.analytics);
  
  // Action ট্রিগার করার জন্য dispatch
  const dispatch = useDispatch();

  return (
    <div className="dashboard-container">
      <h2>Analytics Overview for {userName}</h2>
      <h3>Live Active Visitors: {activeVisitors}</h3>
      
      <div className="button-group">
        <button onClick={() => dispatch(visitorJoined())}>New Visitor (+1)</button>
        <button onClick={() => dispatch(visitorLeft())}>Visitor Left (-1)</button>
        <button onClick={() => dispatch(addCustomVisitors(50))}>Bulk Traffic Surge (+50)</button>
      </div>
    </div>
  );
};

export default Dashboard;

আধুনিক ওয়েব ডেভেলপমেন্টে State Management-এর জন্য Redux Toolkit এখন একটি ইন্ডাস্ট্রি স্ট্যান্ডার্ড। এর ক্লিন আর্কিটেকচার এবং বিল্ট-ইন টুলস ডেভেলপারদের কোড লেখার স্পিড এবং কোয়ালিটি দুই-ই বহুগুণ বাড়িয়ে দেয়। পুরোনো Redux-এর তুলনায় RTK শেখা এবং প্রজেক্টে ইমপ্লিমেন্ট করা অনেক বেশি সহজ।

Summary: The Final Verdict on Redux Toolkit

সংক্ষেপে বলতে গেলে, Redux Toolkit (RTK) হলো React অ্যাপ্লিকেশনে State Management-এর সবচেয়ে আধুনিক, স্মার্ট এবং সহজ উপায়।

পুরোনো Redux-এর জটিলতা, অসংখ্য ফাইল তৈরি করা এবং অতিরিক্ত বয়লারপ্লেট কোডের ঝামেলা থেকে ডেভেলপারদের মুক্তি দিতেই মূলত এর জন্ম।

configureStore দিয়ে ঝামেলাবিহীন স্টোর সেটআপ থেকে শুরু করে, createSlice-এর মাধ্যমে Action ও Reducer একসাথে ম্যানেজ করা এবং Immer.js-এর সাহায্যে সরাসরি State মিউটেট করা সবকিছুই RTK-কে করে তুলেছে ডেভেলপারদের প্রথম পছন্দ।

আপনি যদি এখনও পুরোনো Redux প্যাটার্ন ব্যবহার করে থাকেন, তবে আজই আপনার প্রোজেক্টকে RTK-তে মাইগ্রেট করার কথা ভাবতে পারেন। আর নতুন কোনো স্কেলেবল প্রজেক্ট শুরু করার ক্ষেত্রে তো RTK-এর বিকল্প ভাবাই যায় না!

আপনার পরবর্তী প্রজেক্টে কি আপনি Redux Toolkit ব্যবহার করার কথা ভাবছেন, নাকি Context API দিয়েই কাজ চালিয়ে নিতে বেশি স্বাচ্ছন্দ্যবোধ করেন? আপনার মতামত বা যেকোনো প্রশ্ন কমেন্ট বক্সে জানাতে পারেন!