[RxJS] Use RxJS concatMap to map and concat high order observables

Like switchMap and mergeMap, concatMap is a shortcut for map() followed by a concatAll(). In this lesson we will explore this RxJS operator and its properties.

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

function performRequest() {
  return fetch('https://jsonplaceholder.typicode.com/users/1')
    .then(res => res.json());
}

const emailObservable = clickObservable
  .concatMap(click => performRequest(),
             (click, res) => res.email);

// concatMap = map ... + ... concatAll
// mergeMap
// switchMap

emailObservable
  .subscribe(email => console.log(email));

concatMap happens one after the other, the same as mergeAll(1):

const emailObservable = clickObservable
  .mergeMap(click => performRequest(),
             (click, res) => res.email,
           );

So the main different between switchMap, mergeMap, concatMap are about concurrency...

• switchMap: has cancel previous request functionaility.
• mergeMap: allows num of concurrency requests
• concatMap: the same as mergeAll(1), only allow one request at a time