Redux в Angular. Заключение.
В данном цикле статей рассматривались следующие реализации:
Ngrx
— первая реализацияredux
с сохранением концепций и понятий.Ngxs
— реализацияredux
, которая должна была устранить проблемы с производительностью и предоставить решение более близкое к фреймворку, нежелиngrx
.Akita
— альтернативный взгляд наredux
, который должен был уменьшить количество кода при реализацииredux
.
Для демонстрации использовался микро новостной сайт.
В качестве материалов использовались статьи с лучшего новостного ресурса — панорамы.
Так как разные реализации redux
требуют подключение глобального модуля в AppModule
, то приложение было построено с использованием микрофронтендов на базе монорепозитория Nx.
Было создано одно shell
приложение — redux-dashboard
, а также три удаленных приложения: redux-ngrx
, redux-ngxs
и redux-akita
.
Подробнее про реализацию микрофронтендов в статье — Генерация приложений.
Финальная структура проекта:
workspace
├── apps
│ └── redux
│ ├── akita
│ ├── dashboard
│ ├── ngrx
│ └── ngxs
├── libs
│ ├── core
│ │ ├── environments
│ │ ├── hammer
│ │ ├── icons
│ │ ├── operators
│ │ ├── platform
│ │ ├── testing
│ │ ├── types
│ │ ├── uuid
│ │ └── window
│ ├── redux
│ │ ├── akita
│ │ │ ├── posts
│ │ │ │ ├── pages
│ │ │ │ └── state
│ │ │ └── store
│ │ │ └── root
│ │ ├── config
│ │ ├── dashboard
│ │ │ ├── page
│ │ │ └── ui
│ │ ├── ngrx
│ │ ├── akita
│ │ │ ├── posts
│ │ │ │ ├── pages
│ │ │ │ └── state
│ │ │ └── store
│ │ │ └── root
│ │ ├── ngxs
│ │ ├── akita
│ │ │ ├── posts
│ │ │ │ ├── pages
│ │ │ │ └── state
│ │ │ └── store
│ │ │ └── root
│ │ ├── posts
│ │ │ ├── api
│ │ │ ├── common
│ │ │ ├── facade
│ │ │ ├── page
│ │ │ ├── ui
│ │ │ │ ├── create
│ │ │ │ ├── header
│ │ │ │ ├── last
│ │ │ │ ├── pipes
│ │ │ │ ├── popular
│ │ │ │ └── promo
│ │ │ └── view
│ │ │ ├── page
│ │ │ └── ui
│ │ └── ui
│ │ └── header
│ └── ui
│ ├── carousel
│ ├── container
│ ├── grid
│ ├── layout
│ └── stylesheets
├── angular.json
├── jest.config.ts
├── jest.preset.js
├── migrations.json
├── module-federation.config.js
├── nx.json
├── package.json
├── README.md
├── tsconfig.base.json
└── yarn.lock
Так как Nx
позволяет создавать общие библиотеки, то весь общий функционал был вынесен в библиотеки, и различия всех remote
приложений отличается только подключением глобального store
и одной feature store
, которая реализует хранение и отображение списка новостей.
Для того чтобы эмулировать API был создан фейковый API сервис, который сохраняет данные в localstorage
.
Подробнее про реализацию микрофронтендов в статье — Создание фейкового API для новостей.
Для того чтобы UI
компоненты не зависели от конкретной реализации redux
, добавляется абстрактный сервис — PostFacade
, который скрывает обращение к свойствам стора, и предоставляет общие интерфейсы для доступа к данным и методам.
posts
├── api
├── common
├── facade
├── page
├── ui
│ ├── create
│ ├── header
│ ├── last
│ ├── pipes
│ ├── popular
│ └── promo
└── view
├── page
└── ui
posts/api
— сервис, реализующий фейковое апи для списка новостей;posts/common
— общие интерфейсы для новостного сайта;posts/facade
— абстрактный сервис для предоставления доступа к свойствамredux
;posts/page
— страница с виджетами новостей;posts/view/page
— страница с полным описанием новости;posts/view/ui/article
— компонент, который выводит список новостей;posts/ui/create
— виджет создания новой новости;posts/ui/header
— виджет заголовка страницы;posts/ui/last
— виджет со списком последних новостей;posts/ui/pipes
— общие пайпы для новостей;posts/ui/popular
— виджет со списком популярных новостей;posts/ui/promo
— виджет со списком промо новостей.
Подробнее про реализацию UI компонентов в статье — Создание UI компонентов для отображения новостей.
Каждая из реализаций redux
имеет одну и туже структуру:
redux
├── akita
│ ├── posts
│ │ ├── pages
│ │ └── state
│ └── store
│ └── root
├── ngrx
│ ├── posts
│ │ ├── pages
│ │ └── state
│ └── store
│ └── root
└── ngxs
├── posts
│ ├── pages
│ └── state
└── store
└── root
posts/pages
— модуль, который подключает общие страницы для новостей, в частности страница со списком новостей, а также страница с полным описанием новости;posts/state
— модуль, в котором реализуетсяfeature store
для списка новостей;store/root
— модуль, который подключается вAppModule
предоставляет сервисыStore.forRoot()
.
Каждая из реализаций redux
будет выполнять ряд операций со списком новостей. Для сайта новостей понадобятся следующие операции:
- Загрузка списка новостей;
- Загрузка новости по
id
; - Создание новой новости;
- Изменение новости;
- Удаление новости;
- Удаление всех новостей;
- Восстановление новостей (сброс новостей до дефолтного списка новостей.
Подробнее про реализацию
redux
в статье— Концепты и понятия в Redux.
Для Ngrx
модуль feature store
для списка новостей выглядит следующим образом:
libs/redux/ngrx/posts/state
├── post.actions.ts
├── post.effects.ts
├── post.facade.ts
├── post.reducer.ts
├── post.selectors.ts
└── posts-state.module.ts
Каждый файл содержит конкретные абстракции redux
:
post.actions.ts
— файл, который содержит все экшены;post.effects.ts
— файл, который содержит все эффекты;post.facade.ts
— файл, который скрывает прямое обращение кredux
;post.reducer.ts
— файл, который содержит интерфейсstate
иreducer
;post.selectors.ts
— файл, который содержит все селекторы.
Подробнее про реализацию
Ngrx
в статье— Ngrx в действии: создание и тестирование.
State
для Ngxs
принял вид:
libs/redux/ngxs/posts/state
├── post.actions.ts
├── post.facade.ts
├── post.state.ts
└── posts-state.module.ts
Каждый файл содержит конкретные абстракции redux
:
post.actions.ts
— файл, который содержит все экшены;post.state.ts
— файл, который содержит все селекторы, мутации и асинхронные экшены;post.facade.ts
— файл, который скрывает прямое обращение кredux
.
Подробнее про реализацию
Ngrx
в статье— Использование Ngxs.
Реализация Akita
в итоге получает структуру:
libs/redux/akita/posts/state
├── post.actions.ts
├── post.effects.ts
├── post.facade.ts
├── post.query.ts
├── post.store.ts
└── posts-state.module.ts
Каждый файл содержит конкретные абстракции redux
:
post.actions.ts
— файл, который содержит все экшены;post.effects.ts
— файл, который содержит все эффекты;post.facade.ts
— файл, который скрывает прямое обращение кredux
;post.query.ts
— файл, который содержит все селекторы;post.store.ts
— файл, в котором хранится реализация управления сущностями.
Подробнее про реализацию
Akita
в статье— Использование Akita.
В результате разработки выбранных реализаций redux
, каждая из реализаций имеет место на существование. Ngrx
представляет собой понятную реализацию redux
с крутым решением в виде эффектов. Ngxs
предлагает простую реализацию, максимально приближенную к фреймворку. Akita
же что-то среднее между Ngrx
и Ngxs
, включая преимущества обеих реализаций.
Подробнее про сравнение реализаций в статье— Сравнение разных реализаций redux. Ngrx vs Ngxs vs Akita.
Резюме
Цель данного цикла статей — показать примеры использования различных реализаций redux
в Angular
и дать ряд советов по выбору реализации, а также рассмотреть основные ошибки при проектировании state
.
Цикл статей приводит подробное описание всего процесса создания демо приложения. Сначала создаются новые приложения, где на каждую выбранную технологию создается отдельное приложение, которое в дальнейшем будет выступать в качестве remote приложения.
Далее вводятся понятия сущности Post
и описываются базовые принципы работы Redux
. После определения необходимых возможностей идет разработка трех feature store
, по одной в каждой реализации redux
.
Сначала реализуется решение для Ngrx
, затем для Ngxs
и в конце завершается решением для Akita
.
После того как были созданы все хранилища идет обзор каждой из технологий, описывая их плюсы и минусы. На основании преимуществ даются советы по выбору конкретной реализации.
Готовый проект можно посмотреть на сайте — redux.fafn.ru.
- ngrx.fafn.ru — реализация Ngrx;
- ngxs.fafn.ru — реализация Ngxs;
- akita.fafn.ru — реализация Akita.
Ссылки
Предыдущая статья — Сравнение разных реализаций redux. Ngrx vs Ngxs vs Akita.
Все исходники находятся на github, в репозитории:
Для того, чтобы посмотреть состояние проекта на момент написания статьи, нужно выбрать соответствующий тег — redux
.
Подписывайтесь на блог, чтобы не пропустить новые статьи про Angular, и веб-разработку. Medium | Telegram| VK |Tw| Ln