Пользовательский оператор RxJS для использования с NgRx
При использовании NgRx мы во многом полагаемся на выбор частей магазина для создания наших компонентов. Избегать внутрикомпонентных подписок - это хорошо, поэтому обычно у нас есть контейнеры, в которых хранятся наблюдаемые, возвращаемые селекторами, и мы используем асинхронный конвейер для передачи фактических данных вниз для отображения докладчиками.
Иногда нам действительно нужно подписаться на селекторы, и после каждой подписки необходимо отказаться от подписки. Стандартный способ отказаться от подписки на множество наблюдаемых выглядит следующим образом:
Это означает, что для каждого select магазина нам необходимо:
Было бы здорово сгруппировать и select, и takeUntil, верно? Мы можем добиться этого, написав собственный оператор RxJS, например:
Обратной стороной является то, что для его использования нам все равно нужно определить уничтоженный компонент (Subject), вызвать для него next и complete:
Если бы мы могли найти способ обернуть это Subject творение, takeUntil, и прослушать ngOnDestroy компонента для запуска next и complete, это было бы здорово. Вот где в игру вступает ngneat / until-destroy. Они предоставляют настраиваемого оператора, который делает именно то, что нам нужно.
Объединив untilDestroy с нашим пользовательским оператором и добавив объявление ожидаемого типа, мы можем получить следующее:
Где мы это используем:
Примечание. Если вы используете View Engine, используйте ngx-until-destroy. Разница в том, что если у вас нет @UntilDestroy() декоратора и вам нужно написать свой ngOnDestroy, он может быть пустым.
Заключение
Вот и все! Быстрый и простой способ уменьшить шаблон, создав собственный оператор RxJS.
Я надеюсь, что это помогает.
