Ecco come l'ho implementato in un'app corrente (basata sul codice di Dan da un problema di GitHub!)
// Based on https://github.com/rackt/redux/issues/37#issue-85098222
class ReducerRegistry {
constructor(initialReducers = {}) {
this._reducers = {...initialReducers}
this._emitChange = null
}
register(newReducers) {
this._reducers = {...this._reducers, ...newReducers}
if (this._emitChange != null) {
this._emitChange(this.getReducers())
}
}
getReducers() {
return {...this._reducers}
}
setChangeListener(listener) {
if (this._emitChange != null) {
throw new Error('Can only set the listener for a ReducerRegistry once.')
}
this._emitChange = listener
}
}
Crea un'istanza di registro quando fai il bootstrap della tua app, passando in riduttori che saranno inclusi nel bundle di voci:
// coreReducers is a {name: function} Object
var coreReducers = require('./reducers/core')
var reducerRegistry = new ReducerRegistry(coreReducers)
Quindi, durante la configurazione dell'archivio e dei percorsi, utilizzare una funzione che è possibile assegnare al registro del riduttore a:
var routes = createRoutes(reducerRegistry)
var store = createStore(reducerRegistry)
Dove queste funzioni assomigliano a:
function createRoutes(reducerRegistry) {
return <Route path="/" component={App}>
<Route path="core" component={Core}/>
<Route path="async" getComponent={(location, cb) => {
require.ensure([], require => {
reducerRegistry.register({async: require('./reducers/async')})
cb(null, require('./screens/Async'))
})
}}/>
</Route>
}
function createStore(reducerRegistry) {
var rootReducer = createReducer(reducerRegistry.getReducers())
var store = createStore(rootReducer)
reducerRegistry.setChangeListener((reducers) => {
store.replaceReducer(createReducer(reducers))
})
return store
}
Ecco un esempio live di base che è stato creato con questa configurazione e la sua fonte:
Copre anche la configurazione necessaria per consentire la ricarica a caldo di tutti i riduttori.