reducer-sandbox

reducer-sandbox helps you to reuse your redux reducers in different place without conflict them.

Getting started

Install reducer-sandbox using npm:

npm install reducer-sandbox --save

Then using ES6

import counterReducer from './reducers/counter';
import reducerSandbox from 'reducer-sandbox';
 
const sandbox = reducerSandbox(counterReducer, {
  key: 'metadata.sandboxid',
  id: 'stats-counter',
});

Using ES5

var counterReducer = require('./reducers/counter');
var reducerSandbox = require('reducer-sandbox');
 
var sandbox = reducerSandbox(counterReducer, {
  key: 'metadata.sandboxid',
  id: 'stats-counter',
});

Usage

Take this piece of code:

import redux from 'redux';
import counterReducer from './reducers/counter';
 
const reducers = redux.combineReducers({
  statsCounter: counterReducer,
  itemsCounter: counterReducer,
});
const store = reducer.createStore(reducers);

This will increment both counter from statsCounter and itemsCounter:

store.dispatch({type: 'INCREMENT'});
store.getState(); //=> {statsCounter: {counter: 1}, itemsCounter: {counter: 1}}

If you want to only increment statsCounter, then you can reducer-sandbox.

Let's do it:

import redux from 'redux';
import reducerSandbox from 'reducer-sandbox';
import counterReducer from './reducers/counter';
 
const statsCounter = reducerSandbox(counterReducer);
const itemsCounter = reducerSandbox(counterReducer);
 
const reducers = redux.combineReducers({
  statsCounter: statsCounter.reducer,
  itemsCounter: itemsCounter.reducer,
});
const store = reducer.createStore(reducers);
 
store.getState(); //=> {statsCounter: {counter: 0}, itemsCounter: {counter: 0}}

Now if you want to only increment statsCounter, you have 4 choices.

1. First is using bindToAction helper:

store.dispatch(statsCounter.bindToAction({type: 'INCREMENT'}));
store.getState(); //=> {statsCounter: {counter: 1}, itemsCounter: {counter: 0}}

1. Second is using dispatcher helper:

const dispatchStatsCounter = statsCounter.dispatcher(store);
 
dispatchStatsCounter({type: 'INCREMENT'});
store.getState(); //=> {statsCounter: {counter: 2}, itemsCounter: {counter: 0}}

1. Third is using bindToActionCreator helper:

const increment = () => {type: 'INCREMENT'};
const statsIncrement = statsCounter.bindToActionCreator(increment);
 
store.dispatch(statsIncrement());
store.getState(); //=> {statsCounter: {counter: 3}, itemsCounter: {counter: 0}}

1. Fourth is using bindToActionCreators helper:

const actions = {
  increment: () => {type: 'INCREMENT'},
  decrement: () => {type: 'DECREMENT'},
};
const statsActions = statsCounter.bindToActionCreators(actions);
 
store.dispatch(statsActions.increment());
store.getState(); //=> {statsCounter: {counter: 4}, itemsCounter: {counter: 0}}

Examples

• counter

Links

• renum is a small library to create enum using frozen objects in javascript from multiple sources.
• reducer-chain helps you to chain redux reducers with given state and action, then keep last updated state.
• reducer-pipe helps you to pipe redux reducers with given state and action, passing previously returned state to next reducer, then keep last updated state.