Redux Toolkit interview questions & answers

Socho ek busy office hai jahan sabko same numbers pata hone chahiye — aaj ki sales, kaun chhutti par hai, current target. Agar har banda apni alag parchi rakhe aur haath-se-haath pass kare, to parchi kho jaati hai, do logon ke paas alag numbers aa jaate hain, aur kisi ko pata hi nahi konsa sahi hai. Iske badle office deewar par ek bada whiteboard laga deta hai. Sab usi se padhte hain, aur jab kuch badalta hai to ek banda board update kar deta hai — ab poore office ko ek hi sach dikhta hai.

Redux bhi bilkul aisa hi hai. React app me kaafi components ko same data chahiye hota hai — logged-in user, shopping cart, dark-mode flag. Isko parent se child se grandchild tak props se neeche bhejna (prop-drilling kehte hain) dukhdayi ho jaata hai: beech ke components aisa data carry karte hain jo woh use bhi nahi karte, aur ek change ka matlab kai files edit karna. Redux yeh saara shared state ek central store me rakh deta hai — ek single whiteboard jise har component seedha padh aur likh sakta hai.

🌍 Real-world example: Zomato par tumhara cart menu page par, checkout page par, aur top bar par — teeno jagah ek saath dikhna chahiye. Cart ko har screen me se ghumaane ke badle, app usko ek store me rakhti hai; har screen wahi cart padhti hai, aur ek item add karo to woh sab jagah ek saath update ho jaata hai.

💡 Global/shared state = woh data jo app ke kai hisson ko chahiye, sirf ek component ko nahi. 💡 Prop-drilling = data ko kai beech ke components se pass karna jo use nahi karte, sirf ek deep child tak pahunchane ke liye. 💡 Store = woh single object jo poori app ka shared state rakhta hai — one source of truth.

Modern Redux Toolkit (RTK) ke saath — jo aaj Redux use karne ka official, recommended tarika hai — yeh store banana ek line ka kaam hai. Kyunki sab ek hi store se padhte aur likhte hain, data kabhi apne aap se ulat nahi ho sakta, aur debugging aasaan hai: dekhne ke liye sirf ek hi jagah hai.

Standard definition (interview me bolo): Redux is a predictable state-management library that stores an application's shared state in a single central store, giving all components one source of truth to read from and update.

import { configureStore } from '@reduxjs/toolkit';
import cartReducer from './cartSlice';

// One central store = one source of truth
export const store = configureStore({
  reducer: { cart: cartReducer },
});

console.log(store.getState());

Ek bank socho. Tumhara account balance ek safe jagah rakha hota hai — tum khud jaake number nahi badal sakte. Balance change karne ke liye ek slip bharte ho (₹500 deposit / ₹200 withdraw) aur teller ko dete ho, jo slip padh kar rules ke hisaab se balance update karta hai.

Redux bhi bilkul aisa hi kaam karta hai — 3 core pieces se:

• Store = account balance. Ek single jagah jahan poori app ka state rehta hai. Isko tum kabhi seedha edit nahi karte.
• Action = slip. Ek plain object jo batata hai kya hua: { type: 'account/deposit', payload: 500 }. type label hai; payload data hai.
• Reducer = teller. Ek pure function (state, action) => newState jo slip padhta hai aur naya state return karta hai — koi side effect nahi, purana state nahi badalta, same input hamesha same output.

Yeh teeno kaise jude hain: tum ek action dispatch karte ho (slip dete ho) → reducer chalta hai aur naya state banata hai → store update hota hai aur UI ko re-render karne bolta hai.

🌍 Real-world example: Zomato cart me "Add" dabao to { type: 'cart/add', payload: item } dispatch hota hai. Reducer us item ke saath naya cart return karta hai, store update hota hai, aur cart badge naya count dikhata hai.

💡 Store = single source of truth jahan poori app ka state rehta hai. 💡 Action = ek plain {type, payload} object jo bataye ki kaunsa event hua. 💡 Reducer = pure function jo purana state + action leke naya state return karta hai. 💡 Pure function = koi side effect nahi; same input hamesha same output deta hai.

Standard definition (interview me bolo): In Redux, the store holds the single state tree, actions are plain objects describing what happened, and reducers are pure functions that take the current state and an action and return the next state. (Redux Toolkit me tum yeh sab configureStore aur createSlice se likhte ho, jo actions aur reducers khud auto-generate kar deta hai.)

const deposit = amt => ({ type: 'account/deposit', payload: amt });

function reducer(state, action) {
  if (action.type === 'account/deposit')
    return { balance: state.balance + action.payload };
  return state;
}

reducer({ balance: 100 }, deposit(500)); // { balance: 600 }

