[RxJS] Updating Data with Scan

You often need to update the data flowing through the stream with custom logic based on what you need to output. This lesson covers how to use scan for collecting and updating the outputs as your stream progresses.

EVerytime we click start button now it will start from 0:

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 intervalThatStop$ = interval$.takeUntil(stop$);


start$.switchMapTo(intervalThatStop$)
  .subscribe( (x) => {
  console.log(x);
})

 

What we want is it should remeber the current state, so that, next time when we start again, it can use our current state:

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$);

start$
    .switchMapTo(intervalThatStops$)
    .scan( (acc) => {
        return Object.assign(acc, {count: acc.count + 1})
    }, {
       count: 0
    })
    .subscribe((x)=> console.log(x));