[RxJS] Basic DOM Rendering with Subscribe

Posted 2020-06-22 Answer1215

While frameworks like Angular 2 and CycleJS provides great ways to update the DOM and handle subscriptions for you, this lesson shows how you can still do basic subscribe blocks and manually update the DOM on your own.

 

const Observable = Rx.Observable;

const startButton = document.querySelector(‘#start‘);
const halfButton = document.querySelector(‘#half‘);
const quarterButton = document.querySelector(‘#quarter‘);

const stopButton = document.querySelector(‘#stop‘);
const resetButton = document.querySelector(‘#reset‘);

const input = document.querySelector(‘#input‘);

const start$ = Observable.fromEvent(startButton, ‘click‘);
const half$ = Observable.fromEvent(halfButton, ‘click‘);
const quarter$ = Observable.fromEvent(quarterButton, ‘click‘);

const stop$ = Observable.fromEvent(stopButton, ‘click‘);
const reset$ = Observable.fromEvent(resetButton, ‘click‘);

const input$ = Observable.fromEvent(input, ‘input‘)
    .map(event => event.target.value);


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

const starters$ = Observable.merge(
    start$.mapTo(1000),
    half$.mapTo(500),
    quarter$.mapTo(250)
);

const intervalActions = (time)=> Observable.merge(
    Observable.interval(time)
        .takeUntil(stop$).mapTo(inc),
    reset$.mapTo(reset)
);

const timer$ = starters$
    .switchMap(intervalActions)
    .startWith(data)
    .scan((acc, curr)=> curr(acc))


timer$
    .do((x)=> console.log(x))
    .takeWhile((data)=> data.count <= 3)

    .withLatestFrom(
        input$.do((x)=> console.log(x)),
        (timer, input)=> ({count: timer.count, text: input})
    )
    .filter((data)=> data.count === parseInt(data.text))
    .reduce((acc, curr)=> acc + 1, 0)
    .repeat()
    .subscribe(
        (x)=> document.querySelector(‘#score‘).innerhtml = `
            ${x}
        `,
        err=> console.log(err),
        ()=> console.log(‘complete‘)
    );