viewof Counter = {
const { BehaviorSubject } = Rx;
const { fromEvent } = Rx.Observable;
const { map, scan } = Rx.operators;
const view = html`
<button id="dec">-</button>
<span id="count">0</span>
<button id="inc">+</button>
`;
const decButton = view.querySelector('#dec');
const count = view.querySelector('#count');
const incButton = view.querySelector('#inc');
const action$ = new BehaviorSubject('INIT');
const inc$ = fromEvent(incButton, 'click')
.pipe(
map(() => 'INC')
)
.subscribe(action$);
const dec$ = fromEvent(decButton, 'click')
.pipe(
map(() => 'DEC')
)
.subscribe(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),
);
reducer$.subscribe(
state => count.innerText = state
);
return view;
}