[RxJS] Use takeUntil instead of manually unsubscribing from Observables

Posted 2020-09-20 Answer1215

Manually unsubscribing from subscriptions is safe, but tedious and error-prone. This lesson will teach us about the takeUntil operator and its utility to make unsubscribing automatic.

 

const click$ = Rx.Observable.fromEvent(document, ‘click‘);

const sub = click$.subscribe(function(ev) {
  console.log(ev.clientX);
});

setTimeout(() => {
  sub.unsubscribe();
}, 2000);

In the code we manully unsubscribe.

 

We can use tha helper methods such as takeUntil, take() help to automatically handle subscritpiton.

const click$ = Rx.Observable
  .fromEvent(document, ‘click‘);

const four$ = Rx.Observable.interval(4000).take(1);

/*
click$          --c------c---c-c-----c---c---c-
four$           -----------------0|
clickUntilFour$ --c------c---c-c-|
*/

const clickUntilFour$ = click$.takeUntil(four$);

clickUntilFour$.subscribe(function (ev) {
  console.log(ev.clientX);
});