❤
npm
Sign UpSign In

react-callbag

3.0.0 • Public • Published

Asynchronous reducer pipelines using callbags.

Try it now on CodeSandbox.

Install

npm install react-callbag --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";
 
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

Readme

Keywords

Package Sidebar

Install

npm i react-callbag

Repository

github.com/aaronshaf/react-callbag

Homepage

github.com/aaronshaf/react-callbag

Weekly Downloads

1

Version

3.0.0

License

MIT

Unpacked Size

8.83 kB

Total Files

3

Last publish

Collaborators

  • aaronshaf
Try on RunKit
Report malware