1.1.0 • Published 8 years ago
reducer-sandbox v1.1.0
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.
- First is using
bindToAction
helper:store.dispatch(statsCounter.bindToAction({type: 'INCREMENT'})); store.getState(); //=> {statsCounter: {counter: 1}, itemsCounter: {counter: 0}}
Second is using
dispatcher
helper:const dispatchStatsCounter = statsCounter.dispatcher(store); dispatchStatsCounter({type: 'INCREMENT'}); store.getState(); //=> {statsCounter: {counter: 2}, itemsCounter: {counter: 0}}
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}}
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
Links
renum
is a small library to create enum using frozen objects in javascript from multiple sources.reducer-chain
helps you to chainredux
reducers with given state and action, then keep last updated state.reducer-pipe
helps you to piperedux
reducers with given state and action, passing previously returned state to next reducer, then keep last updated state.