Redux Toolkit in Apni Baat-Cheet

Redux Toolkit sunte hi lagta hai koi heavy sa library hai, lekin trust me, ye React ka best dost hai jab baat aati hai state management ki.

Soch lo tumhare app mein multiple components hain – sabko kuch na kuch data chahiye:

• Counter value

• Logged in user

• Cart items

Aur agar sab data ko alag-alag jagah store kiya, toh kya hoga? Yahi kaam Redux handle karta hai… aur Redux Toolkit uska easy version hai.

---

But first... Redux Toolkit kya karta hai?

Redux Toolkit ek modern way hai Redux use karne ka – jisme:

• Less boilerplate (kam code)

• More readability

• Cleaner syntax

---

Redux Toolkit ke 3 Core Concepts:

1. Reducers

“Reducers” woh functions hain jo state ko change karte hain based on actions.

Jaise agar kisi ne bola “increment karo” toh reducer decide karega:

reducers: {
  increment: (state) => {
    state.value += 1; // state change yahin hota hai
  },
  decrement: (state) => {
    state.value -= 1;
  },
  addByAmount: (state, action) => {
    state.value += action.payload;
  }
}

Reducers are like chefs – recipe milte hi mithai bana dete hain!

---

2. Dispatch

Dispatch ka kaam hota hai “batana” ki kya karna hai.

Tum dispatch() ko bula ke ek action bhejte ho reducer ke paas:

const dispatch = useDispatch();

<button onClick={() => dispatch(increment())}>+</button>
<button onClick={() => dispatch(addByAmount(5))}>+5</button>

Soch lo tumne ek message bheja: “5 laddoo aur chahiye” – reducer us par kaam karega.

---

3. Selector

Selector ka kaam hota hai Redux store se data uthana – bina kuch badle.

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

Soch lo tum store ki dukaan ke window se dekh rahe ho andar kya chal raha hai – bina andar jaaye.

---

Ek choti summary table for quick yaad-dasht:

---

Redux Toolkit ke 3 Superheroes (Syntax):

1. createSlice():

Think of it as a “Mini manager” of one part of your app

Yeh function ek feature ke liye:

• State banata hai

• Reducer likhta hai

• Aur actions bhi ready kar deta hai

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1 },
    decrement: (state) => { state.value -= 1 },
  }
});

Yeh ek chhota cake slice hai jo sirf “counter” feature ka taste sambhalta hai.

isme export ye ye krte h:

• Actions Export – Named Export

    export const { increment, decrement, addByAmount } = counterSlice.actions;
  

  Kya hota hai yeh?
  Yeh Redux Toolkit automatically tumhare reducers ke naam ke actions create karta hai, jinhe tum dispatch() karte ho components se.

• Reducer Export – Default Export

    export default counterSlice.reducer;
  

  Kya hota hai yeh?

  Yeh actual reducer function hai jo tum configureStore me use karoge:

---

2. configureStore():

App ka dimaag (brain) – jahan sab slices ki info hoti hai

export const store = configureStore({
  reducer: {
    counter: counterReducer,
    user: userReducer,
    cart: cartReducer
  }
});

Isme tum saare slices ko combine karte ho. Yeh Redux ka big vault hai – jahan sab states padhe hote hain.

---

3. <Provider store={store}>:

Isse tum React ko bolte ho:
"Bhai... Redux se mil le. Yeh tera naya best friend hai." 😄

// in main.jsx
import { Provider } from 'react-redux';

<Provider store={store}>
  <App />
</Provider>

Ab tumhare sab components use kar sakte hain:

• useSelector() → state ko read karne ke liye

• useDispatch() → actions dispatch karne ke liye

---

🛠️ Real Example: Counter App

// counterSlice.js
const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value++ },
    decrement: (state) => { state.value-- },
  }
});

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

// CounterComponent.jsx
const dispatch = useDispatch();
const count = useSelector((state) => state.counter.value);

<button onClick={() => dispatch(increment())}>+</button>
<p>{count}</p>
<button onClick={() => dispatch(decrement())}>-</button>

---

Summary: Redux Toolkit ko ek mithai ki dukaan samjho: