RxJS Redux-like Counter This example uses RxJS to build a simple Redux-like store using a BehaviorSubject and the scan operator. Notice how inc$ and dec$ both broadcast their actions to the action$ BehaviorSubject. This makes it easy to aggragate actions from multiple sources into a single stream of actions.
viewof Counter = { const { BehaviorSubject } = Rx; const { fromEvent } = Rx.Observable; const { map, scan } = Rx.operators; // HTML. const view = html` <button id="dec">-</button> <span id="count">0</span> <button id="inc">+</button> `; // Elements. const decButton = view.querySelector('#dec'); const count = view.querySelector('#count'); const incButton = view.querySelector('#inc'); // Create an initial BehaviorSubject that our reducer$ subscribes to for it's action$. // Upon subscription BehaviorSubject sends 'INIT'. const action$ = new BehaviorSubject('INIT'); // Map increment button clicks to BehaviorSubject action$. const inc$ = fromEvent(incButton, 'click') .pipe( map(() => 'INC') ) .subscribe(action$); // Map decrement button clicks to BehaviorSubject action$. const dec$ = fromEvent(decButton, 'click') .pipe( map(() => 'DEC') ) .subscribe(action$); // Use scan() to reduce and emit new state we get from the BehaviorSubject action$. const reducer$ = action$.pipe( scan((state, actionType) => { switch (actionType) { case 'INC': return state + 1; case 'DEC': return state - 1; case 'INIT': return 0; default: return state; } }, 0), ); // Subscribe to BehaviorSubject action$ after they are scanned and update the count. reducer$.subscribe( state => count.innerText = state ); return view; }
Rx = require("https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.6.0-forward-compat.5/Rx.min.js")