Summary - useReducer

Write a multi-action counter reducer and connect it to a component.

Summary - useReducer

In this group you learned useReducer. State is managed by a reducer pure function: (state, action) => newState. You send actions with dispatch.

Actions are {type, payload} objects; the reducer switches on the type. For complex state useReducer is cleaner than useState.

Later Redux will extend the same model; you built the base here.

Exercise useReducer summary task

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

Show example solution

import { useReducer } from "react";

function reducer(state, action) {
  switch (action.type) {
    case "reset": return 0;
    default: return state;
  }
}

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

export default Counter;

Test yourself

Which is wrong?
```
The choice depends on complexity.
```
- reducer is a pure function
- useReducer is always better than useState
- an action carries type
- dispatch sends an action
Show answer

useReducer is always better than useState — For simple state useState may be better.
Summary - useReducer: match the terms

reducer

Pure function
dispatch

Sends an action
type

Action kind
switch

Type matching

Next lesson: What is useEffect?

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies