React · Theory

Redux Example

Theory

40/94

Redux Example

Tiny example: cart reducer. state is a string[]. action { type: 'cart/add', payload: 'Pen' }. return [...state, action.payload]. Never state.push. Dispatch from a button. The screen lists the array. Same pattern as a counter: inc action, n+1.

Walk dispatch → reducer → new store → React-Redux useSelector re-render. That four-step dry run is the ‘Redux example’ viva.

Redux Example — output — Pen. payload is the item. Spread a new array — don’t push on state.

Diagram

view click
      │ dispatch
      ▼
   reducer
      │ new state
      ▼
     store → UI

Exam tip

One add-to-cart reducer on the board.

Example

// Redux cart
const add = { type: "cart/add", payload: "Pen" };
function cart(state = [], action) {
  if (action.type === "cart/add") return [...state, action.payload];
  return state;
}
console.log(cart([], add).join(","));

Redux Example — output: Pen. payload is the item. Spread a new array — don’t push on state.

Short notes

DefAction : type + payload.
RuleReducer : copy, don’t mutate.
RememberUI : useSelector / useDispatch.

// Redux cart const add = { type: "cart/add", payload: "Pen" }; function cart(state = [], action) { if (action.type === "cart/add") return [...state, action.payload]; return state; } console.log(cart([], add).join(","));

Redux Example

Example

Short notes

Questions

Redux Example

Example

Short notes

Questions