[RxJS] Displaying Initial Data with StartWith

You often need to render out data before you stream begins from a click or another user interaction. This lessons shows how to use startWith to set the initial output before you trigger your stream.

 

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 data = {count: 0};

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

 

What startWith will do is, before you click the start button, it will set the initial value for scan(), and logout 0 on the screen. 

Then when you click the start button, it will increase from 1 to .....

 

So it means startWith actually will fire subscrie once.

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