Kya bana rahe hain: wahi chhota Counter — screen pe ek number, aur +, −, Reset, aur ek +5 button — par is baar number component ke andar nahi rehta. Wo ek Redux store mein rehta hai, aur component sirf use padhta hai aur badalne ke liye message bhejta hai. Ye ek project poora Redux Toolkit loop end-to-end sikhata hai: button click → dispatch(action) → reducer chalta hai → store mein nayi state → useSelector re-render → UI update. Ye loop aa gaya, to jo bhi Redux app dekhoge wo bas iska bada version hoga.

Jo ye sikhata hai: createSlice (reducers + auto-generated actions), configureStore, <Provider>, useSelector (read), useDispatch (write), aur payloads (incrementByAmount(5)).

---

Step 0 — Mental model (pehle ye padho, 30 second)

Plain React Counter mein number component ke andar useState se rehta tha. Component uska maalik tha. Ek chhote component ke liye ye perfect hai — par jaise hi app ke das alag components ko wahi number chahiye (navbar cart badge, checkout page, mini-cart popup), use props ke through neeche pass karna dard ban jata hai.

Redux ownership ulti kar deta hai. Number ab component ka nahi rehta — wo ek single shared box mein rehta hai jise store kehte hain, jo poore component tree ke bahar baithta hai. Component ek patli screen ban jata hai: wo store se number padhta hai, aur jab tum button click karte ho to wo number ko seedha nahi badalta — wo ek action dispatch karta hai ("please increment"), aur ek pure function jise reducer kehte hain store ke andar nayi value compute karta hai. Store phir har subscribed component ko batata hai "value badli, dobara padho."

💡 Store = ek shared box jismein app ki state rehti hai, har component ke bahar. Action = ek plain message jo batata hai kya hua ({ type: 'counter/increment' }). Reducer = ek pure function jo current state + action leke nayi state deta hai. dispatch = store ko action bhejne ka ek-hi tarika.

🌍 Real-world example: Zomato pe tumhara cart item-count top bar mein, restaurant page pe, aur checkout summary mein — sab jagah ek saath dikhta hai. Koi us number ko pachaas props ke through pass nahi karta. Wo ek store mein rehta hai; har component bas use padhta hai aur addItem / removeItem dispatch karta hai. Hamara counter wahi exact pattern hai, ek number tak simat gaya.

Ye picture dimaag mein rakho: component number ka maalik nahi hai — store hai. Ab banate hain.

---

Step 1 — Slice banao (asli dil yahi hai)

Ek slice ek feature ki poori Redux logic ek file mein hai: uski starting state, aur badalne ke saare tarike. Hum ise createSlice se banate hain.

// counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

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

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

Ho ye raha hai — har piece padho:

• name: 'counter' — is slice ka label. Ye har action type ka prefix ban jata hai, to increment asal mein 'counter/increment' dispatch karta hai. Old Redux mein ye tum action-type constant ban ke haath se likhte — RTK tumhare liye generate karta hai.
• initialState: { value: 0 } — slice jis state se shuru hota hai. Number ko object mein wrap karte hain ({ value: 0 }) kyunki slice state aam taur pe fields wala object hota hai.
• reducers: { ... } — yahaan har function ek mini-reducer hai jo ek tarah ka change describe karta hai. increment value badhata hai, decrement ghatata hai, reset zero karta hai, incrementByAmount jo number pass karo utna jodta hai.
• "Ruko, state.value += 1 to mutation hai!" Haan — aur yahaan allowed hai. createSlice tumhare reducer ko Immer ke andar chalata hai, jo tumhari "mutations" record karke peeche se safely ek bilkul nayi immutable state bana deta hai. To tum aasaan code likhte ho aur phir bhi immutable updates milte hain. (Ye mutation ki azaadi sirf createSlice ke andar hai — kahin aur Redux state kabhi mat mutate karo.)
• counterSlice.actions — RTK ne har reducer ke liye ek action creator auto-generate kar diya. increment ab ek function hai: increment() call karne pe action object { type: 'counter/increment' } wapas milta hai. Inhe export karte hain taaki components dispatch kar sakein.
• counterSlice.reducer — is slice ka ek combined reducer function. Store ko yahi chahiye. Ise default export karte hain.

💡 createSlice = ek call jo teen cheezein deti hai: reducer, auto-generated action creators, aur (Immer ke through) mutating-jaisa code safely likhne ki azaadi.

---

Step 2 — Store banao aur app ko <Provider> mein wrap karo

Slice jaanta hai state kaise badalti hai, par wo abhi kahin chal nahi raha. configureStore asli store boot karta hai, aur <Provider> use har component se reachable banata hai.

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

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

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

function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

export default App;

Ho ye raha hai:

