Redux Toolkit Introduction in React.js (সম্পূর্ণ গাইড)

Redux Toolkit (RTK) হলো React অ্যাপের জন্য সবচেয়ে জনপ্রিয় এবং আধুনিক state management লাইব্রেরি। React Context বা সাধারণ Redux এর তুলনায় এটি দ্রুত, সহজ এবং কম কোডে কাজ করে।

Redux Toolkit এর মূল উদ্দেশ্য হলো Redux এর জটিলতা কমানো এবং দ্রুত স্কেলেবল অ্যাপ তৈরি করা।

🔶 কেন Redux Toolkit ব্যবহার করবেন?

• কম কোড — সাধারণ Redux এ অনেক বেশি boilerplate কোড লাগে। RTK এ কোড অনেক ছোট।
• সিম্পল API — createSlice, configureStore এর মতো সহজ ফাংশন।
• Built-in Immer — state নিজে mutate না করেও সহজভাবে update করা যায়।
• Better Structure — ফোল্ডার আর্কিটেকচার সহজ।
• Redux DevTools — debugging আরও শক্তিশালী।

🔶 Redux Toolkit কীভাবে কাজ করে?

Redux Toolkit মূলত ৩টি প্রধান API ব্যবহার করে:

1. configureStore() — Redux store তৈরি করে।
2. createSlice() — state + reducers + actions একসাথে তৈরি করে।
3. createAsyncThunk() — API call করার জন্য।

🔶 Redux Toolkit সেটআপ (Step-by-Step)

📌 1. Redux Toolkit ইনস্টল করুন

npm install @reduxjs/toolkit react-redux

📌 2. একটি Slice তৈরি করুন

slice এর মধ্যে থাকে: state, reducers, actions

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

const counterSlice = createSlice({
    name: "counter",
    initialState: { value: 0 },

    reducers: {
        increment: (state) => {
            state.value += 1;
        },
        decrement: (state) => {
            state.value -= 1;
        },
        incrementByAmount: (state, action) => {
            state.value += action.payload;
        }
    }
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./counterSlice";

const store = configureStore({
    reducer: {
        counter: counterReducer
    }
});

export default store;

📌 4. App এ Store Provide করুন

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

ReactDOM.createRoot(document.getElementById("root")).render(
    
        
    
);

📌 5. React Component এ Redux Toolkit ব্যবহার

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { increment, decrement } from "./counterSlice";

export default function Counter() {
    const count = useSelector((state) => state.counter.value);
    const dispatch = useDispatch();

    return (
      <div>
         <h2>Counter: {count}</h2>
         <button onClick={() => dispatch(increment())}>+</button>
         <button onClick={() => dispatch(decrement())}>-</button>
      </div>
    );
}

🔶 Redux Toolkit এর সুবিধা

• State write করা সহজ (mutate করা allowed কারণ Immer ব্যবহার করে)
• Code clean এবং maintain করা সহজ
• Redux DevTools integration
• Async task সহজ (createAsyncThunk)

🔶 Redux Toolkit কোথায় ব্যবহার করবেন?

• Large scale React apps
• যেখানে অনেক Component এর মধ্যে data share করতে হয়
• Complex state management
• Real-time apps (chat apps, dashboards, e-commerce)

✨ উপসংহার

Redux Toolkit হলো modern React development এর সবচেয়ে ভালো state management solution। এটি ব্যবহার করলে আপনার অ্যাপ হবে:

• Fast
• Maintainable
• Scalable

নতুনরা সহজে শিখতে পারে এবং প্রফেশনাল লেভেলের অ্যাপ তৈরি করতে পারে খুব কম কোডে।