🦄 Angular: декоратор автоматической отписки для RxJs

Обзор

За все время, что вы использовали Angular, вы видите много кода RxJ, это могут быть простые наблюдаемые или более прогрессивные темы, но у нас всегда есть одна главная проблема — утечка памяти. Итак, у меня есть сделка для вас, могу ли я решить вашу проблему? 😏

😒 Итак, в чем проблема?

Давайте представим простой случай: у вас есть Тема и вы хотите просто оформить подписку.

private readonly data$ = interval(1000);
public ngOnInit(): void {
    this.data$.subscribe(console.log);
}

Как мы знаем, каждая подписка, которую вы сделали в компоненте, не будет уничтожена вместе с компонентом. Значит, вам нужно удалить его самостоятельно. Подробнее о самых популярных способах вы можете прочитать здесь. И я покажу их выпуски.

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

Решение здесь

@AutoUnsubscribe()
public someObservable = interval(1000);

Декоратор AutoUnsubscribe оборачивает параметр или метод и добавляет все подписки в массив, затем при уничтожении компонента — вызывает .unsubscribe() для каждого элемента в массиве.

npm i ngx-auto-unsubscribe-decorator

Что может этот декоратор?

Параметры

Он поддерживает параметры двух типов: Observable и Subscription

@AutoUnsubscribe()
public someSubscription = interval(1000).subscription();
@AutoUnsubscribe()
public someObservable = interval(1000);

Также вы можете переписать параметры, это не повлияет на удаление подписок.

public ngOnInit(): void {
    this.someObservable.subscribe();
    this.someObservable = interval(150);
    this.someObservable.subscribe();
}

Все подписки будут удалены.

Методы

Методы также могут возвращать Observable или Subscription.

@AutoUnsubscribe()
public getObservable(): Observable<number> {
    return interval(1000);
}
@AutoUnsubscribe()
public getSubscription(): Subscription {
    return interval(1000).subscribe();
}

Вы можете вызывать его где угодно, конструктором или ngOnInit, это не имеет значения, и ничего больше делать не требуется.

public ngOnInit(): void {
    this.getObservable().subscribe();
    this.getSubscription();
}

Прелесть этого подхода в том, что мы просто упаковываем одну вещь и используем ее где угодно, не беспокоясь о наших подписках.

Спасибо за чтение. Все ссылки вы можете найти ниже 🔽

Телеграмма: https://t.me/Nillcon

СтекБлиц | НПМ | Гитхаб