• configureStore({ reducer: { counter: counterReducer } }) single store banata hai. reducer object ek slice name → uska reducer map karta hai. To counter: counterReducer matlab "store mein ek counter branch hai, jo hamare counter slice se chalti hai." State ab state.counter.value pe rehti hai. (Aage cart slice add karo to bas cart: cartReducer iske saath likh dena.)
• configureStore bahut kuch free mein bhi deta hai: Redux DevTools, async ke liye thunk middleware, aur dev-only checks jo cheekhte hain agar tum galti se Immer ke bahar state mutate karo. Koi manual setup nahi.
• <Provider store={store}> app ko wrap karta hai. Ye wo taar hai jo Redux ko React se jodta hai: is Provider ke andar ka koi bhi component ab useSelector aur useDispatch se store tak pahunch sakta hai. Provider bhool gaye to har hook "could not find react-redux context" phenk deta hai.

💡 Provider = wo pul jo store ko React tree mein plug karta hai. Iske andar sab kuch store se padh aur dispatch kar sakta hai; iske bahar kuch nahi.

---

Step 3 — useSelector se value padho, useDispatch se dispatch lo

Ab Counter component. Pehle ise store se padhne aur likhne ki taakat dene ke liye wire karo.

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

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

  return (
    <div>
      <h2>Counter</h2>
      <p>Count: {count}</p>
    </div>
  );
}

export default Counter;

Ho ye raha hai:

• useSelector((state) => state.counter.value) — component store se aise padhta hai. Tum ise ek selector dete ho: ek function jo poori store state leke sirf wo slice deta hai jo tumhe chahiye. Yahaan hum state.counter.value khodte hain (yaad rakho: counter store ki branch ka naam hai, value initialState ka field). count ab 0 hai.
• useSelector ka jaadu: ye component ko exactly us value se subscribe kar deta hai. Agar state.counter.value badli, ye component apne aap dobara chalta aur re-render hota hai. Agar store ka koi aur hissa badle, ye component ko chhod deta hai — koi wasted render nahi.
• const dispatch = useDispatch() — ye tumhe dispatch function deta hai, store ko actions bhejne ka ek-hi tarika. Abhi koi action call nahi kar rahe; bas tool utha rahe hain. Agla step ise buttons se jodta hai.

💡 useSelector = store state ka ek specific slice padho aur usse subscribe ho jao. useDispatch = dispatch function lo taaki actions bhej sako.

---

Step 4 — Buttons wire karo aur poora loop trace karo

Ab buttons. Har ek ek action creator dispatch karta hai. Yahi poora point hai — dheere se trace karo.

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

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

Poora loop — + button click karo aur har beat follow karo. Har Redux app ka har button bilkul isi tarah chalta hai:

1. Tum + button click karte ho.
2. Uska onClick dispatch(increment()) chalata hai.
3. increment() pehle chalta hai — ye auto-generated action creator hai, to ye action object return karta hai { type: 'counter/increment' }.
4. dispatch(...) us action ko store mein bhejta hai.
5. Store apna reducer chalata hai. Wo type: 'counter/increment' dekhta hai aur ise tumhare slice ke increment reducer tak route karta hai.
6. increment ke andar state.value += 1 chalta hai. Immer use record karke ek nayi state banata hai jahan value 0 se 1 ho gaya. Store is nayi state ko swap kar deta hai.
7. Store apne subscribers ko batata hai ki state badli.
8. Tumhara useSelector((state) => state.counter.value) dobara padhta hai aur ab 1 deta hai — pehle se alag value — to React Counter ko re-render karta hai.
9. JSX Count: 1 banata hai. Tumhe screen pe dikhta hai.

Dhyaan do tumne kya NAHI kiya: tumne count ko kabhi seedha haath nahi lagaya (wo read-only hai — count = 5 try karo, kuch nahi hoga), aur DOM ko kabhi haath nahi lagaya. Tumne sirf ek action dispatch kiya. Reducer ne store badla; store ka tumhe re-render karna automatic hai. Zor se bolo: component number nahi badalta — wo dispatch karta hai, reducer store badalta hai, store component ko re-render karta hai.

− aur Reset wahi loop hain alag actions ke saath: dispatch(decrement()) decrement reducer tak route hota hai (value -= 1), dispatch(reset()) reset tak (value = 0). Har baar wahi nau beats.

---

Step 5 — incrementByAmount(5): payload pass karna

Ab tak actions koi data nahi le ja rahe the — "increment" khud mein kaafi hai. Par aksar action ko ek value le jaani padti hai: kitna add karein? Wo extra data payload hai.

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

Payload flow trace karo:

