Хорошие способы использования ngrx/effects
Хорошие способы использования ngrx/effects
Оригинал статьи Документация ngrx Справочник RxJS
Скорее всего, вы используете библиотеку эффектов (ngrx/Effects) только для коммуникации с внешним источником, вызывая побочный эффект (ngrx/Effect) с помощью действия (ngrx/Action). Но знаете ли вы, что библиотеку эффектов можно использовать для чего-то ещё?
ngrx/Effects
Библиотека эффектов предоставляет способ изолировать побочные эффекты в своей собственной модели, вне хранилища (ngrx/Store) и компонентов Angular. Она предоставляет нам наблюдаемые действия (Observable/actions), проще говоря — поток(stream) всех отправленных (dispatched) действий. Для каждого отправленного действия она вызывает редуктор (ngrx/Reducer), и создаёт новое значение. Она также предоставляет RxJS оператор ofType, который используется для фильтрации действий по их типу.
Типичный эффект использует наблюдаемые действия в качестве источника и использует оператор ofType для выполнения своего побочного эффекта только при отправке соответствующего действия. Например, мы хотим получить список клиентов из внешнего ресурса.
Для этого нам нужно создать эффект getCustomers. Этот эффект прослушивает каждое отправляемое действие, и когда он получает действие с типом [Customers Page] Get, то он отправляет HTTP-запрос. В зависимости от ответа эффект будет отправлять действие GetCustomersSuccess, если запрос был успешным, или действие GetCustomersFailed, если запрос вернул ошибку. Чтобы найти клиентов, мы должны отправить действие GetCustomers.
Внутри нашего компонента, где мы хотим показать список всех клиентов, мы должны использовать селектор, чтобы выбрать всех клиентов из состояния хранилища.
1. Внешние ресурсы
Наблюдаемые действия являются наиболее известным, и наиболее часто используемым источником ваших эффектов. Однако, мы можем использовать любой наблюдаемый объект (Observable) в качестве источника.
Используем наблюдаемые объекты RxJS
Используем JavaScript API и RxJS
Используем Angular Material CDK
2. Перехват действий диалоговых окон Angular Material
Вместо обработки действий диалога внутри компонента можно использовать эффект. Эффект определяет, когда открывать и закрывать диалог, и отправляет действие с результатом диалога.
3. Показываем уведомления
Обработка уведомлений внутри эффекта делает остальную часть вашего приложения чистой и более понятной. Рассмотрим пример окна напоминалки на базе Snackbar Angular Material.
Или окна ошибки
4. Используем селектор внутри эффектов
Иногда вам нужно получить доступ к состоянию хранилища (ngrx\Store) внутри эффекта. Для этого мы можем использовать оператор RxJS withLatestFrom в сочетании с селектором для получения фрагмента (slice) состояния хранилища.
Чтобы сделать следующий шаг, мы можем использовать данные, полученные селектором, чтобы проверить, существует ли уже сущность в хранилище. Это дает нам возможность блокировать ненужные запросы GET, если объект уже сохранен в хранилище.
5. Навигация на основе действий
Внедряя (inject) маршрут(Angular router) в эффекты, можно перенаправить пользователя на основе определенных действий. В приведенном ниже примере мы отправляем пользователя на домашнюю страницу, когда он или она выходит из системы.
Обратите внимание, что мы передаем @Effect({dispatch:false}), потому что мы не отправляем никакого события. Если бы мы этого не сделали, мы бы застряли в бесконечном цикле, потому что эффект повторяет одно и то же действие снова и снова.
6. Аналитика / мониторинг
Поскольку каждое отправленное действие генерирует новое значение для источника действий, мы можем использовать этот источник для получения статистики приложения. Мы можем регистрировать все действия или некоторые, фильтруя их с помощью оператора ofType. В приведенном ниже примере мы регистрируем каждое действие в appInsights.
Заключение
Используя эти способы, мы можем переместить часть кода из наших компонентов или ngrx/Store, в модель ngrx/Effects. Это сделает компоненты более чистыми, и поможет хранить побочные эффекты нашего приложения отдельно. В результате получается код, который легче понимать и тестировать.
Теперь, когда вы знаете, в каких случаях эффекты можно использовать, стоит посмотреть когда этого делать не стоит.
Плохие способы использования ngrx/effects
Примечание переводчика: примеры кода дополнены комментариями, исправлены незначительные ошибки, текст незначительно сокращён для более литературно красивого перевода.