Koddo
начать бесплатно
проект · JavaScript

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

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

Для старта: Понимаешь функции, замыкания и копирование объектов JavaScript

  • JavaScript
  • 5 модулей
  • 25 задач
  • 5 задач бесплатно
начать бесплатно посмотреть программу

После регистрации проект откроется в приложении.

результаты практики

Что освоишь на практике

Автор программы:
  • Писать чистые редьюсеры с иммутабельными обновлениями массивов и объектов
  • Строить селекторы производных данных и кэшировать их по аргументам
  • Реализовывать undo/redo через стеки past и future
подробнее о задачах и навыках

Что получится

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

Для кого

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

Что ещё отработаешь

  • Собирать цепочку middleware с остановкой на первом отклонённом действии
  • Сворачивать несколько middleware в одну функцию через composeMiddleware
  • Собирать store с getState/dispatch и подпиской через subscribe
  • Уведомлять подписчиков только при действительном изменении состояния
программа

Программа проекта

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

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, который уведомляет только при изменении состояния
полный доступ Платные модули этого проекта входят в Premium. Условия подписки можно посмотреть на странице тарифов. от 490 ₽ / мес посмотреть тарифы первые 5 задач — бесплатно, без карты
первый шаг в этом проекте

Начни с задачи «Редьюсер добавления задачи»

После регистрации откроется проект «Менеджер состояния «Атом»». Начни с модуля «Чистые редьюсеры»: редактор и проверка доступны на странице задачи.

5 задач бесплатно

начать бесплатно

После регистрации проект откроется в приложении.

другие курсы и сборники на этом языке
куда дальше

Другие курсы и сборники

все курсы