Redux в Angular. Сравнение разных реализаций redux. Ngrx vs Ngxs vs Akita.

В данной статье рассматривается сравнение реализаций redux в Angular, в частности ngrx, ngxs и akita.

После того как были описаны и реализованы популярные решения redux в Angular, то можно сравнить плюсы и минусы каждого из решений.

Плюсы и минусы Ngrx

Использование ngrx дает следующие преимущества:

• Близость реализации к концептам redux. В ngrx есть actions, reducer, selectors, которые выполняют свою роль, следуя концепту redux.
• Разделение синхронных экшенов и асинхронных экшенов с помощью эффектов. Эффекты предоставляют простой механизм для вызова асинхронных экшенов.
• Пакет для управления коллекциями сущностей ngrx/entity идет из коробки.
• Простота поддержки. Так как в ngrx все храниться в отдельных файлах, то это упрощает восприятие и поддержку.

Недостатки использования ngrx:

• Большое количество boilerplate кода. Для функционирования нужно создавать экшены, селекторы, эффекты. Все это существенно увеличивает количество однотипного кода.
• Плохие генерируемые тесты. Примеры сгенерированных тестов скупы и вряд ли подскажут начинающему разработчику правильные подходы в тестировании.
• Производительность. Одно из узких мест ngrx это производительность. Удобство единственного источника данных требует множества операций. Яркий пример кредитный калькулятор с графиком платежей. Изменение срока и суммы кредита, приводит к расчету всего графика платежей.

Плюсы и минусы Ngxs

Использование ngxs дает следующие преимущества:

• Маленькая структура хранилища. Один сервис и ряд директив реализует весь redux.
• Простая кривая обучения. Документации достаточно, чтобы разобраться в создании хранилища.

Недостатки использования ngrx:

• Плохая поддержка. На момент написания статьи, для Angular 14/Angular 15 не была собрана актуальная версия библиотеки.
• Маленькая структура хранилища. Чем больше будет логики в стейте, тем более громоздким будет сервис store.
• Неудобный синтаксис экшенов, который построен на классах. Если нужно вызывать экшены из других feature store, то появляются связи между библиотеками.
• Наличие жизненного цикла у экшена, которого нету в redux. В Ngxs есть жизненный цикл экшена: dispatched, successful, canceled и errored. Субъективно полезность сомнительна.

Плюсы и минусы Akita

Использование akita дает следующие преимущества:

• Мощные селекторы. Akita предоставляет query — аналог селекторов в redux, которые более функциональны.
• Небольшое количество boilerplate code.
• Возможность отказаться от экшенов или использовать экшены для эффектов из ngrx/effects ли ngneat/effects.

Недостатки использования akita:

• При потребности эффектов, нужно ставить другой пакет, например ngneat/effects или ngrx/effects.
• Из-за явного отсутсвия редьюсера, все операции по изменению стейта приходится делать в сервисе эффекта или сервисе, который будет отвечать за изменение state.
• Отсутствует хук OnInitEffects в ngneat/effects.

Какую из реализаций выбрать?

В целом, каждая из реализаций имеет место на существование. Ngrx представляет собой понятную реализацию redux с крутым решением в виде эффектов. Ngxs предлагает простую реализацию, максимально приближенную к фреймворку. Akita же что-то среднее между Ngrx и Ngxs, включая преимущества обеих реализаций.

Из важных нюансов можно отметить производительность. Все приведенные решения не являются оптимальными. Возможно ngxs и akita более производительны чем ngrx, за счет простоты реализации, но если сравнивать redux с обычным сервисом Angular, то любая реализация будет ему проигрывать.

Поэтому пункта производительности нету ни у одной из реализаций.

Также стоит отметить важность структуры store. Большинство проблем с redux обычно связанно с неправильной организацией хранилища.

Подробнее с советами можно ознакомиться в статье — Рекомендации по организации state.

Если у вас стоит выбор между тем, какую реализацию использовать, то выбирайте следующим образом:

• Если нужно что-то стабильное и поддерживаемое, то используйте Ngrx.
• Если важна скорость разработки, в частности сократить кодовую базу, то можете использовать Ngxs или Akita. Но помните, что у ngxs есть проблемы с обновлениями, а Akita уже deprecated и нужно использовать elf.
• Если вам нужна производительность, тогда не используйте redux, а реализуйте собственные Angular сервисы.

Ссылки

Оглавление

Предыдущая статья — Использование Akita.

Следующая статья — Заключение.

Все исходники находятся на github, в репозитории:

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

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

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