4. Teardown и unsubscribe

Зачем нужно уметь отписываться

Не все потоки заканчиваются сами. of(1, 2, 3) завершится через мгновение, а вот interval(1000) будет тикать вечно. То же касается обработчиков событий: пока вы не убрали слушатель, он продолжает работать.

В Angular это особенно важно: компонент исчез с экрана, но если подписка осталась, работа продолжится в фоне. Это называется утечка памяти (memory leak). Поэтому RxJS даёт нам способ аккуратно «выключить» поток.

Глоссарий

• Subscription — объект, который возвращает .subscribe(). На нём есть метод .unsubscribe().
• unsubscribe() — команда «выключи этот поток для меня». После вызова значения больше не приходят.
• Teardown (по-русски — «уборка», «демонтаж») — функция очистки. Это функция, которую возвращает рецепт Observable. RxJS вызовет её, когда подписка завершается (по unsubscribe, complete или error). Здесь обычно останавливают таймеры, закрывают сокеты, снимают обработчики.

Как устроена teardown-функция

new Observable(subscriber => {
  // здесь — стартовая работа
  return () => {
    // здесь — уборка
  };
});

const { Observable } = Rx;

const stream$ = new Observable(subscriber => {
  console.log('Subscribed');
  subscriber.next('tick');

  return () => {
    console.log('Teardown');
  };
});

const sub = stream$.subscribe(value => {
  console.log('Value: ' + value);
});

sub.unsubscribe();