JSFiddle - React, Tailwind, and code Playground

by Tolik Code

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.4.1/Rx.min.js"></script>
Open the console

JavaScript

// Just outputs the number of seconds since the start to visualize the time flow
// Not relevant to the example
Rx.Observable.interval(1000).take(12).subscribe(s => console.log(`⏰ ${s} sec`));

// Turns values from outer Observable into inner Observables
function getInnerObservable(outerParam) {
  return Rx.Observable.interval(1000).take(3)
    .map(n => `Inner item ${n} for ${outerParam}`);
}

const outerObservable = Rx.Observable.interval(1000).take(3)
  .map(n => 'Outer item ' + n);

// Uncomment for MergeMap
outerObservable.mergeMap(outerParam => getInnerObservable(outerParam))
  .subscribe(x => console.log(x));

// Uncomment for ConcatMap
// outerObservable.concatMap(outerParam => getInnerObservable(outerParam))
//   .subscribe(x => console.log(x));

// Uncomment for SwitchMap
// outerObservable.switchMap(outerParam => getInnerObservable(outerParam))
//   .subscribe(x => console.log(x));

// Naive solution with two subscriptions. Works similarly to MergeMap. Not recommended
// outerObservable.subscribe(outerParam => getInnerObservable(outerParam)
//   .subscribe(x => console.log(x)));