Техпрогон
ВойтиНачать бесплатно
DOM и React Middle Состояние и useState/useReducer обновлено

useReducer

Условие

Корзина: кнопки «+» и «−» меняют количество, «сброс» обнуляет. Количество не должно уходить ниже нуля. Используй useReducer.

Что проверяют тесты

  • увеличивает

  • не уходит ниже нуля

  • сбрасывает

Как подойти

useReducer выигрывает у useState, когда переходов несколько и они связаны правилами: вся логика собрана в одном месте и тестируется без React. Инварианты (не ниже нуля) держи в редьюсере, иначе их придётся дублировать в каждом обработчике.

Подсказки: 2
  1. Редьюсер - чистая функция (состояние, действие) → новое состояние.
  2. Ограничение «не ниже нуля» живёт в редьюсере, а не в обработчике.

Решите в тренажёре

Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.

Решить в тренажёре

Предыдущий вопрос

Обновление объекта в состоянии

Следующий вопрос

useOnClickOutside

Урок по теме

useState и useReducer без сюрпризов

Термины по теме

Батчинг обновлений stateЛенивая инициализация в useStateФункциональное обновление setX(prev => ...)useReducer

Ещё по теме «Состояние и useState/useReducer»

Все вопросы модуля