[Recompose] Merge RxJS Button Event Streams to Build a React Counter Component

Posted 2020-10-18 Answer1215

Combining input streams then using scan to track the results is a common scenario when coding with streams. This lesson walks you through setting up two buttons and merging their input events together to build a streaming Counter component.

 

const CounterStream = componentFromStream(
  props$ => {

    const { stream: onInc$, handler: onInc } = createEventHandler();
    const { stream: onDec$, handler: onDec } = createEventHandler();

    return props$
      .switchMap(
      propos => Observable.merge(
        onInc$.mapTo(1),
        onDec$.mapTo(-1)
      )
        .startWith(propos.value)
        .scan((acc, curr) => acc + curr)
        .map((value) => ({ value, onInc, onDec })))
      .map(
      Counter
      )
  }
);