1. +5 click → onClick dispatch(incrementByAmount(5)) chalata hai.
2. incrementByAmount(5) — auto-generated action creator tumhara argument leke action ke payload field mein pack karta hai, return karta hai { type: 'counter/incrementByAmount', payload: 5 }.
3. dispatch use store mein bhejta hai; reducer use tumhare incrementByAmount reducer tak route karta hai, jise (state, action) mila.
4. Andar, state.value += action.payload chalta hai — action.payload 5 hai, to agar value 1 thi to 6 ho jati hai.
5. Store nayi state swap karta hai → useSelector 6 dobara padhta hai → re-render → screen Count: 6 dikhata hai.

Yahi poori wajah hai ki reducer ka doosra argument action hai: yahi tarika hai jisse jo data tumne pass kiya reducer tak saath aata hai. increment ne action ignore kiya kyunki use koi data nahi chahiye tha; incrementByAmount action.payload padhta hai kyunki use chahiye.

💡 payload = jo data ek action le jaata hai. incrementByAmount(5) → reducer ke andar action.payload 5 hai. Jo bhi action creator ko pass karo wahi payload ban jata hai.

---

🔎 Poora flow (wiring ka recap)

Ye raha finished app, click-by-click:

1. Page load → <Provider store={store}> store ko available banata hai → Counter chalta hai → useSelector state.counter.value = 0 padhta hai → screen Count: 0.
2. + click → dispatch(increment()) → action {type:'counter/increment'} store ko hit karta hai → increment reducer state.value += 1 chalata hai → Immer nayi state banata hai (value 1) → store notify karta hai → useSelector 1 dobara padhta hai → re-render → Count: 1.
3. − click → dispatch(decrement()) → decrement reducer state.value -= 1 chalata hai → nayi state → dobara padho → re-render → number neeche.
4. Reset click → dispatch(reset()) → reset reducer value = 0 set karta hai → nayi state → re-render → Count: 0.
5. +5 click → dispatch(incrementByAmount(5)) → action {type:'counter/incrementByAmount', payload:5} → reducer state.value += action.payload chalata hai → nayi state (+5) → re-render.

Har ek button wahi beats follow karta hai: click → dispatch(action) → reducer chalta hai → store mein nayi state → useSelector re-render → UI update. Tumne count kabhi mutate nahi kiya, DOM ko kabhi haath nahi lagaya — tumne bas actions dispatch kiye.

---

✅ Jo tumne abhi seekha

• State ka maalik store hai, component nahi — number Redux store mein rehta hai; component bas padhta aur dispatch karta hai.
• createSlice — ek call reducer, auto-generated action creators (increment, incrementByAmount, …), aur reducers ke andar Immer ka safe "mutating" syntax deta hai.
• configureStore + <Provider> — configureStore({ reducer: { counter: counterReducer } }) store banata hai; <Provider store={store}> use React tree mein jodta hai taaki hooks kaam karein.
• useSelector — state ka ek slice padho aur usse subscribe ho, taaki component sirf tabhi re-render ho jab wo value badle.
• useDispatch — dispatch lo, store ko action bhejne ka ek-hi tarika.
• payload — action jo data le jaata hai; incrementByAmount(5) → action.payload 5.
• Universal Redux loop — click → dispatch → reducer → nayi state → useSelector re-render → UI update. Har Redux app isi ek loop pe bana hai.

---

⚠️ Common galtiyan

• <Provider> bhool jana — Provider nahi hai to useSelector/useDispatch store nahi dhoondh paate aur "could not find react-redux context" phenk dete hain. App ko ek baar top pe wrap karo.
• Slice ke bahar state mutate karna — state.value += 1 createSlice ke andar theek hai (Immer), par kahin aur Redux state pe likhna sab kuch tod deta hai. Slices ke bahar state ko read-only maano.
• Poori state select karna — useSelector((state) => state) tumhe store ke har change se subscribe kar deta hai, to component unrelated updates pe bhi re-render hota hai. Hamesha sabse narrow cheez select karo: state.counter.value.
• Creator ko bina call kiye dispatch karna — dispatch(increment) (bina ()) function khud dispatch karta hai, action nahi. dispatch(increment()) hona chahiye.
• count ko assign karke state badalne ki koshish — count = 5 kuch nahi karta; count useSelector se aayi read-only value hai. Store state badalne ka ek-hi tarika hai ek action dispatch karna.

// counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1; },
    decrement: (state) => { state.value -= 1; },
    reset: (state) => { state.value = 0; },
    incrementByAmount: (state, action) => { state.value += action.payload; },
  },
});
export const { increment, decrement, reset, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

// store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';
export const store = configureStore({ reducer: { counter: counterReducer } });

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

function Counter() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();
  return (
    <div>
      <h2>Counter</h2>
      <p>Count: {count}</p>
      <button onClick={() => dispatch(decrement())}>-</button>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(incrementByAmount(5))}>+5</button>
      <button onClick={() => dispatch(reset())}>Reset</button>
    </div>
  );
}
export default Counter;

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

export default function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}