redux-injector
Allows dynamically injecting reducers into a redux store at runtime.
Typically when creating a redux data store all reducers are combined and then passed to the createStore
function. However, this doesn't allow adding additional reducers later which can be lazy loaded or added by plugin modules. This module changes the creation of the redux store to pass in an object of reducer functions (recursively!) that are then dynamically combined. Adding a new reducer is then done with injectReducer
at any time.
Installation
Install redux-injector
via npm.
npm install --save redux-injector
Then with a module bundler like webpack that supports either CommonJS or ES2015 modules, use as you would anything else:
// using an ES6 transpiler, like babel
import { createInjectStore } from 'redux-injector';
// not using an ES6 transpiler
var createInjectStore = require('redux-injector').createInjectStore;
Create Inject Store
There are two parts to using redux injector.
1. DO NOT COMBINE reducers!
Typically reducers are combined using ```combineReducers`` up a tree to a single reducer function that is then passed to the createStore function. DO NOT DO THIS! Instead, create the exact same object tree but without combine reducers. For example:
let reducersObject = {
router: routerReducerFunction,
data: {
user: userReducerFunction,
auth: {
loggedIn: loggedInReducerFunction,
loggedOut: loggedOutReducerFunction
},
info: infoReducerFunction
}
};
If you do have combined reducers it is still possible to pass them to createInjectReducers but you cannot then inject into any previously combined reducers.
createInjectStore
instead of createStore
2. Use Pass the uncombined reducer tree to createInjectStore
along with any other arguments you would usually pass to createStore
. This wraps and passes the arguments and results to createStore
.
import { createInjectStore } from 'redux-injector';
let store = createInjectStore(
reducersObject,
initialState
);
Injecting a new reducer.
For any store created using redux-injector, simply use injectReducer
to add a new reducer.
import { injectReducer } from 'redux-injector';
injectReducer('date.form', formReducerFunction);
The injector uses lodash.set so any paths that are supported by it can be used and any missing objects will be created.
Immutable.js
Redux Injector by default uses combineReducers
from redux. However, if you are using immutable.js for your states, you need to use combineReducers
from redux-immutable
. To do this, pass in an override at the end of the arguments with the combineReducers
function.
import { createInjectStore } from 'redux-injector';
import { combineReducers } from 'redux-immutable';
let store = createInjectStore(
reducersObject,
initialState,
{ combineReducers }
);