[RxJS] Changing Behavior with MapTo

You often need streams to trigger different behaviors on the data based on which streams triggers. This lessons shows how to use mapTo to pass functions into the scan operator and have completed control over you data.

 

Current Code:

const Observable = Rx.Observable;

const startButton = document.querySelector('#start');
const stopButton = document.querySelector('#stop');

const start$ = Observable.fromEvent(startButton, 'click');
const interval$ = Observable.interval(1000);
const stop$ = Observable.fromEvent(stopButton, 'click');

const intervalThatStops$ = interval$
    .takeUntil(stop$);

const inc = (acc) => ({count: acc.count + 1}); // one line arrow function only ruturn object need ()

const data = {count: 0};

start$
    .switchMapTo(intervalThatStops$)
    .startWith(data)
    .scan( inc )
    .subscribe((x)=> console.log(x));

 

Everytime the number 1,2,3... will be passed to the scan function. 

 

If we want scan() method be fixable enought, we can use mapTo() method, which accecpts a function to increase the number. Then we need to modify the scan() function, now everytime it receive is the function return from mapTo, not a number anymore.

start$
    .switchMapTo(intervalThatStops$)
    .mapTo( inc )
    .startWith(data)
    .scan( (acc, curr) => {
      console.log(curr); //(acc) => ({count: acc.count + 1})return curr(acc)
     } )
    .subscribe((x)=> console.log(x));

 

Now we get full control over the scan() method, we can let it reset after 10:

const Observable = Rx.Observable;

const startButton = document.querySelector('#start');
const stopButton = document.querySelector('#stop');

const start$ = Observable.fromEvent(startButton, 'click');
const interval$ = Observable.interval(200);
const stop$ = Observable.fromEvent(stopButton, 'click');

const intervalThatStops$ = interval$
    .takeUntil(stop$);

const data = {count: 0};
const inc = (acc) => { return Object.assign({}, data, {count: count + 1})};  // avoid modifying data object
const resetAfterTen = (acc) => {
   if(acc.count == 10){
      return data;
   }else{
     return Object.assign({}, acc, {count: acc.count + 1})
   }
}



start$
    .switchMapTo(intervalThatStops$)
    .mapTo( resetAfterTen )
    .startWith(data)
    .scan( (acc, curr) => {
       return curr(acc)
     } )
    .subscribe((x)=> console.log(x));