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, в репозитории:

GitHub — Fafnur/angular-samples: Samples of using different solutions in Angular

Для того, чтобы посмотреть состояние проекта на момент написания статьи, нужно выбрать соответствующий тег — redux.

Подписывайтесь на блог, чтобы не пропустить новые статьи про Angular, и веб-разработку. Medium | Telegram| VK |Tw| Ln