eRux
This library enhances Redux either directly by adding the store.on function during Redux store creation or indirectly by calling Erux.on anywhere you have a reducer and using the reducer provided by Erux.reducer when creating your store. The two on functions allow for adding reducers in a fashion inspired by event-driven programming and also reducing the boilerplate by removing the ubiquitous if or switch statements from your reducer code to check if it should handle the given action type. A side benefit of all this is that adding a new reducer only needs to touch the new reducer code instead of also having to modify the reducer that your store is using.
Install
npm install --save eruxYou can also use a browser friendly compiled file from NPM CDN (mostly for online demo / snippets).
Usage
Reducer
If you are starting from scratch and don't have any legacy Redux code to integrate, the usage can be as simple as using our reducer when creating your store:
// Define your reducer and attach it to an action type
// Can be in any source file
Erux.on(INC, state => state + 1);
// Create your store with initial state of 1
const store = createStore(Erux.reducer, 1);
// Dispatch action to the store
store.dispatch({ type: INC });
// store.getState() is now 2Enhancer
Or if you have some legacy code, you can attach the enhancer to the store instead:
// Legacy reducer
const doubleReducer = (state, action) => {
switch (action.type) {
case DOUBLE:
return state * 2
default:
return state
}
}
// Create your store with legacy reducer and our enhancer
// The returned store will have the on function
const enhancers = compose(applyMiddleware(logger), Erux.enhancer);
const store = createStore(doubleReducer, 1, enhancers);
// Add your reducers, feel free to put these anywhere it makes sense
// They are not coupled to the store creation at all
store.on(INC, state => state + 1);
store.on(DEC, state => state - 1);
// Dispatch some actions from elsewhere, UI perhaps?
store.dispatch({ type: INC }); // 2
store.dispatch({ type: DOUBLE }); // 4
store.dispatch({ type: DEC }); // 3
