Context и редуктор: простые контейнеры состояния
Объедините Context и useReducer, чтобы создать небольшой контейнер состояния: Provider предоставляет состояние и dispatch через пользовательский хук.
«Context и редуктор: простые контейнеры состояния» — бесплатный урок React Academy на CoddyKit. Это урок 3 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 3 уроков всего.
Зачем нужны контекст и редьюсер?
Цель: объединить логику состояния в провайдере (контексте) и редьюсере. Дочерние компоненты получают данные через небольшой пользовательский хук: без проброса свойств и с предсказуемыми обновлениями.
Шаги проектирования
Шаблон:
- Создайте контекст
- Внутри провайдера: useReducer(состояние, действие)
- Предоставьте {состояние, отправка}
- Создайте хук в стиле useCounter(), который вызывает useContext
Демонстрация: контейнер счётчика
Минимальный CounterProvider предоставляет состояние и отправку; дочерние компоненты используют useCounter() для чтения и обновления.
<div id="root"></div>
Рекомендации по действиям и API
Рекомендации:
- Делайте действия небольшими (INC, DEC, RESET).
- Размещайте редьюсер рядом с провайдером.
- Экспортируйте только пользовательский хук, чтобы использование оставалось простым.
Демонстрация: контейнер списка задач
Небольшой TodoProvider показывает, как несколько полей предсказуемо обновляются с помощью одного редьюсера и понятного API хука.
<div id="root"></div>
Подводные камни и советы
Подводные камни:
- Не забудьте обернуть дочерние компоненты в провайдер.
- Не помещайте в контекст огромные объекты — передавайте только необходимое.
- Не изменяйте состояние в редьюсере — всегда возвращайте новые объекты.
Проверка шаблона контейнера
Повторение
Повторение: контекст предоставляет доступ, а useReducer управляет переходами состояния. Экспортируйте небольшой хук в стиле useXxx, чтобы получать {состояние, отправка} и сохранять простоту использования.
Часто задаваемые вопросы
Урок «Context и редуктор: простые контейнеры состояния» бесплатный?
Да — полный текст урока «Context и редуктор: простые контейнеры состояния» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 3 уроков всего.
Чему я научусь в уроке «Context и редуктор: простые контейнеры состояния»?
Объедините Context и useReducer, чтобы создать небольшой контейнер состояния: Provider предоставляет состояние и dispatch через пользовательский хук. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать React Academy?
Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 3.
Сколько времени занимает урок «Context и редуктор: простые контейнеры состояния»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке React Academy?
Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Основы контекста и отказ от передачи свойств через компоненты
- Основы useReducer и шаблоны действий
- Context и редуктор: простые контейнеры состояния