Extracting state logic into a reducer

A cart with its updates in five places

A shop's cart changes in many ways. You add a tea, press + or - on a line, remove a line, or empty the whole cart. Here is a cart that does all five with useState. Click Add Green tea twice, Add Chai, then press - on Chai.

1import { useState } from "react";2import { products } from "./products.js";3 4export default function App() {5  const [items, setItems] = useState([]);6 7  function handleAdd(product) {8    if (items.some((item) => item.id === product.id)) {9      setItems(items.map((item) =>10        item.id === product.id ? { ...item, qty: item.qty + 1 } : item11      ));12    } else {13      setItems([...items, { ...product, qty: 1 }]);14    }15  }16 17  function handleIncrease(id) {18    setItems(items.map((item) =>19      item.id === id ? { ...item, qty: item.qty + 1 } : item20    ));21  }22 23  function handleDecrease(id) {24    setItems(items25      .map((item) => (item.id === id ? { ...item, qty: item.qty - 1 } : item))26      .filter((item) => item.qty > 0));27  }28 29  function handleRemove(id) {30    setItems(items.filter((item) => item.id !== id));31  }32 33  function handleEmpty() {34    setItems([]);35  }36 37  const total = items.reduce((sum, item) => sum + item.price * item.qty, 0);38 39  return (40    <>41      {products.map((product) => (42        <button key={product.id} onClick={() => handleAdd(product)}>43          Add {product.name}44        </button>45      ))}46      <ul>47        {items.map((item) => (48          <li key={item.id}>49            {item.name} × {item.qty}{" "}50            <button onClick={() => handleDecrease(item.id)}>-</button>51            <button onClick={() => handleIncrease(item.id)}>+</button>52            <button onClick={() => handleRemove(item.id)}>Remove</button>53          </li>54        ))}55      </ul>56      <p>Total: ${total}</p>57      <button onClick={handleEmpty}>Empty cart</button>58    </>59  );60}

Line 5 keeps the cart in state: an array of lines like { id: 1, name: "Green tea", price: 3, qty: 2 }, from the products in the products.js tab. Then come five event handlers, and each one works out the next array itself and passes it to setItems:

• handleAdd (lines 7 to 15) adds 1 to the line if the tea is already in the cart, or adds a new line with qty: 1.
• handleIncrease and handleDecrease (lines 17 to 27) change one line's qty with map. Line 26 then drops any line that reached 0, so pressing - on Chai removed it.
• handleRemove (lines 29 to 31) filters one line out, and handleEmpty (lines 33 to 35) sets an empty array.

Every handler follows the rules from Updating arrays in state: it makes a new array and never changes the old one. The cart works. But to answer "what can happen to this cart?", you have to read thirty lines of handlers, mixed in with the code that draws the page. Add a coupon, a stock limit, or an undo button, and the component gets longer still.

React gives you a second way to keep state, made for this: a reducer. You move every way the cart can change into one function outside the component. The handlers only say what happened, like "the user pressed + on Green tea", and that function works out the next cart. This lesson turns this cart into one with a reducer, in three steps.

Step 1: handlers say what happened

The first step changes only the handlers. Instead of working out the next array, each handler calls dispatch with an object that describes what the user just did. That object is called an action. Here are the five handlers after the change; step 3 shows where dispatch comes from, so this block is a piece of the component and doesn't run on its own:

function handleAdd(product) {
  dispatch({ type: "added", product: product });
}

function handleIncrease(id) {
  dispatch({ type: "increased", id: id });
}

function handleDecrease(id) {
  dispatch({ type: "decreased", id: id });
}

function handleRemove(id) {
  dispatch({ type: "removed", id: id });
}

function handleEmpty() {
  dispatch({ type: "emptied" });
}

Line 2 dispatches { type: "added", product: product }: "a product was added, and here it is". Line 6 dispatches { type: "increased", id: id }: "the + on this line was pressed". Lines 10 and 14 do the same for - and Remove, and line 18's action needs nothing but its type. The handlers are now one line each, and none of them mentions map, filter, or qty + 1.

An action is a plain JavaScript object. React doesn't look inside it, but the usual shape has two parts:

