irr v1.0.0
incremental-redux-reducers
Incrementally load Redux reducers into a single store
Purpose
Redux is an awesome library and has enabled a lot for web developers. However the trend has been towards including every reducer into a single store. While this works for small applications where there are only a few reducers, it can be problematic for large apps where reducers can really bloat the initial payload.
That is where incremental-redux-reducers comes in. It enables a Redux application to incrementally add reducers into a single store.
If you use a technology like Webpack and have employed code-split points, this can reduce the initial payload quite dramatically for a large app.
And even if you don't need to reduce your initial payload,
this library enables placement of your reducers throughout your application so that you aren't restricted
to loading all the reducers in a single reducers
folder.
How it works
When you use addReducer
, it will take the name that you provided for Redux's state tree.
It will then replace the Redux reducer (but not the state!) with the set of added reducers.
You can then use mapReducersToProps
with an object map of the props for your component and each reducer.
This will extract the relevant parts of Redux's state tree for you.
It also tells your bundler (i.e. Webpack, Browserify, etc.) which files require your reducers so that they can be bundled appropriately.
How to use
This is used on the torontojs.com's Repo which you can use as an example.
Install it and its dependencies:
npm install --save incremental-redux-reducers redux
Setup your single Redux store for incremental-redux-reducers:
var setupIncrementalReduxReducers = require("incremental-redux-reducers").setupIncrementalReduxReducers; // your own code to get a Redux store setupIncrementalReduxReducers(yourReduxStore);
Define your reducers with
addReducer(name, reducerFunction)
:// yourAwesomeReducer.js var addReducer = require("incremental-redux-reducers").addReducer; module.exports = addReducer("yourAwesomeReducer", function(state, action) { // your Redux reducer code here });
Require and extract relevant bits from Redux's state tree for your application:
var mapReducersToProps = require("incremental-redux-reducers").mapReducersToProps; var yourAwesomeReducer = require("./yourAwesomeReducer"); var yourStateMapping = mapReducersToProps({ yourAwesomeState: yourAwesomeReducer }); var yourReduxState = yourStateMapping(yourReduxStore.getState());
That's it! Give yourself a pat on the back :)
Fun facts
addReducers
will return the reducer function that you defined that's tagged with the name that you provided.
In practice, this means that the export from that module will be a function as you're used to in Redux.
Behind the scenes, incremental-redux-reducers
actually uses a Redux store to manage the final mapping of all the reducers you add.
Take a look at the code base. It's pretty small and you can see how it all works.
Disussion
Join the TorontoJS Slack chat in the #help channel.
Licence
MIT
8 years ago