https://github.com/aaronshaf/react-callbag-subject

Asynchronous pipelines in React using callbags
https://github.com/aaronshaf/react-callbag-subject

callbags

Last synced: 20 days ago
JSON representation

Asynchronous pipelines in React using callbags

• Host: GitHub
• URL: https://github.com/aaronshaf/react-callbag-subject
• Owner: aaronshaf
• Created: 2018-03-03T22:04:39.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-03-06T04:30:47.000Z (over 6 years ago)
• Last Synced: 2024-05-02T00:09:29.144Z (7 months ago)
• Topics: callbags
• Language: JavaScript
• Homepage: https://aaronshaf.github.io/react-callbag-subject/
• Size: 1.13 MB
• Stars: 9
• Watchers: 4
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-callbags - react-callbag-subject

README

        
Asynchronous reducer pipelines using [callbags](https://github.com/staltz/callbag-basics).

Try it now on [CodeSandbox](https://codesandbox.io/s/mozmv6vrmp).

## Install

```

npm install react-callbag-subject --save

```

## Pipeline operator

If you don't have the [pipeline operator](https://github.com/tc39/proposal-pipeline-operator) you can use the [pipe function](https://github.com/staltz/callbag-pipe). `foo |> bar()` would instead be `pipe(foo, bar())`.

## Basic usage

```javascript

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 });

```

```jsx

  {(state, send) => (

    


       send("SUBTRACT", 1)}>Remove 1

       send("ADD", 1)}>Add 1

       send("MULTIPLY", 2)}>Multiply by 2

      
{state.count}

    

  )}


```

## Debouncing example

```javascript

import { debounce } from "callbag-debounce";

const pipeline = actions =>

  actions

  |> debounce(250)

  |> reducerFromMap(reducers)

  |> startWith({ counter: 1 });

```

## Further reading

* [Callbag basics](https://github.com/staltz/callbag-basics)

* [Callbag wiki](https://github.com/callbag/callbag/wiki)

* [Why we need callbags](https://staltz.com/why-we-need-callbags.html), by André Staltz