[JavaScript, Программирование, Angular] RxJS и Angular: искусство отписки от уведомлений (перевод)
Автор
Сообщение
news_bot ®
Стаж: 6 лет 9 месяцев
Сообщений: 27286
Будущих студентов курса "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 — библиотека SubSinkSubSink — это потрясающая библиотека, созданная Уордом Беллом (Ward Bell). С ее помощью можно корректно отписываться от Observable внутри своего компонента.Сначала установим SubSink, выполнив команду npm i subsink или yarn add subsink. Затем создадим свойство класса типа SubSink.SubSink можно использовать двумя способами: простой способ с использованием сеттера и способ Array/Add.Простой способ заключается в использовании метода-сеттера sink.Способ Array/Add имеет такой же синтаксис, что и собственный метод RxJS Subscription.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".
===========
Источник:
habr.com
===========
===========
Автор оригинала: Tal Ohana
===========Похожие новости:
- [Программирование, Разработка под Android] Рисование собственных представлений (View) в Android (перевод)
- [Робототехника, Софт] Чем интересна разработка программных роботов RPA?
- [Управление персоналом] Разочарования и проблемы офферов (перевод)
- [Программирование, Разработка под Android, Kotlin] Меняем стандартный диалог сбоя приложения в Android на собственный экран (перевод)
- [Информационная безопасность, Тестирование IT-систем, Разработка под Windows] Как работают эксплойты по повышению привилегий в ОС Windows
- [Программирование, Функциональное программирование] Векторные языки — параллельный мир
- [Разработка веб-сайтов, JavaScript, Программирование] Роутинг и рендеринг страниц на стороне клиента с помощью History API и динамического импорта
- [Программирование, Java, Анализ и проектирование систем] Микросервисная авторизация для чайников для чайников
- [Настройка Linux, Сетевые технологии, Программирование микроконтроллеров] Делаем из ENC28J60 внешнюю USB сетевую карту
- [Программирование, ERP-системы, Управление разработкой, Управление персоналом, Читальный зал] Пузырь, соломинка и лапоть. Что происходит с программистами 1С
Теги для поиска: #_javascript, #_programmirovanie (Программирование), #_angular, #_rxjs, #_angular, #_uvedomlenija (уведомления), #_blog_kompanii_otus._onlajnobrazovanie (
Блог компании OTUS. Онлайн-образование
), #_javascript, #_programmirovanie (
Программирование
), #_angular
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 07:10
Часовой пояс: UTC + 5
| Автор | Сообщение |
|---|---|
|
news_bot ®
Стаж: 6 лет 9 месяцев |
|
|
Будущих студентов курса "JavaScript Developer. Professional" приглашаем участвовать в открытом вебинаре на тему "Делаем интерактивного Telegram бота на nodejs".
А пока делимся традиционным переводом полезной статьи.  Если вы используете Angular и библиотеку RxJS, здесь вы узнаете все способы, которые вам могут понадобиться, чтобы подписываться на уведомления от объектов Observable и отписываться от них! 
Работать с кодом в динамическом режиме можно в этом онлайн-редакторе. Полный исходный код для этой статьи размещен в этом репозитории GitHub.
 Как можно заключить из заголовка, это самый простой способ отписки. Он хорош, когда у вас есть одна подписка. Когда же подписок несколько, для каждой из них потребуется собственное свойство класса и вызов 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 — библиотека SubSinkSubSink — это потрясающая библиотека, созданная Уордом Беллом (Ward Bell). С ее помощью можно корректно отписываться от Observable внутри своего компонента.Сначала установим SubSink, выполнив команду npm i subsink или yarn add subsink. Затем создадим свойство класса типа SubSink.SubSink можно использовать двумя способами: простой способ с использованием сеттера и способ Array/Add.Простой способ заключается в использовании метода-сеттера sink.Способ Array/Add имеет такой же синтаксис, что и собственный метод RxJS Subscription.add. Создадим подписку каждым из этих способов. Тогда наш компонент будет выглядеть вот так:  № 6 — библиотека until-destroy Примечание. Эта библиотека работает на Pre Ivy Angular по-другому. Дополнительные сведения см. в документации.
 В заключение скажем, что until-destroy является очень мощной библиотекой, позволяющей автоматически подписываться на уведомления от объектов Observable и отписываться от них. Кроме того, у until-destroy есть много возможностей, которые не описаны в этой статье, поэтому обязательно посмотрите репозиторий GitHub!РезюмеМы представили множество способов, позволяющих подписываться на уведомления от объектов Observable и отписываться от них. У каждого из этих способов есть свои достоинства и недостатки, а также отличительный стиль написания кода.Но какой бы вариант вы ни выбрали, самое важное — действовать последовательно. 
- Узнать подробнее о карьерных перспективах. - Записаться на открытый вебинар "Делаем интерактивного Telegram бота на nodejs".
=========== Источник: habr.com =========== =========== Автор оригинала: Tal Ohana ===========Похожие новости:
Блог компании OTUS. Онлайн-образование ), #_javascript, #_programmirovanie ( Программирование ), #_angular |
|
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 07:10
Часовой пояс: UTC + 5