• type: a string that names what happened, like "added" or "removed". The reducer reads it to choose what to do.
• Any other fields the reducer needs to do it: the product that was added, or the id of the line. You will often see the short form { type: "removed", id }, which means the same as id: id.

Name each action after what the user did, not after how the state should change. "Increased" is a click on +; "set the items to this array" is a decision the handler would have to make itself. How to read the table: each row is one click in the cart, an action that describes it, and a less useful one.

Dispatching an action doesn't change anything by itself yet. Something has to read the action and work out the next cart. That's the reducer.

Step 2: one function works out the next state

A reducer is a plain function with two parameters, the current state and an action, that returns the next state. All the logic you took out of the handlers goes into it. Here it is, with three calls at the bottom so you can see what it returns:

function cartReducer(items, action) {
  switch (action.type) {
    case "added": {
      if (items.some((item) => item.id === action.product.id)) {
        return items.map((item) =>
          item.id === action.product.id ? { ...item, qty: item.qty + 1 } : item
        );
      }
      return [...items, { ...action.product, qty: 1 }];
    }
    case "increased": {
      return items.map((item) =>
        item.id === action.id ? { ...item, qty: item.qty + 1 } : item
      );
    }
    case "decreased": {
      return items
        .map((item) => (item.id === action.id ? { ...item, qty: item.qty - 1 } : item))
        .filter((item) => item.qty > 0);
    }
    case "removed": {
      return items.filter((item) => item.id !== action.id);
    }
    case "emptied": {
      return [];
    }
    default: {
      throw Error("Unknown action: " + action.type);
    }
  }
}

const greenTea = { id: 1, name: "Green tea", price: 3 };
const before = [];
const after = cartReducer(before, { type: "added", product: greenTea });
const later = cartReducer(after, { type: "increased", id: 1 });

console.log(after.length, after[0].qty);
console.log(later[0].qty);
console.log(before.length, after[0].qty);

Line 1 takes items, the cart as it is now, and action. Line 2 is a switch on action.type: one case per kind of action, and each case returns the next cart.

• case "added" (lines 3 to 10) is the code from handleAdd, reading the product from action.product.
• "increased", "decreased", "removed", and "emptied" (lines 11 to 26) are the other four handlers' code, reading action.id.
• default (lines 27 to 29) runs for any other type and throws an error. A typo like "increasd" then fails loudly with Unknown action: increasd instead of quietly doing nothing.

