Asynchronous reducer pipelines using callbags.

Try it now on CodeSandbox.

Install

npm install react-callbag-subject --save

Pipeline operator

If you don't have the pipeline operator you can use the pipe function. foo |> bar() would instead be pipe(foo, bar()).

Basic usage

import { Subject, reducerFromMap, startWith } from "react-callbag-subject";

const reducers = new Map([
  ["SUBTRACT", (state, amount) => ({ count: state.count - amount })],
  ["ADD", (state, amount) => ({ count: state.count + amount })],
  ["MULTIPLY", (state, multiplier) => ({ count: state.count * multiplier })]
]);

const pipeline = actions =>
  actions |> reducerFromMap(reducers) |> startWith({ count: 0 });

<Subject pipeline={pipeline}>
  {(state, send) => (
    <div>
      <button onClick={() => send("SUBTRACT", 1)}>Remove 1</button>
      <button onClick={() => send("ADD", 1)}>Add 1</button>
      <button onClick={() => send("MULTIPLY", 2)}>Multiply by 2</button>
      <div>{state.count}</div>
    </div>
  )}
</Subject>

Debouncing example

import { debounce } from "callbag-debounce";

const pipeline = actions =>
  actions
  |> debounce(250)
  |> reducerFromMap(reducers)
  |> startWith({ counter: 1 });

Further reading

• Callbag basics
• Callbag wiki
• Why we need callbags, by André Staltz