Глава 18. useReducer и сложная логика

Зачем эта глава

Когда логика состояния становится сложной, useState уже неудобен. useReducer помогает структурировать обновления.

Теория (коротко)

useReducer работает по принципу: «состояние + действие → новое состояние».

Редьюсер — это функция, которая описывает, как меняется state.

JSX

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

const [state, dispatch] = useReducer(reducer, { count: 0 });

Важно: useReducer удобен, когда много разных действий.

Задания

Задание: корзина

Создай reducer для добавления товара.
Добавь действие «удалить товар».
Подключи dispatch к кнопкам.

Проверка себя

Ты понимаешь, когда useReducer удобнее, чем useState.

Мини-проект

Цель: список задач с действиями.

Требования: добавить, удалить, отметить как выполнено.

Критерий готовности: всё управление идёт через reducer.

Словарь главы

Reducer: Функция, описывающая изменение состояния.
Action: Событие, которое описывает, что произошло.

← Предыдущая Следующая глава →