The braces after each case, like case "added": {, give the case its own block, so a const declared in one case can't clash with one in another. Each case returns, so no case runs into the next one.

Lines 35 and 36 call the reducer twice by hand, and lines 38 to 40 print what came back. Line 38 prints 1 1: after "added", the cart has one line, with qty 1. Line 39 prints 2: line 36 passed after and an "increased" action. Line 40 prints 0 1: before is still empty and after still says 1. Each call made a new array and left the old ones as they were. Press Edit & run and change line 36's type to "removed": line 39 now throws a TypeError, because the cart in later is empty and has no later[0].

Notice what's missing: React. The reducer doesn't import anything or call setItems. It's an ordinary pure function: the same cart and action always give the same next cart. That's why you can call it yourself, and test it, without a component.

Why it's called a reducer

The name comes from the array method reduce, which takes a list and "reduces" it to one value by calling your function once per item. A reducer has exactly the shape reduce wants: the result so far, and the next item. So a list of actions reduces to one cart:

// cartReducer is the function from the example above.
const actions = [
  { type: "added", product: { id: 1, name: "Green tea", price: 3 } },
  { type: "added", product: { id: 2, name: "Mint tea", price: 4 } },
  { type: "increased", id: 1 },
  { type: "removed", id: 2 },
];

const items = actions.reduce(cartReducer, []);
console.log(items.map((item) => item.name + " × " + item.qty).join(", "));

Lines 2 to 7 list four actions, in the order a user might cause them. Line 9 starts from an empty cart, [], and calls cartReducer with each action in turn, passing each result to the next call. Line 10 prints Green tea × 2: two Green teas were added (one by "added", one by "increased"), and Mint tea was added and then removed.

React does the same thing over time. Each click adds an action, and React reduces the cart one action at a time, keeping the result between renders.

Step 3: connect the reducer with useReducer

The last step swaps useState for useReducer, the hook that keeps state and runs your reducer on it. Here is the finished cart. cartReducer.js holds the reducer from Step 2, with export in front of it. The page works exactly as before: add teas, press + and -, and empty the cart.

1import { useReducer } from "react";2import { cartReducer } from "./cartReducer.js";3import { products } from "./products.js";4 5export default function App() {6  const [items, dispatch] = useReducer(cartReducer, []);7 8  function handleAdd(product) {9    dispatch({ type: "added", product: product });10  }11 12  function handleIncrease(id) {13    dispatch({ type: "increased", id: id });14  }15 16  function handleDecrease(id) {17    dispatch({ type: "decreased", id: id });18  }19 20  function handleRemove(id) {21    dispatch({ type: "removed", id: id });22  }23 24  function handleEmpty() {25    dispatch({ type: "emptied" });26  }27 28  const total = items.reduce((sum, item) => sum + item.price * item.qty, 0);29 30  return (31    <>32      {products.map((product) => (33        <button key={product.id} onClick={() => handleAdd(product)}>34          Add {product.name}35        </button>36      ))}37      <ul>38        {items.map((item) => (39          <li key={item.id}>40            {item.name} × {item.qty}{" "}41            <button onClick={() => handleDecrease(item.id)}>-</button>42            <button onClick={() => handleIncrease(item.id)}>+</button>43            <button onClick={() => handleRemove(item.id)}>Remove</button>44          </li>45        ))}46      </ul>47      <p>Total: ${total}</p>48      <button onClick={handleEmpty}>Empty cart</button>49    </>50  );51}

Line 1 imports useReducer from React, and line 2 imports the reducer from its file. Line 6 is the only new idea:

const [items, dispatch] = useReducer(cartReducer, []);

• useReducer takes two arguments here: the reducer, cartReducer, and the starting state, []. It can take a third, an init function that builds the starting state from the second argument on the first render; this lesson doesn't need it.
• It returns two values, like useState does: items, the current state for this render, and dispatch, the function that sends actions to the reducer.
• Like every hook, it goes at the top level of the component, not inside an if or a loop.

Lines 8 to 26 are the handlers from Step 1, and lines 28 to 51 haven't changed at all. When you press + on Green tea, line 13 dispatches { type: "increased", id: 1 }. React puts the action in a queue and renders App again. During that render, useReducer calls cartReducer(items, action) and returns what it gave back as the new items.

dispatch asks for the next render

dispatch works like a set function from useState. It doesn't change items where you call it; it asks React for a render with the next state. This counter has an Add two button that dispatches twice and then logs. Click it, and read the console under the result:

1import { useReducer } from "react";2 3function quantityReducer(qty, action) {4  switch (action.type) {5    case "increased":6      return qty + 1;7    case "reset":8      return 1;9    default:10      throw Error("Unknown action: " + action.type);11  }12}13 14export default function App() {15  const [qty, dispatch] = useReducer(quantityReducer, 1);16 17  function handleAddTwo() {18    dispatch({ type: "increased" });19    dispatch({ type: "increased" });20    console.log("qty during this click:", qty);21  }22 23  return (24    <>25      <p>Green tea × {qty}</p>26      <button onClick={handleAddTwo}>Add two</button>27      <button onClick={() => dispatch({ type: "reset" })}>Reset</button>28    </>29  );30}

The state here is a number, not an array: a reducer works for state of any kind. One click shows Green tea × 3, and the console says qty during this click: 1. Two things happened:

• Both actions counted. React queued them and called quantityReducer once per action, each time with the result of the one before: 1, then 2, then 3. That's how the updater functions you passed to a set function work, too.
• Line 20 still read 1. qty belongs to the render the click happened in. It's a snapshot, and the new value arrives with the next render.

You can watch the reducer do its work in the playground below. It runs the cart above with the lesson's cartReducer, and lists every action you dispatch, with the cart before it and after it.

Press Add Green tea twice: the second action is "added" again, and the reducer turns it into Green tea × 2 rather than a second line. Press - twice on a tea with one: the reducer removes the line at 0. The log is the full story of the cart: if the cart is ever wrong, either an action in the log is wrong, or the reducer turned a right action into a wrong cart. That's two places to look, instead of every handler.

Reducers must be pure

React calls your reducer during rendering, when it works out the next state, not when you call dispatch. So a reducer follows the same rule as a component, from Keeping components pure: given the same state and action, it returns the same result, and it changes nothing outside itself. Two things break that rule.

Changing the state it was given

This saved-teas list has a reducer that adds a name with push. Click Save Chai once:

1import { useReducer } from "react";2 3function savedReducer(saved, action) {4  switch (action.type) {5    case "saved": {6      saved.push(action.name);7      return [...saved];8    }9    case "cleared": {10      return [];11    }12    default: {13      throw Error("Unknown action: " + action.type);14    }15  }16}17 18export default function App() {19  const [saved, dispatch] = useReducer(savedReducer, []);20 21  return (22    <>23      <button onClick={() => dispatch({ type: "saved", name: "Chai" })}>Save Chai</button>24      <button onClick={() => dispatch({ type: "cleared" })}>Clear</button>25      <p>Saved: {saved.join(", ") || "nothing yet"}</p>26    </>27  );28}

One click shows Saved: Chai, Chai. Line 6 pushes the name into saved, the array React is keeping as the current state, and line 7 returns a copy. In development, every example on this page runs inside <StrictMode>, and StrictMode calls your reducer twice with the same state, to catch exactly this. The first call changed saved, so the second call found Chai already in it and pushed again.

A production build calls the reducer once, so users would see one Chai. The bug is still there: the reducer changed the array React keeps as the current state, without an action saying so, and the next render reads a list no action produced. The fix is the rule from Updating arrays in state: make a new array. Press Edit & run and replace lines 6 and 7 with return [...saved, action.name];. Now one click saves Chai once: StrictMode's second call gets the same untouched state, so it returns a new array with the same contents as the first.

1import { useReducer } from "react";2 3function savedReducer(saved, action) {4  switch (action.type) {5    case "saved": {6      return [...saved, action.name];7    }8    case "cleared": {9      return [];10    }11    default: {12      throw Error("Unknown action: " + action.type);13    }14  }15}16 17export default function App() {18  const [saved, dispatch] = useReducer(savedReducer, []);19 20  return (21    <>22      <button onClick={() => dispatch({ type: "saved", name: "Chai" })}>Save Chai</button>23      <button onClick={() => dispatch({ type: "cleared" })}>Clear</button>24      <p>Saved: {saved.join(", ") || "nothing yet"}</p>25    </>26  );27}

A reducer that changes the array and then returns that same array has a different symptom: nothing happens on the page. React compares the old and the new state with Object.is, sees the same array, and skips the render. Either way, the cure is the same: copy, never change.

Doing work outside the reducer's job

A reducer only works out the next state. Sending a request, saving to localStorage, showing an alert, starting a timer, or reading the clock with Date.now() or Math.random() all reach outside, or give a different answer each call. Those belong in the event handler, which runs once per click. If the reducer needs the result, put it in the action:

function handleAdd(product) {
  const addedAt = Date.now();
  dispatch({ type: "added", product: product, addedAt: addedAt });
  fetch("/api/cart", { method: "POST", body: JSON.stringify(product) });
}

Line 2 reads the clock once, in the handler. Line 3 puts the time in the action as addedAt, so the reducer can store it without reading the clock itself. Line 4 tells the server, also from the handler. (Talking to a server while a component is on the screen, without a click, is the job of Effects.)

useState or useReducer?

Both hooks keep state, and anything you can write with one, you can write with the other. Choose by how the state changes. How to read the table: each row is one question to ask, with an answer for each hook.

A good rule: start with useState. Switch to a reducer when one piece of state is changed by many handlers, when the changes follow rules (a stock limit, a line removed at 0), or when you keep finding bugs in how the state gets updated. You can also use both in one component:

const [items, dispatch] = useReducer(cartReducer, []);
const [isOpen, setIsOpen] = useState(false);

Line 1 keeps the cart in a reducer, because many clicks change it in many ways. Line 2 keeps whether the cart drawer is open in useState, because it's one value with one simple change.

Testing a reducer as a plain function

Because a reducer is a pure function that doesn't need React, you can test it by calling it and checking what it returns. These checks use only JavaScript (the function is the one from Step 2):

// cartReducer is the function from Step 2.
function check(name, actual, expected) {
  const passed = JSON.stringify(actual) === JSON.stringify(expected);
  console.log((passed ? "pass: " : "FAIL: ") + name);
}

const tea = { id: 1, name: "Green tea", price: 3 };
const oneTea = [{ id: 1, name: "Green tea", price: 3, qty: 1 }];

check("added puts a new line in", cartReducer([], { type: "added", product: tea }), oneTea);
check("decreased at 1 removes the line", cartReducer(oneTea, { type: "decreased", id: 1 }), []);
check("the old state is not changed", oneTea[0].qty, 1);

check on lines 2 to 5 compares what the reducer returned with what you expected, by turning both into JSON text, and prints pass or FAIL. Line 10 checks that "added" puts in a line with qty: 1, line 11 that "decreased" at 1 removes the line, and line 12 that the old state wasn't changed by line 11. All three print pass. Press Edit & run and change line 11's expected [] to oneTea: that check now prints FAIL.

In a real project you would write the same checks with a test runner such as Vitest, which the Unit testing lesson introduces. The test imports the reducer from its file and never renders a component:

import { expect, test } from "vitest";
import { cartReducer } from "./cartReducer.js";

test("decreased at 1 removes the line", () => {
  const items = [{ id: 1, name: "Green tea", price: 3, qty: 1 }];
  const next = cartReducer(items, { type: "decreased", id: 1 });
  expect(next).toEqual([]);
});

Line 2 imports cartReducer from cartReducer.js. Line 6 calls it, and line 7 says the result must equal an empty array. If someone later breaks the "decreased" case, this test fails before any user sees the bug.

A delivery form with one action per click

Reducers aren't only for lists. A form with several fields, a check before sending, and a way to start over is a good fit too. Type a name, tick Express delivery, press Send, then Start over. Also try Send with an empty name.

1import { useReducer } from "react";2 3const emptyForm = { name: "", express: false, giftWrap: false, sent: false, error: "" };4 5function formReducer(form, action) {6  switch (action.type) {7    case "edited": {8      return { ...form, [action.field]: action.value, error: "" };9    }10    case "submitted": {11      if (form.name.trim() === "") {12        return { ...form, error: "Please enter a name." };13      }14      return { ...form, sent: true };15    }16    case "reset": {17      return emptyForm;18    }19    default: {20      throw Error("Unknown action: " + action.type);21    }22  }23}24 25export default function App() {26  const [form, dispatch] = useReducer(formReducer, emptyForm);27 28  function edit(field, value) {29    dispatch({ type: "edited", field: field, value: value });30  }31 32  if (form.sent) {33    return (34      <>35        <p>36          Thanks, {form.name}. {form.express ? "Express" : "Standard"} delivery37          {form.giftWrap ? ", gift wrapped." : "."}38        </p>39        <button onClick={() => dispatch({ type: "reset" })}>Start over</button>40      </>41    );42  }43 44  return (45    <>46      <label>47        Name <input value={form.name} onChange={(e) => edit("name", e.target.value)} />48      </label>49      <label>50        <input type="checkbox" checked={form.express}51          onChange={(e) => edit("express", e.target.checked)} />52        Express delivery53      </label>54      <label>55        <input type="checkbox" checked={form.giftWrap}56          onChange={(e) => edit("giftWrap", e.target.checked)} />57        Gift wrap58      </label>59      <p>{form.error}</p>60      <button onClick={() => dispatch({ type: "submitted" })}>Send</button>61      <button onClick={() => dispatch({ type: "reset" })}>Start over</button>62    </>63  );64}

Line 3 is the whole form as one object: three fields, whether it was sent, and an error message. formReducer handles three actions:

• "edited" (lines 7 to 9) copies the form with one field changed. [action.field] is a computed key: the action says which field, so the text box and both checkboxes share one case. It also clears the error.
• "submitted" (lines 10 to 15) checks the name. With no name, it returns the form with an error, and the page shows Please enter a name.; otherwise it marks the form as sent.
• "reset" (lines 16 to 18) returns emptyForm from line 3. Returning that same object every time is fine: the reducer never changes it, it only copies it.

Lines 28 to 30 wrap the "edited" action in a small edit function the inputs share. When form.sent is true, lines 32 to 42 show the thank-you message instead of the form.

Look at Start over. One click puts back five fields, and it's one action, { type: "reset" }, not five "edited" actions. Give each action the meaning of one thing the user did, even when it changes many fields. Then a log of the actions reads like a story of the user's visit: edited, edited, submitted, reset.

Common mix-ups

• "dispatch changes the state right away." No. It queues the action and asks for a render. The variable you read in the same handler keeps its old value; Add two logged 1 and then showed 3.
• "The reducer runs when I call dispatch." No. React calls it while rendering the next state, and StrictMode calls it twice in development. That's why it has to be pure.
• "A reducer changes the state it gets." No. It returns a new state and leaves the old one as it was. Changing it saved Chai twice, or left the page as it was.
• "useReducer is better than useState." Neither is better. They can do the same things; a reducer is more code that pays off when many handlers change one piece of state.
• "Actions must have a type field." No. An action can be any value. A type string is a convention that makes reducers easy to read, and almost everyone follows it.
• "useReducer is for big apps, like Redux." No. It's a built-in hook for one component's state, useful in a small form. Libraries like Redux use the same reducer idea for a whole app's state.

Practice exercises

The JavaScript exercises print their answer when you press Edit & run. The React ones show their result under the code, and update as you type. Guess first, then use the hints.

function quantityReducer(qty, action) {
  switch (action.type) {
    case "increased":
      return qty + 1;
    case "decreased":
      return Math.max(qty - 1, 0);
    case "reset":
      return 1;
    default:
      throw Error("Unknown action: " + action.type);
  }
}

const actions = [
  { type: "increased" },
  { type: "reset" },
  { type: "decreased" },
  { type: "decreased" },
  { type: "increased" },
];

console.log(actions.reduce(quantityReducer, 3));

function quantityReducer(qty, action) {
  switch (action.type) {
    case "increased":
      return qty + 1;
    case "decreased":
      return Math.max(qty - 1, 0);
    case "reset":
      return 1;
    default:
      throw Error("Unknown action: " + action.type);
  }
}

const actions = [
  { type: "increased" },
  { type: "reset" },
  { type: "decreased" },
  { type: "decreased" },
  { type: "increased" },
];

console.log(actions.reduce(quantityReducer, 3));

1import { useReducer } from "react";2 3function quantityReducer(qty, action) {4  switch (action.type) {5    case "increased":6      return qty + 1;7    default:8      throw Error("Unknown action: " + action.type);9  }10}11 12export default function App() {13  const [qty, dispatch] = useReducer(quantityReducer, 2);14 15  return (16    <>17      <p>Mint tea × {qty}</p>18      <button onClick={() => dispatch({ type: "decreased" })}>-</button>19      <button onClick={() => dispatch({ type: "increased" })}>+</button>20    </>21  );22}

1import { useReducer } from "react";2 3function quantityReducer(qty, action) {4  switch (action.type) {5    case "increased":6      return qty + 1;7    case "decreased":8      return Math.max(qty - 1, 1);9    default:10      throw Error("Unknown action: " + action.type);11  }12}13 14export default function App() {15  const [qty, dispatch] = useReducer(quantityReducer, 2);16 17  return (18    <>19      <p>Mint tea × {qty}</p>20      <button onClick={() => dispatch({ type: "decreased" })}>-</button>21      <button onClick={() => dispatch({ type: "increased" })}>+</button>22    </>23  );24}

1import { useReducer } from "react";2 3function cartReducer(items, action) {4  switch (action.type) {5    case "increased": {6      return items.map((item) => {7        if (item.id === action.id) {8          item.qty = item.qty + 1;9        }10        return item;11      });12    }13    default: {14      throw Error("Unknown action: " + action.type);15    }16  }17}18 19const startItems = [{ id: 1, name: "Green tea", price: 3, qty: 1 }];20 21export default function App() {22  const [items, dispatch] = useReducer(cartReducer, startItems);23 24  return (25    <ul>26      {items.map((item) => (27        <li key={item.id}>28          {item.name} × {item.qty}{" "}29          <button onClick={() => dispatch({ type: "increased", id: item.id })}>+</button>30        </li>31      ))}32    </ul>33  );34}

1import { useReducer } from "react";2 3function cartReducer(items, action) {4  switch (action.type) {5    case "increased": {6      return items.map((item) =>7        item.id === action.id ? { ...item, qty: item.qty + 1 } : item8      );9    }10    default: {11      throw Error("Unknown action: " + action.type);12    }13  }14}15 16const startItems = [{ id: 1, name: "Green tea", price: 3, qty: 1 }];17 18export default function App() {19  const [items, dispatch] = useReducer(cartReducer, startItems);20 21  return (22    <ul>23      {items.map((item) => (24        <li key={item.id}>25          {item.name} × {item.qty}{" "}26          <button onClick={() => dispatch({ type: "increased", id: item.id })}>+</button>27        </li>28      ))}29    </ul>30  );31}

1import { useState } from "react";2 3export default function App() {4  const [settings, setSettings] = useState({ email: true, sms: false, push: true });5 6  function handleToggle(name) {7    setSettings({ ...settings, [name]: !settings[name] });8  }9 10  function handleAllOff() {11    setSettings({ email: false, sms: false, push: false });12  }13 14  return (15    <>16      <button onClick={() => handleToggle("email")}>Email: {settings.email ? "on" : "off"}</button>17      <button onClick={() => handleToggle("sms")}>SMS: {settings.sms ? "on" : "off"}</button>18      <button onClick={() => handleToggle("push")}>Push: {settings.push ? "on" : "off"}</button>19      <button onClick={handleAllOff}>Turn all off</button>20    </>21  );22}

1import { useReducer } from "react";2 3const startSettings = { email: true, sms: false, push: true };4 5function settingsReducer(settings, action) {6  switch (action.type) {7    case "toggled": {8      return { ...settings, [action.name]: !settings[action.name] };9    }10    case "all_off": {11      return { email: false, sms: false, push: false };12    }13    default: {14      throw Error("Unknown action: " + action.type);15    }16  }17}18 19export default function App() {20  const [settings, dispatch] = useReducer(settingsReducer, startSettings);21 22  function handleToggle(name) {23    dispatch({ type: "toggled", name: name });24  }25 26  function handleAllOff() {27    dispatch({ type: "all_off" });28  }29 30  return (31    <>32      <button onClick={() => handleToggle("email")}>Email: {settings.email ? "on" : "off"}</button>33      <button onClick={() => handleToggle("sms")}>SMS: {settings.sms ? "on" : "off"}</button>34      <button onClick={() => handleToggle("push")}>Push: {settings.push ? "on" : "off"}</button>35      <button onClick={handleAllOff}>Turn all off</button>36    </>37  );38}

function savedReducer(saved, action) {
  switch (action.type) {
    case "saved":
      return saved.includes(action.name) ? saved : [...saved, action.name];
    case "removed":
      return saved.filter((name) => name === action.name);
    case "cleared":
      return [];
    default:
      throw Error("Unknown action: " + action.type);
  }
}

function check(name, actual, expected) {
  const passed = JSON.stringify(actual) === JSON.stringify(expected);
  console.log((passed ? "pass: " : "FAIL: ") + name);
}

const one = ["Chai"];
const two = ["Chai", "Mint tea"];

check("saved adds a name", savedReducer([], { type: "saved", name: "Chai" }), ["Chai"]);
check("saved skips a name it has", savedReducer(one, { type: "saved", name: "Chai" }), ["Chai"]);
check("removed takes the name out", savedReducer(two, { type: "removed", name: "Chai" }), ["Mint tea"]);

function savedReducer(saved, action) {
  switch (action.type) {
    case "saved":
      return saved.includes(action.name) ? saved : [...saved, action.name];
    case "removed":
      return saved.filter((name) => name !== action.name);
    case "cleared":
      return [];
    default:
      throw Error("Unknown action: " + action.type);
  }
}

function check(name, actual, expected) {
  const passed = JSON.stringify(actual) === JSON.stringify(expected);
  console.log((passed ? "pass: " : "FAIL: ") + name);
}

const one = ["Chai"];
const two = ["Chai", "Mint tea"];

check("saved adds a name", savedReducer([], { type: "saved", name: "Chai" }), ["Chai"]);
check("saved skips a name it has", savedReducer(one, { type: "saved", name: "Chai" }), ["Chai"]);
check("removed takes the name out", savedReducer(two, { type: "removed", name: "Chai" }), ["Mint tea"]);

1import { useReducer } from "react";2import { cartReducer } from "./cartReducer.js";3import { products } from "./products.js";4 5export default function App() {6  const [items, dispatch] = useReducer(cartReducer, []);7 8  function handleAdd(product) {9    dispatch({ type: "added", product: product });10  }11 12  function handleIncrease(id) {13    dispatch({ type: "increased", id: id });14  }15 16  function handleDecrease(id) {17    dispatch({ type: "decreased", id: id });18  }19 20  function handleRemove(id) {21    dispatch({ type: "removed", id: id });22  }23 24  function handleEmpty() {25    dispatch({ type: "emptied" });26  }27 28  const total = items.reduce((sum, item) => sum + item.price * item.qty, 0);29 30  return (31    <>32      {products.map((product) => (33        <button key={product.id} onClick={() => handleAdd(product)}>34          Add {product.name}35        </button>36      ))}37      <ul>38        {items.map((item) => (39          <li key={item.id}>40            {item.name} × {item.qty}{" "}41            <button onClick={() => handleDecrease(item.id)}>-</button>42            <button onClick={() => handleIncrease(item.id)}>+</button>43            <button onClick={() => handleRemove(item.id)}>Remove</button>44          </li>45        ))}46      </ul>47      <p>Total: ${total}</p>48      <button onClick={handleEmpty}>Empty cart</button>49    </>50  );51}

1import { useReducer } from "react";2import { cartReducer } from "./cartReducer.js";3import { products } from "./products.js";4 5export default function App() {6  const [items, dispatch] = useReducer(cartReducer, []);7 8  function handleAdd(product) {9    dispatch({ type: "added", product: product });10  }11 12  function handleIncrease(id) {13    dispatch({ type: "increased", id: id });14  }15 16  function handleDecrease(id) {17    dispatch({ type: "decreased", id: id });18  }19 20  function handleRemove(id) {21    dispatch({ type: "removed", id: id });22  }23 24  function handleEmpty() {25    dispatch({ type: "emptied" });26  }27 28  const total = items.reduce((sum, item) => sum + item.price * item.qty, 0);29 30  return (31    <>32      {products.map((product) => (33        <button key={product.id} onClick={() => handleAdd(product)}>34          Add {product.name}35        </button>36      ))}37      <ul>38        {items.map((item) => (39          <li key={item.id}>40            {item.name} × {item.qty}{" "}41            <button onClick={() => handleDecrease(item.id)}>-</button>42            <button onClick={() => handleIncrease(item.id)}>+</button>43            <button onClick={() => handleRemove(item.id)}>Remove</button>44          </li>45        ))}46      </ul>47      <p>Total: ${total}</p>48      <button onClick={handleEmpty}>Empty cart</button>49    </>50  );51}

Check your understanding

For each code question, follow the actions one at a time, and remember when React calls the reducer. Press Edit & run on a question's code to check your answer.

Key takeaways

• A reducer is a function that takes the current state and an action, and returns the next state.
• Event handlers dispatch actions that say what the user did, like { type: "increased", id: 1 }, and the reducer decides how the state changes.
• useReducer(reducer, initialState) returns the current state and dispatch. Like a set function, dispatch asks for the next render; the reducer gets each queued action in turn.
• Reducers must be pure: copy instead of changing, and do requests, storage, and clock reads in the handler. StrictMode calls them twice in development to catch mistakes.
• Choose useReducer when many handlers change one piece of state; it gathers the logic in one place you can log and test as a plain function. Otherwise useState is simpler.

Coming next: Passing data deeply with context. A reducer keeps the logic of one component's state in one place; context lets that component hand data to components far below it, without passing props through every level.