https://github.com/jamesb3ll/reduxbag

👜Callbag RxJS-like middleware for asynchronous side effects in Redux
https://github.com/jamesb3ll/reduxbag

callbag middleware redux

Last synced: about 2 months ago
JSON representation

👜Callbag RxJS-like middleware for asynchronous side effects in Redux

• Host: GitHub
• URL: https://github.com/jamesb3ll/reduxbag
• Owner: jamesb3ll
• Created: 2018-04-18T13:49:22.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2020-03-07T01:55:33.000Z (over 4 years ago)
• Last Synced: 2024-05-17T14:22:32.754Z (4 months ago)
• Topics: callbag, middleware, redux
• Language: JavaScript
• Homepage:
• Size: 3.91 KB
• Stars: 47
• Watchers: 4
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# reduxbag

[Callbag](https://github.com/callbag/callbag)-based middleware for [Redux](https://github.com/reactjs/redux).

- Tiny (<350b)

- Zero dependencies

- Similar API to redux-observable

- “Unlimited” operators ([callbag ecosystem](https://github.com/callbag/callbag/wiki))

## Install

```sh

yarn add reduxbag

# -- or --

npm install --save reduxbag

```

## Usage

```js

import map from 'callbag-map';

import pipe from 'callbag-pipe';

import mapPromise from 'callbag-map-promise';

import { createStore, applyMiddleware } from 'redux';

import createReduxbagMiddleware, { ofType } from 'reduxbag';

const todos = (state = [], action) => {

  switch (action.type) {

    case 'ADD_TODO':

      return state.concat(action.text);

    default:

      return state;

  }

}

const ajaxEpic = (action$, store) => pipe(

  action$,

  ofType('FETCH_TODO'),

  mapPromise(action =>

    fetch(`//jsonplaceholder.typicode.com/posts/${(1+Math.random()*50)>>0}`)

    .then(res => res.json())

  ),

  map(data => ({

    type: 'ADD_TODO',

    text: data.title,

  })),

);

const store = createStore(

  todos,

  applyMiddleware(createReduxbagMiddleware(ajaxEpic)),

);

const logState = () => console.log(store.getState());

store.subscribe(logState);

logState();

store.dispatch({ type: 'ADD_TODO', text: 'Try out callbags' });

store.dispatch({ type: 'FETCH_TODO' });

```