Dynamically add reducers in Redux
store.addReducer(name, reducer)
In applications that use code spliting, the PRPL pattern or the like would benefit from having the ability to add reducers dynamically.
redux-async-reducer
adds a thin wrapper around createStore
from Redux. This wrapper provides the same functionality as createStore
but with additional helper methods such as addReducer
. See below for examples and the full API.
npm i -S redux-async-reducer
Replace createStore
from Redux with createStore
from redux-async-reducer
+ import { createStore } from 'redux-async-reducer';
- import { createStore } from 'redux';
That's it.
You can now use createStore
as you normally would*.
createStore
by redux-aysnc-reducer
expects a reducer object (the same object that you would pass to combineReducers
). It must be provided a reducer with a key and not just a reducer function.
Example 1. (Create store)
import { createStore } from 'redux-async-reducer';
const rootReducerObj = {
root: (state = {}, action) => state
}
const store = creatStore(rootReducerObj)
Example 2. (Add reducer)
import { createStore } from 'redux-async-reducer';
const rootReducerObj = {
root: (state = {}, action) => state
}
const store = creatStore(rootReducerObj)
store.addReducer('foo', (state = {}, action) => state)
Example 3. (Get reducers)
import { createStore } from 'redux-async-reducer';
const rootReducerObj = {
root: (state = {}, action) => state
}
const store = creatStore(rootReducerObj)
store.addReducer('foo', (state = {}, action) => state)
store.getReducers()
/*
{
root: (state = {}, action) => state
foo: (state = {}, action) => state
}
*/
// Same as redux createStore but epects reducer object
createStore(reducerObj, [preloadedState], [enhancer])
// Method. Expects 2 parameters. 1. String 2. Function(reducer)
addReducer(name, reducer)
// Method. no Parameters. Returns object of reducers
getReducers()
Traditionally in Redux apps all reducers are known when bootstrapping the application. This is fine in small sized apps but when applying code splitting, lazy-loading or something along those lines, Redux out of the box does not make it intuitive to add reducers dynamically. Dan Abramov has provided rough a solution on SO to address this.
While his solution works, it is not a full answer as he states. redux-async-reducer
applies a similar technique but in a more intuitive manner. The store itself provides a method addReducer
and keeps track of what reducers have been added. Using redux-async-reducer
is as simple calling:
store.addReducer(name, reducer)
- Add Typescript
- Add moar tests
MIT