Q155- useReducer vs Redux - differences and use cases?

Both useReducer and Redux help manage state in React applications, but they differ in scope, complexity, and usage.

---

1️⃣ useReducer

• Built-in React hook for managing local component state.
• Uses reducer function: (state, action) => newState.
• Good for complex state logic in a single component or small app.
• State is scoped to the component unless lifted up.

Example:

import React, { useReducer } from "react";

const initialState = { count: 0 };

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

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({type: "increment"})}>+</button>
      <button onClick={() => dispatch({type: "decrement"})}>-</button>
    </div>
  );
}

✅ Best for: Component-level state with complex updates.

---

2️⃣ Redux

• External state management library for global application state.
• Central store holds the entire app state.
• Actions + reducers + middleware (e.g., Thunk) handle state updates and side effects.
• Useful for large apps with shared state across many components.

Example:

// reducer.js
const initialState = { count: 0 };
export function counterReducer(state = initialState, action) {
  switch(action.type) {
    case "INCREMENT": return { count: state.count + 1 };
    case "DECREMENT": return { count: state.count - 1 };
    default: return state;
  }
}

// store.js
import { createStore } from "redux";
import { counterReducer } from "./reducer";
export const store = createStore(counterReducer);

✅ Best for: Large-scale apps with shared state, multiple components, and async side effects.

---

🔹 Key Differences

Feature	useReducer	Redux
Scope	Component-level / local	Global / entire app
Boilerplate	Minimal	More setup required
Async handling	Needs custom logic	Middleware (Thunk, Saga)
DevTools	React DevTools	Redux DevTools
Use Case	Small-medium components	Large apps with shared state

---

💡 In Short:

• useReducer → simpler, local state management with reducer logic.
• Redux → centralized global state management for complex, large applications.

If state is shared across many components or requires async actions, prefer Redux; otherwise, useReducer is sufficient.