Global State Management with Redux Toolkit (RTK) – React Native

বড় অ্যাপ তৈরি করতে গেলে একটি গুরুত্বপূর্ণ সমস্যা দেখা দেয়—ডাটা কোথায় স্টোর হবে?
React Native-এ একাধিক কম্পোনেন্টে একই ডাটা শেয়ার করতে হলে প্রতিবার props drilling করতে হয় — যা খুব ঝামেলার এবং কোডকে জটিল করে তোলে।

এই সমস্যার সমাধান হলো Redux Toolkit (RTK) — React Native-এ গ্লোবাল স্টেট ম্যানেজমেন্ট করার সবচেয়ে আধুনিক, সহজ এবং কম কোডের সমাধান।

🔥 কেন RTK ব্যবহার করবেন?

কম কোডে বেশি কাজ – Redux এর বয়লারপ্লেট অনেক কম হয়েছে।
createSlice() দিয়ে reducer + action একসাথে তৈরি হয়।
Immer.js এর কারণে state mutate করাও সহজ।
TypeScript Friendly
Performance Better
Debug সহজ – Redux DevTools সাপোর্ট করে।

🌍 Global State আসলে কী?

Global State মানে এমন ডাটা যেটা অ্যাপের যেকোনো স্ক্রিন বা কম্পোনেন্ট থেকে অ্যাক্সেস করা যায়। যেমন:

User Authentication Data
Shopping Cart Items
Theme (Dark/Light)
Language
UI State (Modal Open/Close)

📦 RTK দিয়ে Global State Architecture

RTK-তে স্টেট ম্যানেজমেন্টের ৩টি গুরুত্বপূর্ণ অংশ —

Slice → State + Reducer + Action
Store → সব slice connect করে
Provider → App-কে store দিয়ে wrap করে

📌 উদাহরণ: Counter Slice তৈরি

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;

🏪 Store Setup

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

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

🔗 Provider দিয়ে App কে wrap করা

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

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

🎯 Component থেকে Global State ব্যবহার

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

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

    return (
        <View>
            <Text>Count: {count}</Text>

            <Button title="➕ Increment" onPress={() => dispatch(increment())} />
            <Button title="➖ Decrement" onPress={() => dispatch(decrement())} />
        </View>
    );
}

✅ RTK দিয়ে Global State ব্যবহারের সুবিধা

ডাটা অ্যাপের সব জায়গা থেকে অ্যাক্সেস করা যায়
প্রপস ড্রিলিং করতে হয় না
Redux DevTools দিয়ে debugging super easy
Complex অ্যাপে Data Flow Clean থাকে
নতুন Developers প্রোজেক্ট বুঝতে পারে দ্রুত

🎉 Conclusion

React Native অ্যাপ বড় হতে থাকলে গ্লোবাল স্টেট ম্যানেজমেন্ট অত্যন্ত গুরুত্বপূর্ণ হয়ে যায়। Redux Toolkit এই কাজটাকে করে আরও সহজ, দ্রুত এবং maintainable। আপনি যখন authentication, cart system, user preference, modal state ইত্যাদি ম্যানেজ করবেন—RTK হবে perfect choice।

Global State Management with RTK