reduxbag's Introduction

reduxbag

Callbag-based middleware for Redux.

Tiny (<350b)
Zero dependencies
Similar API to redux-observable
“Unlimited” operators (callbag ecosystem)

Install

yarn add reduxbag
# -- or --
npm install --save reduxbag

Usage

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

Recommend Projects