Redux Toolkit Setup in React Native — সম্পূর্ণ বাংলা গাইড

React Native অ্যাপে যখন স্টেট বড় হতে থাকে, স্ক্রিনের সংখ্যা বাড়ে, API কল বেশি হয় — তখন স্টেট ম্যানেজমেন্ট খুব গুরুত্বপূর্ণ হয়ে ওঠে। Redux Toolkit হচ্ছে Redux এর আধুনিক ও সহজ সংস্করণ, যেখানে কম কোডে, কম জটিলতায়, বেশি পারফরম্যান্স পাওয়া যায়। এই গাইডে আপনি React Native এ Redux Toolkit সেটআপ থেকে শুরু করে Store, Slice, Action, Reducer সব কিছু Step-by-Step শিখবেন।

📌 1. Redux Toolkit কী?

Redux Toolkit হল Redux ব্যবহার করার একটি official, recommended ও সহজতম উপায়।

Redux Toolkit ব্যবহারের কারণঃ

কম কোডে Redux সেটআপ করা যায়
Immer.js এর মাধ্যমে state immutable handling অটোমেটিক হয়
Redux Thunk ইতিমধ্যেই বিল্ট-ইন
Slice আকারে মডুলার কোড লেখা যায়
Debugging অনেক সহজ

📌 2. React Native এ Redux Toolkit Install

npm install @reduxjs/toolkit react-redux

এতে দুটি জিনিস install হবে —

@reduxjs/toolkit — Redux Toolkit Functions
react-redux — Provider + Hooks

📌 3. Folder Structure

/src
   /redux
       store.js
       /slices
           counterSlice.js

📌 4. Slice তৈরি করা (Example: Counter Slice)

Slice হচ্ছে Redux state + reducer + action — সব এক সাথে।

// src/redux/slices/counterSlice.js

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

const counterSlice = createSlice({
  name: "counter",
  initialState: {
    value: 0,
  },
  reducers: {
    increment: (state) => {
      state.value += 1;   // Immer.js কারণে সরাসরি পরিবর্তন করা যায়
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    },
  },
});

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

📌 5. Store Setup

// src/redux/store.js

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

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

📌 6. App.js এ Provider দিয়ে Wrap করা

// App.js

import { Provider } from "react-redux";
import { store } from "./src/redux/store";
import Home from "./src/screens/Home";

export default function App() {
  return (
    
      
    
  );
}

📌 7. Screen এ Redux value ব্যবহার করা (useSelector)

import { useSelector } from "react-redux";

const count = useSelector((state) => state.counter.value);

📌 8. Action Dispatch করা (useDispatch)

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

const dispatch = useDispatch();

<Button title="Add" onPress={() => dispatch(increment())} />
<Button title="Minus" onPress={() => dispatch(decrement())} />

📌 9. Async Thunk (API Call এর জন্য)

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

export const fetchUsers = createAsyncThunk(
  "users/fetch",
  async () => {
    const res = await fetch("https://jsonplaceholder.typicode.com/users");
    return res.json();
  }
);

const userSlice = createSlice({
  name: "users",
  initialState: { data: [], loading: false },
  extraReducers: (builder) => {
    builder
      .addCase(fetchUsers.pending, (state) => { state.loading = true; })
      .addCase(fetchUsers.fulfilled, (state, action) => {
        state.loading = false;
        state.data = action.payload;
      });
  },
});

📌 10. Redux Toolkit ব্যবহারের সুবিধা

Setup খুব সহজ
Reducers লেখার ঝামেলা কম
Actions অটোমেটিক জেনারেট হয়
API Call এর জন্য Async Thunk built-in
Immer.js এর কারণে স্টেট ইমিউটেবল ম্যানেজ হয়

✔ সারসংক্ষেপ

এই টিউটোরিয়ালে আপনি শিখলেন —

Redux Toolkit Install
Slice তৈরি
Store Setup
Provider ব্যবহার
useSelector + useDispatch
Async Thunk দিয়ে API Call

এখন আপনি Redux Toolkit ব্যবহার করে React Native অ্যাপে স্টেট খুব সহজে ম্যানেজ করতে পারবেন।

Redux Toolkit Setup in React Native