[RxJS] Flatten a higher order observable with mergeAll in RxJS

Posted 2020-08-23 Answer1215

Among RxJS flattening operators, switch is the most commonly used operator. However, it is important to get acquainted with mergeAll, another flattening operator which allows multiple concurrent inner observables. In this lesson we will explore mergeAll in detail.

 

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

const clockObservable = clickObservable
  .map(click => Rx.Observable.interval(1000))
  .mergeAll(3); // allow 3 inner observables

// flattening
// Observable<Observable<number>> ---> Observable<number>

/*
--------+--------+------------------------
        \                 -0-1-2-3 -0-1-2-3-4-5-6
         
         mergeAll
         
----------0-1-2-3-405162738495...
*/

clockObservable
  .subscribe(x => console.log(x));