[RxJS] Handling Multiple Streams with Merge

Posted 2020-06-20 Answer1215

You often need to handle multiple user interactions set to different streams. This lesson shows hows Observable.merge behaves like a "logical OR" to have your stream handle one interaction OR another.

 

After click the start buttion, we wnat the logic that, click stop, it remember the current state, then if click start, continue with the current state.

If click reset, then it restart from 0;

 

const Observable = Rx.Observable;

const startButton = document.querySelector("#start");
const stopButton = document.querySelector("#stop");
const resetButton = document.querySelector("#reset");

const data = {count: 0};
const inc = (acc) => ({count: acc.count + 1});
const reset = (acc) => data;

const start$ = Observable.fromEvent(startButton, ‘click‘);
const stop$ = Observable.fromEvent(stopButton, ‘click‘);
const reset$ = Observable.fromEvent(resetButton, ‘click‘); 
const interval$ = Observable.interval(500);
const intervalThatStop$ = interval$.takeUntil(stop$);

const incOrReset$ = Observable.merge(
  intervalThatStop$.mapTo(inc),
  reset$.mapTo(reset)
);

start$
  .switchMapTo(incOrReset$)
  .startWith(data)
  .scan( (acc, curr) => curr(acc))
  .subscribe( (x) => console.log(x))