Redux в Angular. Введение.
В данном цикле статей поговорим об использовании популярных реализаций redux/state-management’а в Angular. В цикле будут рассмотрены решения: ngrx, ngxs и akita.
Для демонстрации работы redux будет реализован простой новостной сайт. Приложение будет реализовывать загрузку, добавление, изменение и удаление новостей, тем самым реализуя основные CRUD операции.
Цикл состоит из следующих статей:
- Генерация приложения с микрофронтендами.
- Создание базовых классов.
- Создание фейкового API для новостей.
- Создание UI компонентов для отображения новостей.
- Концепты и понятия в Redux.
- Рекомендации по организации state.
- Ngrx в действии: создание и тестирование.
- Использование Ngxs.
- Использование Akita.
- Сравнение разных реализаций redux. Ngrx vs Ngxs vs Akita.
В статье «Генерация приложения с микрофронтендами» идет описание создания каркаса приложения с использованием монорепозитория Nx. Для демонстрации различных реализаций redux создаются микрофронтенды — три remote приложения, каждое из которых включает в себя только одну из реализаций redux. Одно shell приложение подключает в себя все удаленные приложения и предоставляет ссылки на каждое из включенных приложений.
Вторая статья «Создание базовых классов» посвящена созданию базовых интерфейсов и сервисов для сайта новостей.
В третьей статье «Создание фейкового API для новостей» приводится реализация фейкового API для осуществления CRUD операций над списком новостей.
Четвертая статья «Создание UI компонентов для отображения новостей» посвящена разработке общих компонентов для отображения списков новостей.
Пятая статья «Концепты и понятия в Redux» знакомит читателя с базовыми понятиями в Redux, а также объясняет принципы работы данного подхода.
В шестой статье «Рекомендации по организации state» приводятся советы по созданию и организации state, в частности приводится разбор плохих решений.
Седьмая статья «Ngrx в действии: создание и тестирование» предоставляет детальный разбор Ngrx, а также затрагивает моменты связанные с тестированием.
В восьмой статье «Использование Ngxs» приводится пример использования Ngxs в качестве state management. В статье создается стейт без использования плагинов (Ngxs labs).
Девятая статья «Использование Akita» посвящена реализации хранилища с помощью Akita. В конце статьи приводятся примеры для следующего поколения akita — elf.
В десятой статье «Сравнение разных реализаций redux. Ngrx vs Ngxs vs Akita.» приводятся плюсы и минусы каждой из реализаций redux в Angular.
В заключении приводится краткое описание структуры проекта и некоторые рекомендации при использовании redux.
Ссылки
Следующая статья — Генерация приложения с микрофронтендами.
Все исходники находятся на github, в репозитории:
Для того, чтобы посмотреть состояние проекта на момент написания статьи, нужно выбрать соответствующий тег — redux.
Подписывайтесь на блог, чтобы не пропустить новые статьи про Angular, и веб-разработку. Medium | Telegram| VK |Tw| Ln
