Уведомления

Будущих студентов курса "JavaScript Developer. Professional" приглашаем участвовать в открытом вебинаре на тему "Делаем интерактивного Telegram бота на nodejs".

А пока делимся традиционным переводом полезной статьи.

Если вы используете Angular и библиотеку RxJS, здесь вы узнаете все способы, которые вам могут понадобиться, чтобы подписываться на уведомления от объектов Observable и отписываться от них!

Работать с кодом в динамическом режиме можно вэтом онлайн-редакторе. Полный исходный код для этой статьи размещен вэтом репозитории GitHub.

Введение

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

Чтобы избежать утечек памяти, важно вовремя отписываться от уведомлений, выпускаемых объектами Observable. В этой статье описано большинство доступных способов, с помощью которых в компонентах Angular можно отписываться от уведомлений, выпускаемых объектами Observable.

Начнем с создания демонстрационного сервиса (DummyService), которой поможет нам отслеживать устанавливаемые подписки.

У нашего демонстрационного сервиса будет единственный метод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, с помощью которого можно включить несколько условий отписки в один экземпляр Subscription. Сначала создадим свойство класса, инициализированное какnew Subscription(). Затем, вместо назначения наших подписок свойствам класса, вызовем методSubscription.add. Наконец, выполним отписку в методеngOnDestroy.

После открытия консоли мы должны увидеть две подписки:

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

3 AsyncPipe

В Angular есть много отличных встроенных фильтров (pipe). Одним из них являетсяAsyncPipe. AsyncPipe принимает объект Observable, автоматически подписывается на уведомления от него и отписывается от них при уничтожении компонента. В отличие от предыдущего примера здесь мыне устанавливаем подписку в нашем компоненте, а передаем объект Observable фильтру AsyncPipe:

По моему мнению, это один из самых удачных способов использования объектов Observable в Angular. Вам нужно просто создать необходимые Observable, и Angular будет подписываться и отписываться за вас.

4 оператор takeUntil

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

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

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

SubSink это потрясающая библиотека, созданнаяУордом Беллом (Ward Bell). С ее помощью можно корректно отписываться от Observable внутри своего компонента.

Сначала установим SubSink, выполнив команду npm i subsink илиyarn add subsink. Затем создадим свойство класса типа SubSink.SubSink можно использовать двумя способами: простой способ с использованием сеттера и способ Array/Add.

Простой способзаключается в использовании метода-сеттераsink.Способ Array/Add имеет такой же синтаксис, что и собственный метод RxJSSubscription.add. Создадим подписку каждым из этих способов. Тогда наш компонент будет выглядеть вот так:

6 библиотека until-destroy

Примечание. Эта библиотека работает на Pre Ivy Angular по-другому. Дополнительные сведения см. вдокументации.

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

Для этого нам всего лишь нужно применить декоратор UntilDestroy к нашему компоненту и добавить операторuntilDestroyedв метод pipe() объекта Observable:

В заключение скажем, что until-destroy является очень мощной библиотекой, позволяющей автоматически подписываться на уведомления от объектов Observable и отписываться от них. Кроме того, у until-destroyесть много возможностей, которые не описаны в этой статье, поэтому обязательно посмотрите репозиторий GitHub!

Резюме

Мы представили множество способов, позволяющих подписываться на уведомления от объектов Observable и отписываться от них. У каждого из этих способов есть свои достоинства и недостатки, а также отличительный стиль написания кода.

Но какой бы вариант вы ни выбрали, самое важное действовать последовательно.

- Узнать подробнее о карьерных перспективах.

- Записаться на открытый вебинар "Делаем интерактивного Telegram бота на nodejs".