🔀
State Management

useReducer Hook

Complex State Logic
💡 useReducer, EK, "VENDING MACHINE" jaisa hai — TUM, EK, ACTION, (BUTTON, PRESS) KARTE, HO, MACHINE, (REDUCER), EXISTING, STATE, aur, ACTION, KO, DEKH, KE, DECIDE, KARTI, hai, NAYA, STATE, KYA, HOGA — SAB, STATE, TRANSITIONS, EK, HI, JAGAH, (REDUCER FUNCTION) MEIN, DEFINED, HOTI, HAIN.

useReducer, useState, KA, EK, ALTERNATIVE, hai, COMPLEX, STATE, LOGIC, KE, LIYE — JAB, STATE, UPDATES, MULTIPLE, SUB-VALUES, INVOLVE, KARTE, HAIN, YA, NEXT, STATE, PREVIOUS, STATE, PAR, COMPLEX, TAREEKE, SE, DEPEND, KARTA, hai. reducer(state, action), FUNCTION, NAYA, STATE, RETURN, KARTA, hai.

dispatch(action), CALL, KARNE, SE, reducer, FUNCTION, TRIGGER, HOTA, hai — YE, PATTERN, Redux, SE, INSPIRED, hai. STATE, TRANSITIONS, PREDICTABLE, aur, TESTABLE, HOTE, HAIN, kyunki, SAARI, LOGIC, EK, PURE, FUNCTION, MEIN, CENTRALIZED, hai.

function reducer(state, action) {
  switch (action.type) {
    case "increment": return { count: state.count + 1 };
    case "decrement": return { count: state.count - 1 };
    case "reset": return { count: 0 };
    default: throw new Error("Unknown action: " + action.type);
  }
}

function Counter() {
  const [state, dispatch] = React.useReducer(reducer, { count: 0 });
  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: "increment" })}>+1</button>
      <button onClick={() => dispatch({ type: "reset" })}>Reset</button>
    </div>
  );
}
🔀
useReducer, EK, "VENDING MACHINE" jaisa hai — TUM, EK, ACTION, (BUTTON, PRESS) KARTE, HO, MACHINE, (REDUCER), EXISTING, STATE, aur, ACTION, KO, DEKH, KE, DECIDE, KARTI, hai, NAYA, STATE, KYA, HOGA — SAB, STATE, TRANSITIONS, EK, HI, JAGAH, (REDUCER FUNCTION) MEIN, DEFINED, HOTI, HAIN.
1 / 2
⚡ Quick Recap
  • useReducer = reducer(state, action) function, se, complex state logic, MANAGE karta hai
  • dispatch(action) = state transition, TRIGGER karta hai
  • Predictable, testable — SAARI logic, EK, PURE FUNCTION mein, CENTRALIZED
On this page (2 subtopics)

useReducer, aur, useContext, KO, COMBINE, KARNA, EK, COMMON, PATTERN, hai (Redux-jaisa, "MINI, STORE" BINA, EXTERNAL, LIBRARY, KE) — "State Management" CATEGORY, MEIN, Context API for State, TOPIC, MEIN, ISKA, DETAIL, DIYA, GAYA, hai.

💡Tip: Ye, PATTERN, MEDIUM-SIZE, APPS, KE, LIYE, KAAFI, hai — BAHUT, BADI, APPS, MEIN, Redux, KE, DEVTOOLS/MIDDLEWARE, ki, ZAROORAT, PAD, SAKTI, hai.

useReducer(reducer, initialArg, init), THIRD, ARGUMENT, init, EK, FUNCTION, hai, JO, LAZILY, INITIAL, STATE, COMPUTE, KARTA, hai — EXPENSIVE, INITIAL, STATE, CALCULATIONS, KE, LIYE, USEFUL, (jaise, localStorage, SE, PARSE, KARNA).

function init(initialCount) {
  return { count: initialCount };
}
const [state, dispatch] = useReducer(reducer, initialCount, init);