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