Action and state

Learn to define state transitions with action objects.

Action and state

An action is an object describing what happened: {type: "increment"}. You send this object to the reducer with dispatch; the reducer reads the type.

Example: in switch(action.type) a case "increment": return state + 1;. Each case returns a new state; the default returns the current state.

Actions can carry data too: {type: "add", payload: 5}.

Calling dispatch

To send an action you write dispatch({type: "increment"}). dispatch calls the reducer and stores the returned new state; React re-renders.

You can pass any action object to dispatch; the name is not fixed but the type field is conventionally required.

This structure separates logic from the component and makes tests easy.

Exercise Incrementing reducer

Complete the skeleton. Write a reducer function; in switch(action.type) have case "increment": return state + 1; and default: return state;. Write a Counter component; import useReducer, define const [state, dispatch] = useReducer(reducer, 0);. Return <button onClick={() => dispatch({type: "increment"})}>{state}</button>. Export it.

Show example solution

import { useReducer } from "react";

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

function Counter() {
  const [state, dispatch] = useReducer(reducer, 0);
  return <button onClick={() => dispatch({ type: "increment" })}>{state}</button>;
}

export default Counter;

Test yourself

Which field does an action carry at least?
```
type matches in the reducer switch.
```
- payload
- value
- id
- type
Show answer

type — type tells the action kind.

Action and state: fill in the missing part

case "increment": return state + ____;

Show answer

case "increment": return state + 1;

Action and state: match the terms

dispatch({type})

Send an action
switch(action.type)

Match the type
case "x"

One case
return state

Default

Next lesson: useState vs useReducer

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies