Q304- What is Redux, and when should it be used?

Redux is a predictable state management library for JavaScript applications, most commonly used with React.

It provides a centralized store where the entire application state lives and can be accessed or updated from any component.

Redux manages global client state, not UI layout or server caching.

---

🧠 Core Concepts of Redux

1️⃣ Single Source of Truth

All app state is stored in one central store.

store = {
  user,
  cart,
  theme
}

---

2️⃣ State Is Read-Only

State can only be changed by dispatching actions.

dispatch({ type: "ADD_ITEM" });

---

3️⃣ Changes via Pure Reducers

Reducers take current state + action → return new state.

function cartReducer(state, action) {
  switch (action.type) {
    case "ADD_ITEM":
      return { ...state, items: [...state.items, action.payload] };
    default:
      return state;
  }
}

---

🔄 Redux Data Flow (Unidirectional)

1. UI dispatches an action
2. Reducer calculates new state
3. Store updates state
4. UI re-renders with new state

Predictable and debuggable ✔

---

❓ When Should Redux Be Used?

✔ Use Redux When:

• App has large, complex global state
• State is shared across many unrelated components
• State changes frequently
• Debugging and time-travel debugging are required
• Predictable state transitions are critical

Examples:

• Auth user info
• Shopping cart
• App-wide settings
• Dashboard data

---

❌ When Redux Should NOT Be Used

• Small applications
• Local component state
• Simple prop drilling scenarios
• Server-state fetching (React Query is better)

Using Redux unnecessarily leads to: ❌ Boilerplate
❌ Complexity
❌ Overengineering

---

🆚 Redux vs Context API

Feature	Redux	Context
State size	Large	Small–medium
Performance	Optimized	Can re-render more
Debugging	Excellent	Limited
Boilerplate	Higher	Low
Middleware	✔ Yes	❌ No

---

🛠 Modern Redux (Redux Toolkit)

Redux Toolkit simplifies Redux by:

• Reducing boilerplate
• Built-in immutability
• Easy async logic

createSlice({
  name: "cart",
  initialState,
  reducers: { addItem() {} }
});

✔ Preferred way to use Redux today

---

🎯 Short Interview Answer

Redux is a predictable state management library that stores global application state in a centralized store and updates it through actions and reducers.
It should be used in large applications with complex shared state that needs to be predictable and easily debuggable.

---

⭐ One-Line Summary

Use Redux when state becomes global, complex, and hard to manage with props or hooks alone.