учебный путь · javascript
Менеджер состояния «Атом»
Соберите синхронный менеджер состояния в духе Redux: чистые редьюсеры с иммутабельными обновлениями, селекторы и производные данные, машину undo/redo, цепочку middleware и сборку store с подписками. Каждая задача — рабочий модуль системы.
AI-ассистент ведёт подсказками, но решение не выдаёт
curriculum
Задачи пути — 5 модулей, 25 задач
Каждый модуль — навык. Решаешь задачи по порядку, и к финалу из них собирается рабочий результат.
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 start javascript-state-store
Готов начать этот путь?
Зарегистрируйся — откроем путь прямо на первой задаче. Без установки и настройки, всё в браузере.