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.
npm install --save erux
You can also use a browser friendly compiled file from NPM CDN (mostly for online demo / snippets).
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 2
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