Q16- Explain Redux flow.

The flow follows a one-way data cycle — making state predictable and easier to debug.

Here’s a simple breakdown 👇

---

🧠 1. Action → What happened

An action is a plain object that describes what you want to do (e.g., increment, update data).

const incrementAction = {
  type: "INCREMENT",
  payload: 1
};

---

🧠 2. Dispatcher → Sends the action

The action is dispatched to the Redux store using dispatch().

dispatch(incrementAction);

---

🧠 3. Reducer → How state changes

A reducer is a pure function that receives the current state and the action, then returns a new state.

function counterReducer(state = { count: 0 }, action) {
  switch (action.type) {
    case "INCREMENT":
      return { count: state.count + action.payload };
    default:
      return state;
  }
}

---

🧠 4. Store → Holds the state

The store is where the app’s global state lives. It’s created using createStore() or configureStore().

import { createStore } from "redux";

const store = createStore(counterReducer);

---

🧠 5. View (UI) → Reflects the new state

When the store updates, React components subscribed to it re-render with the latest state.

---

✅ Redux Flow Recap:
Action ➝ Dispatch ➝ Reducer ➝ Store ➝ View

📌 And when a user interacts with the UI again, the cycle repeats.

---

👉 Why this flow is powerful:

• Predictable state changes.
• Easy debugging and testing.
• Centralized state management.