Начать бесплатно
учебный путь · javascript

Менеджер состояния «Атом»

  • JavaScript
  • Средний
  • 5 модулей
  • 25 задач
  • 5 задач · бесплатно до модуля 1 из 5

Соберите синхронный менеджер состояния в духе Redux: чистые редьюсеры с иммутабельными обновлениями, селекторы и производные данные, машину undo/redo, цепочку middleware и сборку store с подписками. Каждая задача — рабочий модуль системы.

❯ Начать путь → Смотреть задачи
AI-ассистент ведёт подсказками, но решение не выдаёт
intro

Что тебя ждёт в этом пути

Автор программы:

Что ты построишь

Менеджер состояния «Атом» — синхронный аналог Redux, собранный из 25 задач в пяти паках. Начнёшь с чистых редьюсеров доски задач: добавление, переключение статуса, удаление без мутации массива. Дальше — селекторы с мемоизацией, машина undo/redo на past/future, цепочка middleware с логгером и валидатором, которая останавливается на первом veto. В последней задаче соберёшь store целиком: dispatch проходит через middleware, редьюсер и уведомляет подписчиков только при реальном изменении состояния.

Для кого

Для тех, кто уже пишет на JavaScript и пользовался Redux или Zustand как чёрным ящиком, а теперь хочет понять, из чего он собран изнутри. Уровень входа medium: путь не объясняет замыкания и spread с нуля, а сразу проверяет их на модулях реальной системы управления состоянием.

Чему научишься

  • Писать чистые редьюсеры с иммутабельными обновлениями массивов и объектов
  • Строить селекторы производных данных и кэшировать их по аргументам
  • Реализовывать undo/redo через стеки past и future
  • Собирать цепочку middleware с остановкой на первом отклонённом действии
  • Сворачивать несколько middleware в одну функцию через composeMiddleware
  • Собирать store с getState/dispatch и подпиской через subscribe
  • Уведомлять подписчиков только при действительном изменении состояния
curriculum

Задачи пути — 5 модулей, 25 задач

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

25 задач · 5 модулей
1.1
Редьюсер добавления задачи
Соберите первый чистый редьюсер «Атома» — добавление задачи на доску без мутации прежнего состояния
1.2
Редьюсер переключения задачи
Переключите статус done у одной задачи доски «Атома» — не трогая остальные и не мутируя прежнее состояние
1.3
Редьюсер удаления задачи
Удалите задачу доски «Атома» по id, не мутируя массив, а несуществующий id верните как no-op — тем же состоянием
1.4
Редьюсер смены фильтра
Соберите смену фильтра доски «Атома» из двух хелперов: проверка значения и иммутабельная установка, с no-op на мусоре
1.5
Корневой редьюсер
Соберите редьюсеры темы в один: switch по action.type направляет в нужную ветку, неизвестный тип возвращает то же состояние
2.1
Селектор видимых задач
Соберите первый селектор «Атома» — отбор задач доски по текущему фильтру без мутации состояния
2.2
Счётчики задач по статусу
Сосчитайте на доске «Атома» сколько всего задач, активных и завершённых — производные данные одним проходом
2.3
Селектор задач по тегу
Отберите на доске «Атома» задачи с нужным тегом, опираясь на данный предикат matchesTag
2.4
Мемоизация селектора
Допишите сравнение аргументов для кэша-обёртки «Атома», который не пересчитывает селектор на тех же входах
2.5
Сводка доски
Капстоун темы: соберите единую сводку доски «Атома» из готовых селекторов — счётчики, видимые задачи и теги
3.1
Запись шага в историю
Запишите текущее состояние доски в историю «Атома»: present уходит в past, ставится новый present, future очищается
3.2
Шаг отмены
Отмените последнее изменение доски «Атома»: последний шаг из past становится настоящим, прежний present уходит в начало future
3.3
Шаг повтора
Повторите отменённое изменение доски «Атома»: первый шаг из future становится настоящим, прежний present уходит в конец past
3.4
Флаги отмены и повтора
Подскажите интерфейсу «Атома», активны ли кнопки «отменить» и «повторить»: два предиката над стеками past и future
3.5
Редьюсер путешествий во времени
Соберите машину истории «Атома»: один редьюсер маршрутизирует UNDO/REDO к шагам истории, а реальные действия записывает поверх корневого редьюсера
4.1
Middleware-логгер
Соберите первый middleware «Атома» — фабрику логгера, что пишет действия в переданный массив-sink и пропускает их дальше
4.2
Middleware-валидатор
Напишите middleware «Атома», что отклоняет добавление задачи с пустым заголовком, а остальные действия пропускает
4.3
Прогон цепочки middleware
Соберите ядро цепочки «Атома»: прогон действия через middleware по порядку с остановкой на первом veto
4.4
Свёртка цепочки в один middleware
Сверните цепочку middleware «Атома» в одну функцию: composeMiddleware вернёт единый middleware поверх готового runChain
4.5
Диспетчеризация через middleware
Соедините цепочку middleware и редьюсер: действие проходит фильтры, и только выжившее меняет состояние
5.1
Начальное состояние store
Соберите фабрику начального состояния «Атома» — пустую доску { tasks: [], filter: "all" }, свежую при каждом вызове
5.2
Сборка store
Соберите store «Атома» из двух хелперов: чтение состояния и переход через редьюсер, под данной обёрткой getState/dispatch
5.3
Подписчики store
Реализуйте подписку store «Атома»: subscribe регистрирует слушателя и возвращает отписку, снимающую его из реестра
5.4
Конвейер dispatch
Соберите конвейер dispatch «Атома»: middleware → редьюсер → уведомление, с уведомлением только при реальном изменении состояния
5.5
Сборка store «Атома» капстоун
Капстоун пути: соберите store целиком — редьюсер, middleware и подписчики в одном dispatch, который уведомляет только при изменении состояния
Путь входит в Koddo Premium Открой все премиум-пути, AI-ассистента без лимитов и daily challenge. от 490 ₽ / мес
куда дальше

Другие пути

Все пути

❯ koddo start javascript-state-store

Готов начать этот путь?

Зарегистрируйся — откроем путь прямо на первой задаче. Без установки и настройки, всё в браузере.

❯ Начать путь → Все пути