RxJS и Angular - откажитесь от подписки как профессионал

Все шаблоны, которые вам когда-либо понадобятся для подписки и отказа от подписки на RxJS Observables в вашем проекте Angular!

Следите за кодом с помощью этой живой демонстрации
Найдите полный исходный код этого блога в этом репозитории github

Вступление

Мы используем RxJS в каждом приложении Angular, которое мы пишем, он оказывает большое влияние на поток данных в нашем приложении, производительность и многое другое.

Важно отказаться от подписки на наши Observables, чтобы избежать утечек памяти. Эта статья покажет вам большинство шаблонов, от которых вы можете отказаться от подписки на Observables в своих компонентах Angular!

Мы начинаем с создания этой фиктивной службы, чтобы отслеживать создаваемые нами подписки.

Наша фиктивная служба будет иметь единственный getEmissions метод, который принимает scope для регистрации событий и возвращает Observable, который выдает
${scope} Emission #n каждую n-ю секунду.

№1 «Обычный» способ

Самый простой способ подписаться и отказаться от подписки на Observable - это подписаться в ngOnInit, создать свойство класса, содержащее наш Subscription, и отказаться от подписки в ngOnDestroy.
Чтобы упростить задачу, мы можем инициализировать свойство подписки на Subscription.EMPTY, чтобы избежать проверки на null это при отказе от подписки:

Чтобы убедиться, что все работает, мы удалим компонент из DOM через 3 секунды, чтобы убедиться, что он отписывается.

Как следует из названия, это самый простой способ отказа от подписки, он хорош, когда у вас есть одна подписка, но когда у вас несколько подписок, для каждой из них потребуется собственное свойство класса и вызов до unsubscribe в пределах ngOnDestroy

# 2 метод Subscription.add

Подписка RxJS поставляется со встроенным Subscription.add методом, который позволяет нам объединить несколько логик разрыва в один экземпляр подписки.
Сначала создайте свойство класса, инициализированное значением new Subscription(), затем, вместо того, чтобы назначать наши подписки свойствам класса, вызовите Subscription.add метод < br /> И напоследок отпишусь в ngOnDestroy

Открыв нашу консоль, мы должны увидеть две подписки:

Благодаря этому мы можем легко использовать встроенную мощь RxJS и подписаться / отказаться от подписки на несколько Observable, не вводя дополнительных свойств класса.

# 3 AsyncPipe

Angular имеет много отличных встроенных каналов, один из них - AsyncPipe.
AsyncPipe принимает Observable, автоматически подписывается на него и отменяет подписку при уничтожении компонента.
В отличие от предыдущих примеров, здесь мы не подписываются на наш компонент, но передают Observable в AsyncPipe:

На мой взгляд, это один из самых чистых способов использования Observables в Angular.
Все, что вам нужно, это создать Observables и позволить Angular подписаться и отказаться от подписки за вас.

# 4 Оператор takeUntil

RxJS содержит множество полезных операторов, takeUntil - один из них.
Согласно его сигнатуре, takeUntil принимает notifier, который после отправки отписывается от источника Observable.
В нашем случае мы хотели бы уведомить Observable, когда компонент уничтожен, для этого мы добавляем свойство класса с именем componentDestroyed$ (или любое другое имя, которое вы хотите) типа Subject<void> и используем его в качестве уведомителя.
Все осталось уведомить в ngOnDestroy, наш окончательный код будет:

В отличие от предыдущего «обычного» способа, этот шаблон не вводит дополнительных свойств класса с несколькими подписками. Все, что нам нужно сделать, это добавить takeUntil(componentDestroyed$), а RxJS позаботится обо всем остальном.

# 5 Библиотека SubSink

SubSink - отличная библиотека от Ward Bell, она позволяет вам изящно отказаться от подписки на Observables в вашем компоненте.

Сначала установите SubSink, запустивnpm i subsink или yarn add subsink
Затем мы создадим свойство класса типа SubSink.
SubSink бывает двух видов: Easy Technique (с использованием установщика) и Массив / Техника добавления.

Использовать Easy Technique так же просто, как использовать метод установки sink.
Использование Array / Add Technique имеет тот же синтаксис, что и исходный RxJS _23 _.
Создавая подписку на каждый из методов, наш компонент будет выглядеть так

# 6 до уничтожения библиотеки

Примечание: эта библиотека работает по-другому в Pre Ivy Angular, для получения дополнительной информации посетите docs

Until-destroy - одна из многих замечательных библиотек от ngneat, она использует декоратор UntilDestroy, чтобы определять, какие свойства являются подписками, и автоматически отменять подписку при уничтожении компонента.
Мы также можем использовать его собственный оператор RxJS с именем untilDestroyed вместо использования свойств класса.

Чтобы использовать его, нам нужно только применить декоратор UntilDestroy к нашему компоненту и добавить оператор untilDestroyed в канал Observables:

В заключение, until-destroy - очень мощная библиотека, которая позволяет вам автоматически подписываться / отказываться от подписки на Observables.
Кроме того, until-destroy имеет много функций, которые не описаны в этой статье, поэтому не стесняйтесь и отправляйтесь в их репозиторий на github!

Резюме

Мы видели множество способов и шаблонов для подписки и отказа от подписки на наши Observables, каждый из которых имеет свои плюсы и минусы и привносит в таблицу свой стиль кодирования.

Самое главное, какой бы шаблон вы ни выбрали, будьте последовательны.