redux-reducers

Unobtrusive reusable redux reducers


License
ISC
Install
npm install redux-reducers@0.3.0

Documentation

redux-reducers CircleCI

Unobtrusive reusable redux reducers

WARNING

Experimental - do not use in production.

Usage

Given the following action creator and reducer:

function add(payload) {
  return {
    type: 'ADD',
    payload
  };
}

add(1) // { type: 'ADD', payload: 1 }

function addReducer(state = 0, action) {
  switch (action.type) {
    case 'ADD':
      return state + action.payload;
    default:
      return state;
  }
}

wrapActionCreator(idCreator, actionCreator)

import { wrapActionCreator } from 'redux-reducers';

const wrappedAdd = wrapActionCreator('target ID', add);

wrappedAdd(1) // creates an action that will only be targeted by wrapped reducers

wrapReducer(idCreator, reducer)

import { createStore, combineReducers } from 'redux';
import { wrapReducer, wrapActionCreator } from 'redux-reducers';

const reducer = combineReducers({
  one: wrapReducer('target ID', addReducer),
  two: wrapReducer('two', addReducer),
});

const store = createStore(reducer);

const wrappedAdd = wrapActionCreator('target ID', add);

store.dispatch(wrappedAdd(1));

store.getState(); // { one: 1, two: 0 }

wrapDispatch(dispatch, idCreator)

import { createStore } from 'redux';
import { wrapDispatch } from 'redux-reducers';

const store = createStore(reducer);

const dispatchToMyTarget = wrapDispatch(store.dispatch, 'my target');

dispatchToMyTarget(action); // action that will be picked up by reducers that target that id

idCreator

idCreator can be a string, number or a function, where the function is of the form:

idCreator(action) {
  return action.meta.id;
}

composeReducers(reducers)

Compose reducers from right to left.

const action = {
  type: ACTION_TYPE,
  payload: 1,
};

function reducerOne(state = 0, action) {
  switch (action.type) {
    case ACTION_TYPE:
      return state + action.payload;
    default:
      return state;
  }
}

function reducerTwo(state = 0, action) {
  switch (action.type) {
    case ACTION_TYPE:
      return state + action.payload;
    default:
      return state;
  }
}

const composedReducer = composeReducers(reducerThree, reducerTwo);

composedReducer(0, action); // 2