useReducer и размеченные объединения

Здесь будет встроен видео-разбор темы (5–7 минут, YouTube / RuTube / VK Видео) — тем, кто лучше воспринимает на слух, текст ниже не обязателен.

Квиз ниже держит три значения: номер вопроса, выбранный вариант и счёт. По отдельности они безобидны, но между ними есть правило: как только меняется вопрос, выбор обязан обнулиться. Записать это правило негде — оно живёт в обработчиках, и каждый новый обработчик обязан о нём помнить. Пример нажимает «вариант 2», а потом «заново». Предскажите последнюю строку вывода.

tsx

const QUESTIONS = [
  { text: "2 + 2 = ?", right: 1 },
  { text: "Столица Франции?", right: 0 },
];

function Quiz() {
  const [index, setIndex] = React.useState(0);
  const [picked, setPicked] = React.useState<number | null>(null);
  const [score, setScore] = React.useState(0);

  const pick = (option: number) => {
    setPicked(option);
    if (option === QUESTIONS[index].right) setScore(score + 1);
  };

  const next = () => {
    setIndex((index + 1) % QUESTIONS.length);
    setPicked(null); // правило: новый вопрос — пустой выбор
  };

  const restart = () => {
    setIndex(0);
    setScore(0);
  };

  return (
    <div>
      <p>{QUESTIONS[index].text}</p>
      <button id="opt1" onClick={() => pick(0)}>вариант 1</button>
      <button id="opt2" onClick={() => pick(1)}>вариант 2</button>
      <button id="next" onClick={next}>дальше</button>
      <button id="restart" onClick={restart}>заново</button>
      <p id="line">вопрос {index + 1}, выбран {picked === null ? "-" : picked + 1}, очки {score}</p>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Quiz />);
const click = (id: string) => document.getElementById(id)!.click();
const line = () => document.getElementById("line")!.textContent;
setTimeout(() => click("opt2"), 50);
setTimeout(() => console.log("после ответа:", line()), 100);
setTimeout(() => click("restart"), 150);
setTimeout(() => console.log("после «заново»:", line()), 200);

const QUESTIONS = [
  { text: "2 + 2 = ?", right: 1 },
  { text: "Столица Франции?", right: 0 },
];

function Quiz() {
  const [index, setIndex] = React.useState(0);
  const [picked, setPicked] = React.useState<number | null>(null);
  const [score, setScore] = React.useState(0);

const pick = (option: number) => {
    setPicked(option);
    if (option === QUESTIONS[index].right) setScore(score + 1);
  };

const next = () => {
    setIndex((index + 1) % QUESTIONS.length);
    setPicked(null); // правило: новый вопрос — пустой выбор
  };

const restart = () => {
    setIndex(0);
    setScore(0);
  };

return (
    <div>
      <p>{QUESTIONS[index].text}</p>
      <button id="opt1" onClick={() => pick(0)}>вариант 1</button>
      <button id="opt2" onClick={() => pick(1)}>вариант 2</button>
      <button id="next" onClick={next}>дальше</button>
      <button id="restart" onClick={restart}>заново</button>
      <p id="line">вопрос {index + 1}, выбран {picked === null ? "-" : picked + 1}, очки {score}</p>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Quiz />);
const click = (id: string) => document.getElementById(id)!.click();
const line = () => document.getElementById("line")!.textContent;
setTimeout(() => click("opt2"), 50);
setTimeout(() => console.log("после ответа:", line()), 100);
setTimeout(() => click("restart"), 150);
setTimeout(() => console.log("после «заново»:", line()), 200);

страница примера

Сначала предположите, что выведет код

разбор вывода
«Вопрос 1, выбран 2, очки 0» — состояние, которого не бывает: вариант выбран, а очков за него нет. restart честно сбросил то, о чём помнил его автор, — номер вопроса и счёт, — а picked остался от прошлой попытки. Форма состояния тут ни при чём: три значения и правда независимы, и статья о структуре состояния к ним не придерётся. Противоречие принёс переход.

Посмотрите, где живёт правило «новый вопрос — пустой выбор»: в next оно есть, в restart его нет, и связывает эти два места только внимательность. Появится третий переход — «пропустить», «вернуться назад», «выйти по таймеру» — и правило придётся написать в третий раз. Каждый обработчик знает свою часть истории, а всей истории не знает никто.

Признак болезни простой: в одном обработчике три сеттера, в соседнем — те же три, но одного не хватает.

Переход на useReducer — это три перестановки. Три useState собираются в один объект состояния. Обработчики перестают менять состояние и начинают объявлять о событии: «выбрали вариант», «дальше», «заново». А все переходы переезжают в одну функцию — редьюсер: он получает текущее состояние и объявленное действие, а возвращает следующее состояние.

Форма функции знакома по reduce из части I: накопитель плюс очередной элемент дают новый накопитель. Здесь накопитель — состояние экрана, а элементы — то, что делает пользователь.

Сам вызов похож на useState: const [state, dispatch] = React.useReducer(quizReducer, initial). Слева приезжают текущее состояние и dispatch — единственный способ что-то в этом состоянии изменить; справа — редьюсер и то, с чего всё начинается. Тот же квиз, та же кнопка «заново».

tsx

const QUESTIONS = [
  { text: "2 + 2 = ?", right: 1 },
  { text: "Столица Франции?", right: 0 },
];

interface State {
  index: number;
  picked: number | null;
  score: number;
}

type Action =
  | { type: "picked"; option: number }
  | { type: "next" }
  | { type: "restart" };

const initial: State = { index: 0, picked: null, score: 0 };

// все переходы экрана собраны в одном месте: правило «новый вопрос —
// пустой выбор» видно целиком, а не по кусочкам в обработчиках
function quizReducer(state: State, action: Action): State {
  switch (action.type) {
    case "picked":
      return {
        ...state,
        picked: action.option,
        score: action.option === QUESTIONS[state.index].right ? state.score + 1 : state.score,
      };
    case "next":
      return { ...state, index: (state.index + 1) % QUESTIONS.length, picked: null };
    case "restart":
      return initial;
  }
}

function Quiz() {
  const [state, dispatch] = React.useReducer(quizReducer, initial);
  return (
    <div>
      <p>{QUESTIONS[state.index].text}</p>
      <button id="opt2" onClick={() => dispatch({ type: "picked", option: 1 })}>вариант 2</button>
      <button id="next" onClick={() => dispatch({ type: "next" })}>дальше</button>
      <button id="restart" onClick={() => dispatch({ type: "restart" })}>заново</button>
      <p id="line">вопрос {state.index + 1}, выбран {state.picked === null ? "-" : state.picked + 1}, очки {state.score}</p>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Quiz />);
const click = (id: string) => document.getElementById(id)!.click();
const line = () => document.getElementById("line")!.textContent;
setTimeout(() => click("opt2"), 50);
setTimeout(() => click("restart"), 100);
setTimeout(() => console.log("после «заново»:", line()), 200);

const QUESTIONS = [
  { text: "2 + 2 = ?", right: 1 },
  { text: "Столица Франции?", right: 0 },
];

interface State {
  index: number;
  picked: number | null;
  score: number;
}

type Action =
  | { type: "picked"; option: number }
  | { type: "next" }
  | { type: "restart" };

const initial: State = { index: 0, picked: null, score: 0 };

// все переходы экрана собраны в одном месте: правило «новый вопрос —
// пустой выбор» видно целиком, а не по кусочкам в обработчиках
function quizReducer(state: State, action: Action): State {
  switch (action.type) {
    case "picked":
      return {
        ...state,
        picked: action.option,
        score: action.option === QUESTIONS[state.index].right ? state.score + 1 : state.score,
      };
    case "next":
      return { ...state, index: (state.index + 1) % QUESTIONS.length, picked: null };
    case "restart":
      return initial;
  }
}

function Quiz() {
  const [state, dispatch] = React.useReducer(quizReducer, initial);
  return (
    <div>
      <p>{QUESTIONS[state.index].text}</p>
      <button id="opt2" onClick={() => dispatch({ type: "picked", option: 1 })}>вариант 2</button>
      <button id="next" onClick={() => dispatch({ type: "next" })}>дальше</button>
      <button id="restart" onClick={() => dispatch({ type: "restart" })}>заново</button>
      <p id="line">вопрос {state.index + 1}, выбран {state.picked === null ? "-" : state.picked + 1}, очки {state.score}</p>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Quiz />);
const click = (id: string) => document.getElementById(id)!.click();
const line = () => document.getElementById("line")!.textContent;
setTimeout(() => click("opt2"), 50);
setTimeout(() => click("restart"), 100);
setTimeout(() => console.log("после «заново»:", line()), 200);

страница примера

Сначала предположите, что выведет код

«Заново» больше не перечисляет, что сбросить: обработчик говорит, что случилось, а во что это превратит состояние, решает редьюсер — в одном месте и сразу для всех переходов. Правило «новый вопрос — пустой выбор» по-прежнему записано дважды, но обе записи видны на одном экране, в соседних ветках, а не в обработчиках, разбросанных по разметке.

И ещё одно различие, которое легче увидеть, чем объяснить. Помните два setCount(count + 1) подряд из статьи про снимок? Ниже в одном обработчике стоят два dispatch и два setByState. Предскажите обе цифры.

tsx

type Action = { type: "inc" } | { type: "reset" };

function counter(count: number, action: Action): number {
  switch (action.type) {
    case "inc":
      return count + 1;
    case "reset":
      return 0;
  }
}

function Twice() {
  const [byReducer, dispatch] = React.useReducer(counter, 0);
  const [byState, setByState] = React.useState(0);

  const both = () => {
    // два заказа на действие
    dispatch({ type: "inc" });
    dispatch({ type: "inc" });
    setByState(byState + 1);
    setByState(byState + 1);
  };

  return (
    <div>
      <button id="both" onClick={both}>нажать</button>
      <p id="out">редьюсер: {byReducer}, useState: {byState}</p>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Twice />);
setTimeout(() => document.getElementById("both")!.click(), 50);
setTimeout(() => {
  console.log(document.getElementById("out")!.textContent);
}, 150);

страница примера

Сначала предположите, что выведет код

Два dispatch дали двойку, два setByState(byState + 1) — единицу. setByState(byState + 1) — это заказ на конкретное число, посчитанное из снимка; второй такой заказ просто повторяет первый. dispatch заказывает не число, а действие: React складывает действия в ту самую очередь из статьи про обновитель и прогоняет по ней редьюсер, подавая ему уже накопленное состояние. Функция-обновитель setCount(n => n + 1) делает то же самое — редьюсер и есть общий обновитель, вынесенный из компонента и знающий обо всех переходах сразу.

dispatch не меняется между отрисовками: это одна и та же функция от первого рендера до размонтирования.

Обещание про постоянство dispatch можно не брать на веру: сохраните функцию в переменную вне компонента и сравните на следующей отрисовке. Практическая польза — в зависимостях эффекта из статьи «Зависимости и устаревшие значения»: dispatch в списке зависимостей ничего не перезапускает, в отличие от стрелки, созданной в теле компонента.

tsx

type Action = { type: "inc" };

// функция с прошлой отрисовки: сравнить её можно только снаружи компонента
let seen: unknown = null;

function App() {
  const [count, dispatch] = React.useReducer((n: number, action: Action) => n + 1, 0);
  console.log(seen === null ? "первая отрисовка" : "dispatch тот же: " + String(seen === dispatch));
  seen = dispatch;
  return <button id="inc" onClick={() => dispatch({ type: "inc" })}>нажатий: {count}</button>;
}

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
setTimeout(() => document.getElementById("inc")!.click(), 50);

страница примера

Сначала предположите, что выведет код

Тип Action из примера выше — то самое размеченное объединение из части III: общее поле-метка type с литеральным типом, а у каждого варианта своя нагрузка. «Выбрали вариант» несёт номер, «дальше» и «заново» не несут ничего — и это не пожелание в комментарии, а часть типа.

В доске из части II действие ездило строкой в data-action, и опечатку в ней ловил только клик — если вы догадались нажать именно ту кнопку. Здесь мимо типа не проехать. Три вызова ниже сломаны по-разному; прочитайте, что компилятор скажет о каждом.

tsx

interface State {
  index: number;
  picked: number | null;
  score: number;
}

type Action =
  | { type: "picked"; option: number }
  | { type: "next" }
  | { type: "restart" };

function quizReducer(state: State, action: Action): State {
  return action.type === "picked" ? { ...state, picked: action.option } : state;
}

// компонент нарочно не монтируем: здесь нужны не клики, а слова компилятора
function Quiz() {
  const [, dispatch] = React.useReducer(quizReducer, { index: 0, picked: null, score: 0 });
  dispatch({ type: "picked" });
  dispatch({ type: "nekst" });
  dispatch({ type: "restart", option: 1 });
  dispatch({ type: "picked", option: 1 });
  return null;
}

страница примера

Сначала предположите, что выведет код

Компилятор отвечает на все три. «Аргумент типа { type: "picked"; } нельзя назначить параметру типа Action. Свойство option отсутствует в типе { type: "picked"; } и является обязательным в типе { type: "picked"; option: number; }» — нагрузку молча не забудешь. «Тип "nekst" не может быть назначен для типа "next" | "picked" | "restart"» — и заодно перечислены все допустимые метки: это и есть список того, что экран умеет. «Объектный литерал может использовать только известные свойства. option не существует в типе { type: "restart"; }» — знакомая проверка лишних свойств из части III: «заново» нагрузки не несёт, и приписать её не выйдет.

Метку называют по событию, а не по способу его обработать: picked, а не setPicked; restart, а не resetIndexAndScore. Разница не косметическая. Имя setPicked заранее решает, что именно изменится, и в тот день, когда выбор варианта начнёт ещё и останавливать таймер, имя соврёт. Список действий — это протокол экрана: по нему видно, что вообще на нём может случиться.

Поле с нагрузкой называют по смыслу — option, id, text. Имя payload пришло из Redux и ничего не объясняет.

Редьюсер разбирает действия через switch по метке, и внутри каждой ветки компилятор сужает тип — ровно как в статье про размеченные объединения: в ветке picked у действия есть option, в ветке next его нет и обратиться к нему нельзя. Пока веток столько же, сколько вариантов, всё сходится. Настоящая проверка приходит в тот день, когда в объединение добавляют вариант.

Страховка — приём из статьи «never и полный разбор вариантов»: в default присвоить действие переменной типа never. Если разобраны все варианты, до default доезжает пустой тип и присваивание законно. Если хоть один забыт, туда приедет он.

ts

interface State {
  index: number;
  picked: number | null;
}

type Action =
  | { type: "picked"; option: number }
  | { type: "next" }
  | { type: "restart" };

function quizReducer(state: State, action: Action): State {
  switch (action.type) {
    case "picked":
      return { ...state, picked: action.option };
    case "next":
      return { index: state.index + 1, picked: null };
    default: {
      const forgotten: never = action;
      return state;
    }
  }
}

console.log(quizReducer({ index: 0, picked: 1 }, { type: "next" }));
console.log(quizReducer({ index: 0, picked: 1 }, { type: "restart" }));

страница примера

Сначала предположите, что выведет код

«Тип { type: "restart"; } не может быть назначен для типа never» — и номер строки той самой заглушки в default. Компилятор не сказал «где-то не хватает ветки»: он назвал забытый вариант по имени. Допишите case "restart" — и диагностика исчезнет сама, потому что до default снова начнёт доезжать пустой тип.

Вторая строка вывода показывает, что было бы без этой страховки: restart не изменил ничего. Пользователь жмёт кнопку, ничего не происходит, в консоли пусто — и искать нечего, потому что ошибки нет. Забытая ветка не падает, она молчит; тем и опасна.

Переменная forgotten нужна только компилятору и в каждом редьюсере выглядит одинаково. Функция assertNever из части III делает то же самое, но добавляет вторую линию обороны — на случай, если действие придёт откуда-то, где типов не было: из JSON.parse, из старой вкладки, из чужого кода.

ts

type Action = { type: "picked"; option: number } | { type: "next" };

// та же страховка, но одной функцией на весь проект
function assertNever(value: never): never {
  throw new Error("неизвестное действие: " + JSON.stringify(value));
}

function reducer(state: number, action: Action): number {
  switch (action.type) {
    case "picked":
      return action.option;
    case "next":
      return state + 1;
    default:
      return assertNever(action);
  }
}

console.log(reducer(0, { type: "next" }));

страница примера

Сначала предположите, что выведет код

А вот default: return state — заманчивая, но плохая привычка: она глушит и опечатки, и забытые ветки. Возвращать состояние без изменений редьюсер должен осознанно, в именованной ветке («ответ на уже отвеченный вопрос»), а не по остаточному принципу.

Редьюсер — не хук и не компонент: два аргумента, одно возвращаемое значение, никаких обращений к React. Поэтому его и объявляют вне компонента — пересоздавать функцию на каждой отрисовке незачем, — и поэтому его можно вызвать руками.

Проверка перехода не требует ни кнопки, ни браузера: подайте состояние и действие — получите состояние. А целый сценарий пользователя — это reduce по массиву действий, тем самым методом из части I. Отсюда и название.

ts

interface State {
  index: number;
  picked: number | null;
  score: number;
}

type Action =
  | { type: "picked"; option: number }
  | { type: "next" }
  | { type: "restart" };

const RIGHT = [1, 0];
const initial: State = { index: 0, picked: null, score: 0 };

function quizReducer(state: State, action: Action): State {
  switch (action.type) {
    case "picked":
      return {
        ...state,
        picked: action.option,
        score: action.option === RIGHT[state.index] ? state.score + 1 : state.score,
      };
    case "next":
      return { ...state, index: (state.index + 1) % RIGHT.length, picked: null };
    case "restart":
      return initial;
  }
}

// один переход проверяется вызовом
console.log(quizReducer(initial, { type: "picked", option: 1 }));

// а целый сценарий пользователя — тем самым reduce из части I
const script: Action[] = [
  { type: "picked", option: 1 },
  { type: "next" },
  { type: "picked", option: 1 },
  { type: "restart" },
];
console.log(script.reduce(quizReducer, initial));

interface State {
  index: number;
  picked: number | null;
  score: number;
}

type Action =
  | { type: "picked"; option: number }
  | { type: "next" }
  | { type: "restart" };

const RIGHT = [1, 0];
const initial: State = { index: 0, picked: null, score: 0 };

// один переход проверяется вызовом
console.log(quizReducer(initial, { type: "picked", option: 1 }));

// а целый сценарий пользователя — тем самым reduce из части I
const script: Action[] = [
  { type: "picked", option: 1 },
  { type: "next" },
  { type: "picked", option: 1 },
  { type: "restart" },
];
console.log(script.reduce(quizReducer, initial));

страница примера

Сначала предположите, что выведет код

Это тот самый код, который в статье «Первые тесты» просился под тест: чистая функция, у которой на одинаковый вход всегда одинаковый выход. Отсюда же и правила, которые редьюсер обязан соблюдать.

Чего в редьюсере не делают	Куда это переносят
Меняют пришедшее состояние: `state.items.push(...)`	Возвращают новый объект — как в статье «Объекты и массивы в состоянии»
Ходят в сеть, ставят таймер, пишут в `localStorage`	Обработчик события, а если это синхронизация с внешним миром — эффект
Читают `Date.now()` или `Math.random()`	Считают в обработчике и кладут результат в действие: `{ type: "added", id: crypto.randomUUID() }`

Последняя строка таблицы объясняет, почему действия иногда несут странную на вид нагрузку вроде готового идентификатора или времени. Всё непредсказуемое случается снаружи, в обработчике; в редьюсер приезжает уже посчитанное значение — и функция остаётся проверяемой.

В режиме разработки внутри <StrictMode> React намеренно вызывает редьюсер дважды на одно действие: нечистый редьюсер выдаёт себя сразу. В песочнице учебника React стоит отладочной сборкой, но без него, поэтому удвоения вы не увидите.

Мутация в редьюсере ломается не там, где её ждут. Ошибки не будет, массив честно вырастет — просто React сравнит старое состояние с новым через Object.is, увидит тот же объект и решит, что перерисовывать нечего.

tsx

interface State {
  items: string[];
}

type Action = { type: "add"; text: string } | { type: "clear" };

function cart(state: State, action: Action): State {
  switch (action.type) {
    case "add":
      state.items.push(action.text);
      return state;
    case "clear":
      return { items: [] };
  }
}

function Cart() {
  const [state, dispatch] = React.useReducer(cart, { items: [] });
  const [open, setOpen] = React.useState(false);
  return (
    <div>
      <button id="add" onClick={() => dispatch({ type: "add", text: "чай" })}>добавить</button>
      <button id="other" onClick={() => setOpen(!open)}>чужая кнопка</button>
      <p id="count">товаров: {state.items.length}</p>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Cart />);
const click = (id: string) => document.getElementById(id)!.click();
const count = () => document.getElementById("count")!.textContent;
setTimeout(() => click("add"), 50);
setTimeout(() => console.log("после «добавить»:", count()), 100);
setTimeout(() => click("other"), 150);
setTimeout(() => console.log("после чужой кнопки:", count()), 200);

interface State {
  items: string[];
}

type Action = { type: "add"; text: string } | { type: "clear" };

ReactDOM.createRoot(document.getElementById("root")!).render(<Cart />);
const click = (id: string) => document.getElementById(id)!.click();
const count = () => document.getElementById("count")!.textContent;
setTimeout(() => click("add"), 50);
setTimeout(() => console.log("после «добавить»:", count()), 100);
setTimeout(() => click("other"), 150);
setTimeout(() => console.log("после чужой кнопки:", count()), 200);

страница примера

Сначала предположите, что выведет код

Знакомая картина: экран догоняет данные по чужому поводу — ровно как переменная модуля из статьи про подъём состояния. Возвращайте новый объект, и вопрос снимается.

Редьюсер не «правильнее» useState — он про другую ситуацию. Одно независимое значение (раскрыт ли список, что набрано в поле, какая вкладка активна) редьюсером не улучшить: вместо одной строки появятся тип, функция и switch, а взамен не будет ничего. Смысл появляется там, где начинаются переходы.

Что в компоненте	Чем брать	Почему
Одно значение, меняется само по себе	`useState`	Редьюсер добавит три конструкции и ни одной новой гарантии
Одно событие меняет два-три значения по правилу	`useReducer`	Правило записано один раз, а не в каждом обработчике
Следующее состояние зависит от текущего: нельзя ответить дважды, нельзя уйти назад с первого шага	`useReducer`	Проверка живёт там, где состояние всегда актуально, — внутри редьюсера
Обработчики разъехались по дереву компонентов	`useReducer`	Вниз уезжает один `dispatch` вместо пяти колбэков
Переходы хочется покрыть тестами	`useReducer`	Чистую функцию проверяют без React и без браузера
Значение вычисляется из другого состояния	ни то ни другое	Его вообще не хранят — статья «Как выбирать структуру состояния»

Четвёртая строка стоит отдельного примера. В статье «Подъём состояния» вниз уезжали функции-колбэки: onAdd, onShow, onChange. Когда их становится пять, список пропсов начинает выглядеть как оглавление. С редьюсером вниз уходит один dispatch, а что именно он умеет — сказано в типе Action.

tsx

interface State {
  count: number;
}

type Action = { type: "inc" } | { type: "dec" } | { type: "reset" };

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case "inc":
      return { count: state.count + 1 };
    case "dec":
      return { count: state.count - 1 };
    case "reset":
      return { count: 0 };
  }
}

interface ControlsProps {
  // один пропс вместо onInc, onDec и onReset
  dispatch: React.Dispatch<Action>;
}

function Controls({ dispatch }: ControlsProps) {
  return (
    <div>
      <button id="inc" onClick={() => dispatch({ type: "inc" })}>+1</button>
      <button id="dec" onClick={() => dispatch({ type: "dec" })}>-1</button>
      <button id="reset" onClick={() => dispatch({ type: "reset" })}>сброс</button>
    </div>
  );
}

function Counter() {
  const [state, dispatch] = React.useReducer(reducer, { count: 0 });
  return (
    <div>
      <p id="value">{state.count}</p>
      <Controls dispatch={dispatch} />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Counter />);
const click = (id: string) => document.getElementById(id)!.click();
setTimeout(() => click("inc"), 50);
setTimeout(() => click("inc"), 100);
setTimeout(() => click("dec"), 150);
setTimeout(() => console.log(document.getElementById("value")!.textContent), 200);

interface State {
  count: number;
}

type Action = { type: "inc" } | { type: "dec" } | { type: "reset" };

interface ControlsProps {
  // один пропс вместо onInc, onDec и onReset
  dispatch: React.Dispatch<Action>;
}

function Controls({ dispatch }: ControlsProps) {
  return (
    <div>
      <button id="inc" onClick={() => dispatch({ type: "inc" })}>+1</button>
      <button id="dec" onClick={() => dispatch({ type: "dec" })}>-1</button>
      <button id="reset" onClick={() => dispatch({ type: "reset" })}>сброс</button>
    </div>
  );
}

function Counter() {
  const [state, dispatch] = React.useReducer(reducer, { count: 0 });
  return (
    <div>
      <p id="value">{state.count}</p>
      <Controls dispatch={dispatch} />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Counter />);
const click = (id: string) => document.getElementById(id)!.click();
setTimeout(() => click("inc"), 50);
setTimeout(() => click("inc"), 100);
setTimeout(() => click("dec"), 150);
setTimeout(() => console.log(document.getElementById("value")!.textContent), 200);

страница примера

Сначала предположите, что выведет код

Тип пропса — React.Dispatch<Action>, и это не просто «какая-то функция»: ребёнок может объявить только одно из перечисленных действий, а с чужим действием его не пропустит компилятор. При этом права менять состояние как попало у ребёнка нет — как и раньше, он лишь сообщает наверх. Пробрасывать dispatch через три этажа так же скучно, как любой другой пропс, — этим займётся следующая статья, про контекст.

Если начальное состояние нужно вычислить — разобрать сохранённые ответы, построить массив по числу вопросов, — вычисление передают третьим аргументом: useReducer(reducer, arg, init). React вызовет init(arg) один раз, при первой отрисовке. Тот же приём, что и ленивая начальная функция у useState.

tsx

interface State {
  index: number;
  answers: number[];
}

type Action = { type: "next" };

// третий аргумент: функция, которая строит начальное состояние из второго
function makeInitial(size: number): State {
  console.log("считаем начальное состояние");
  return { index: 0, answers: new Array<number>(size).fill(-1) };
}

function reducer(state: State, action: Action): State {
  return { ...state, index: state.index + 1 };
}

function Wizard() {
  const [state, dispatch] = React.useReducer(reducer, 3, makeInitial);
  return (
    <button id="next" onClick={() => dispatch({ type: "next" })}>
      шаг {state.index}, ответов {state.answers.length}
    </button>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Wizard />);
setTimeout(() => document.getElementById("next")!.click(), 50);
setTimeout(() => console.log(document.getElementById("next")!.textContent), 150);

страница примера

Сначала предположите, что выведет код

Три useState, которые меняет одно событие, — это не три значения, а один переход, размазанный по обработчикам.
Редьюсер — чистая функция (состояние, действие) → состояние: он живёт вне компонента, ничего не знает про React и проверяется обычным вызовом.
Действия описывают размеченным объединением из части III: метка type плюс своя нагрузка у каждого варианта — и компилятор проверяет каждый dispatch.
switch по метке плюс присваивание в never в default: забытая ветка становится ошибкой сборки, а не молча потерянным действием.
Два dispatch подряд применяются оба: редьюсер получает состояние, накопленное очередью, — как функция-обновитель.
useState берут для одного независимого значения; useReducer — когда переходов много, они зависят от текущего состояния или разъехались по дереву компонентов.

1/4В одном обработчике стоят два вызова dispatch({ type: "inc" }) подряд, а редьюсер на это действие возвращает count + 1. Каким станет счётчик после одного клика, если до клика был 0?

2/4В размеченное объединение Action добавили четвёртый вариант, а ветку в switch не дописали. В default стоит const forgotten: never = action. Что произойдёт?

3/4Редьюсер выполнил state.items.push(action.text) и вернул тот же state. Что увидит пользователь после dispatch?

4/4Форма отправляет заявку на сервер и показывает результат. Где место самому запросу?

Три useState в один редьюсер

Форма из двух шагов: адрес проверяется на «собаку», при удаче переходим на второй шаг. Кнопка «назад» возвращает на первый — и оставляет на экране ошибку с прошлой попытки. Переведите компонент на useReducer: состояние в один объект, действия { type: "submitted"; email: string } и { type: "back" }, проверка адреса — внутри редьюсера, разбор вариантов — полный, со страховкой в default.

tsx

function Signup() {
  const [step, setStep] = React.useState(0);
  const [email, setEmail] = React.useState("");
  const [error, setError] = React.useState("");

  const submit = (value: string) => {
    if (!value.includes("@")) {
      setError("нужен адрес с собакой");
      return;
    }
    setEmail(value);
    setError("");
    setStep(1);
  };

  const back = () => {
    setStep(0);
    // про ошибку и адрес здесь никто не вспомнил
  };

  return (
    <div>
      <p id="line">шаг {step}, адрес «{email}», ошибка «{error}»</p>
      <button id="bad" onClick={() => submit("почта")}>отправить «почта»</button>
      <button id="ok" onClick={() => submit("me@mail.ru")}>отправить «me@mail.ru»</button>
      <button id="back" onClick={back}>назад</button>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Signup />);
const click = (id: string) => document.getElementById(id)!.click();
setTimeout(() => click("ok"), 50);
setTimeout(() => click("bad"), 100);
setTimeout(() => click("back"), 150);
setTimeout(() => console.log(document.getElementById("line")!.textContent), 200);

function Signup() {
  const [step, setStep] = React.useState(0);
  const [email, setEmail] = React.useState("");
  const [error, setError] = React.useState("");

const submit = (value: string) => {
    if (!value.includes("@")) {
      setError("нужен адрес с собакой");
      return;
    }
    setEmail(value);
    setError("");
    setStep(1);
  };

const back = () => {
    setStep(0);
    // про ошибку и адрес здесь никто не вспомнил
  };

return (
    <div>
      <p id="line">шаг {step}, адрес «{email}», ошибка «{error}»</p>
      <button id="bad" onClick={() => submit("почта")}>отправить «почта»</button>
      <button id="ok" onClick={() => submit("me@mail.ru")}>отправить «me@mail.ru»</button>
      <button id="back" onClick={back}>назад</button>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Signup />);
const click = (id: string) => document.getElementById(id)!.click();
setTimeout(() => click("ok"), 50);
setTimeout(() => click("bad"), 100);
setTimeout(() => click("back"), 150);
setTimeout(() => console.log(document.getElementById("line")!.textContent), 200);

страница примера

Сначала предположите, что выведет код

Три значения складываются в один объект, два обработчика превращаются в два действия. Главное — куда переехала проверка адреса: она стала частью перехода, а не частью кнопки.

tsxлистинг · не запускается

interface State {
  step: number;
  email: string;
  error: string;
}

type Action = { type: "submitted"; email: string } | { type: "back" };

const initial: State = { step: 0, email: "", error: "" };

function signupReducer(state: State, action: Action): State {
  switch (action.type) {
    case "submitted":
      // проверка живёт здесь: обработчику незачем знать, что считается адресом
      return action.email.includes("@")
        ? { step: 1, email: action.email, error: "" }
        : { ...state, error: "нужен адрес с собакой" };
    case "back":
      // переход описан целиком: шаг назад и чистый экран
      return { ...state, step: 0, error: "" };
    default: {
      const forgotten: never = action;
      return state;
    }
  }
}

function Signup() {
  const [state, dispatch] = React.useReducer(signupReducer, initial);
  return (
    <div>
      <p id="line">шаг {state.step}, адрес «{state.email}», ошибка «{state.error}»</p>
      <button id="bad" onClick={() => dispatch({ type: "submitted", email: "почта" })}>отправить «почта»</button>
      <button id="ok" onClick={() => dispatch({ type: "submitted", email: "me@mail.ru" })}>отправить «me@mail.ru»</button>
      <button id="back" onClick={() => dispatch({ type: "back" })}>назад</button>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Signup />);
const click = (id: string) => document.getElementById(id)!.click();
setTimeout(() => click("ok"), 50);
setTimeout(() => click("bad"), 100);
setTimeout(() => click("back"), 150);
setTimeout(() => console.log(document.getElementById("line")!.textContent), 200); // шаг 0, адрес «me@mail.ru», ошибка «»

interface State {
  step: number;
  email: string;
  error: string;
}

type Action = { type: "submitted"; email: string } | { type: "back" };

const initial: State = { step: 0, email: "", error: "" };

function signupReducer(state: State, action: Action): State {
  switch (action.type) {
    case "submitted":
      // проверка живёт здесь: обработчику незачем знать, что считается адресом
      return action.email.includes("@")
        ? { step: 1, email: action.email, error: "" }
        : { ...state, error: "нужен адрес с собакой" };
    case "back":
      // переход описан целиком: шаг назад и чистый экран
      return { ...state, step: 0, error: "" };
    default: {
      const forgotten: never = action;
      return state;
    }
  }
}

function Signup() {
  const [state, dispatch] = React.useReducer(signupReducer, initial);
  return (
    <div>
      <p id="line">шаг {state.step}, адрес «{state.email}», ошибка «{state.error}»</p>
      <button id="bad" onClick={() => dispatch({ type: "submitted", email: "почта" })}>отправить «почта»</button>
      <button id="ok" onClick={() => dispatch({ type: "submitted", email: "me@mail.ru" })}>отправить «me@mail.ru»</button>
      <button id="back" onClick={() => dispatch({ type: "back" })}>назад</button>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Signup />);
const click = (id: string) => document.getElementById(id)!.click();
setTimeout(() => click("ok"), 50);
setTimeout(() => click("bad"), 100);
setTimeout(() => click("back"), 150);
setTimeout(() => console.log(document.getElementById("line")!.textContent), 200); // шаг 0, адрес «me@mail.ru», ошибка «»

Теперь «назад» описан целиком, и ошибка с прошлой попытки уехать на первый шаг не может: об этом сказано в редьюсере один раз и для всех, кто пошлёт это действие. Обработчики стали одинаково скучными — каждый объявляет своё событие и больше ни за что не отвечает.

Ветка, которую компилятор не нашёл

В плеер неделю назад добавили действие muted, а ветку для него не написали. Компилятор молчит, потому что в default стоит return state: кнопка «без звука» просто ничего не делает. Замените тихий default на страховку через never, прочитайте диагностику и допишите ветку — громкость при muted становится нулевой.

ts

type Action =
  | { type: "played" }
  | { type: "paused" }
  | { type: "volume"; value: number }
  | { type: "muted" }; // вариант добавили неделю назад

interface State {
  playing: boolean;
  volume: number;
}

function player(state: State, action: Action): State {
  switch (action.type) {
    case "played":
      return { ...state, playing: true };
    case "paused":
      return { ...state, playing: false };
    case "volume":
      return { ...state, volume: action.value };
    default:
      // тихий default: компилятор молчит, и действие пропадает без следа
      return state;
  }
}

const start: State = { playing: false, volume: 50 };
console.log(player(start, { type: "muted" })); // { playing: false, volume: 50 }

страница примера

Сначала предположите, что выведет код

Сначала меняем тихий default на страховку — и компилятор перестаёт молчать: «Тип { type: "muted"; } не может быть назначен для типа never». Назван ровно тот вариант, ветки для которого нет.

tsлистинг · не запускается

function player(state: State, action: Action): State {
  switch (action.type) {
    case "played":
      return { ...state, playing: true };
    case "paused":
      return { ...state, playing: false };
    case "volume":
      return { ...state, volume: action.value };
    case "muted":
      return { ...state, volume: 0 };
    default: {
      const forgotten: never = action;
      return state;
    }
  }
}

console.log(player({ playing: true, volume: 50 }, { type: "muted" })); // { playing: true, volume: 0 }

function player(state: State, action: Action): State {
  switch (action.type) {
    case "played":
      return { ...state, playing: true };
    case "paused":
      return { ...state, playing: false };
    case "volume":
      return { ...state, volume: action.value };
    case "muted":
      return { ...state, volume: 0 };
    default: {
      const forgotten: never = action;
      return state;
    }
  }
}

console.log(player({ playing: true, volume: 50 }, { type: "muted" })); // { playing: true, volume: 0 }

Ветка дописана, до default снова доезжает пустой тип, диагностика исчезла. Разница в цене ошибки: страховку показала первая же сборка после правки типа, а тихий default ждал бы жалобы пользователя «кнопка не работает».

Проверить редьюсер без React

Прогон сценария показывает дыру: один и тот же вопрос отвечен дважды, и очки начислены дважды. Почините редьюсер так, чтобы повторный ответ на уже отвеченный вопрос не менял ни выбор, ни счёт, — и убедитесь в этом тем же прогоном, без React и без кликов.

ts

interface State {
  index: number;
  picked: number | null;
  score: number;
}

type Action = { type: "picked"; option: number } | { type: "next" };

const RIGHT = [1, 0];
const initial: State = { index: 0, picked: null, score: 0 };

function quizReducer(state: State, action: Action): State {
  switch (action.type) {
    case "picked":
      return {
        ...state,
        picked: action.option,
        score: action.option === RIGHT[state.index] ? state.score + 1 : state.score,
      };
    case "next":
      return { ...state, index: (state.index + 1) % RIGHT.length, picked: null };
  }
}

// один и тот же ответ дважды — и очки начислены дважды
const script: Action[] = [
  { type: "picked", option: 1 },
  { type: "picked", option: 1 },
];
console.log(script.reduce(quizReducer, initial)); // { index: 0, picked: 1, score: 2 }

страница примера

Сначала предположите, что выведет код

«На отвеченный вопрос отвечают один раз» — это условие о текущем состоянии, и место ему в редьюсере: здесь состояние заведомо актуально, а не взято из снимка обработчика.

jsлистинг · не запускается

function quizReducer(state: State, action: Action): State {
  switch (action.type) {
    case "picked":
      // на отвеченный вопрос второй ответ не влияет: проверка возможна
      // только там, где состояние заведомо актуально, — внутри редьюсера
      if (state.picked !== null) return state;
      return {
        ...state,
        picked: action.option,
        score: action.option === RIGHT[state.index] ? state.score + 1 : state.score,
      };
    case "next":
      return { ...state, index: (state.index + 1) % RIGHT.length, picked: null };
  }
}

const script: Action[] = [
  { type: "picked", option: 1 },
  { type: "picked", option: 1 },
];
console.log(script.reduce(quizReducer, initial)); // { index: 0, picked: 1, score: 1 }

function quizReducer(state: State, action: Action): State {
  switch (action.type) {
    case "picked":
      // на отвеченный вопрос второй ответ не влияет: проверка возможна
      // только там, где состояние заведомо актуально, — внутри редьюсера
      if (state.picked !== null) return state;
      return {
        ...state,
        picked: action.option,
        score: action.option === RIGHT[state.index] ? state.score + 1 : state.score,
      };
    case "next":
      return { ...state, index: (state.index + 1) % RIGHT.length, picked: null };
  }
}

const script: Action[] = [
  { type: "picked", option: 1 },
  { type: "picked", option: 1 },
];
console.log(script.reduce(quizReducer, initial)); // { index: 0, picked: 1, score: 1 }

Прогон подтверждает: второй ответ не изменил ни выбор, ни счёт. Ни клика, ни браузера для этой проверки не понадобилось — вся логика экрана живёт в функции, у которой есть вход и выход.

useReducer и размеченные объединения

Видеоразбор темы за 5–7 минут

Одно событие — три сеттераПравило, которое приходится повторять в каждом обработчике

Действие вместо набора сеттеровОбработчик сообщает, что случилось; за последствия отвечает редьюсер

Действия — размеченное объединениеУ каждого варианта своя нагрузка, и каждый вызов проверяет компилятор

Забытая ветка ломает сборкуnever в default против нового варианта действия

Редьюсер — обычная функцияЕго можно проверить без React, без разметки и без единого клика

Когда редьюсер честнееПризнаки, по которым выбирают, и цена выбора

Итогошпаргалка по теме

Проверьте себявопросы по теме

Задачизадачи с решениями

Три useState в один редьюсер

Ветка, которую компилятор не нашёл

Проверить редьюсер без React