Counter
Last updated
Last updated
callbag
most
RxJS
xstream
This basic example involves a counter which the user can toggle between incrementing, decrementing, and paused states. The parent component has a simple state: { counter: 0, direction: 'NONE' }. The buttons in the UI alter the direction state.
Two sources are observed:
The setDirection callback function.
An interval which dispatches a new number every second.
Every time setDirection is called, the value it was called with is dispatched.
These two sources are then merged; the resulting stream contains a new effect every second, which contains the current direction as its type.
Simply increments or decrements the state whenever an effect is dispatched with the correct effect type.
The end result is a counter which infinitely counts upwards after the user clicks increase, infinitely counts downwards after the user clicks decrease, or stays static after the user clicks pause.