Q63- Explain the Redux data flow.

Redux follows a unidirectional data flow, meaning data moves in one direction — from Action → Reducer → Store → UI (React Component).
This predictable flow makes debugging and state management much easier in large React apps.

---

🔄 Step-by-Step Flow

1. Action (What happened?)

An Action is a plain JavaScript object that describes what you want to do.
It must have a type property and can include additional data.

// Action
const increment = () => ({
  type: "INCREMENT"
});

When a user clicks a button, the app dispatches an action.

---

2. Reducer (How to change state?)

A Reducer is a pure function that takes the current state and an action,
then returns a new state based on that action.

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

---

3. Store (Where is the state?)

The Store holds the entire state tree of your app.
It’s created using createStore() and can be accessed anywhere in your app.

import { createStore } from "redux";

const store = createStore(counterReducer);

---

4. Dispatch (Trigger changes)

When an action is dispatched, Redux sends it to the reducer.
The reducer returns a new state, and Redux updates the store.

store.dispatch(increment());

---

5. React Components (View Layer)

React components subscribe to the store using useSelector() and useDispatch() (from react-redux).

import { useSelector, useDispatch } from "react-redux";

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

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => dispatch({ type: "INCREMENT" })}>+</button>
      <button onClick={() => dispatch({ type: "DECREMENT" })}>-</button>
    </div>
  );
}

---

🔁 Redux Flow Summary

User Action → Dispatch → Reducer → Store → React Component (UI updates)

Explanation:

1. The user interacts with the UI.
2. Component dispatches an action.
3. Reducer decides how state changes.
4. Store updates and notifies subscribed components.
5. React re-renders the UI with the new state.

---

✅ Key Advantages

• Predictable data flow
• Centralized state management
• Easier debugging with tools like Redux DevTools