I'm working on a Redux project with dynamic routes and async reducers. I simply inject reducers with Dan's method in this question. It becomes quite tricky when I'm trying to write the module.hot.accept
function for my project. This is what my configureStore
function is like
function configureStore(initialState = {}) {
let store = createStore(createReducer(), initialState, compose(
applyMiddleware(
thunk
)
))
store.asyncReducers = {}
if (process.env.NODE_ENV == 'development') {
if (module.hot) {
module.hot.accept('./routes/root', () =>
store.replaceReducer(createReducer(store.asyncReducers))
)
}
}
return store
}
After I change some code inside of one of the child routes' reducer, I got a warning says the modules which have changed (and their parents) do not know how to hot reload themselves.
I think the problem is that injectAsyncRecuder
has not been called since I change the code of the reducer.
How can I make HMR work for async reducers?
=====
Update:
After some research, please let me rephrase my question. Let's say there are 3 levels of routes, A, B and C. A requires B, B requires C. B requires reducer1. C requires reducer2 and reducer3.
.
├── Route A
│ ├── Route B
│ | ├── Reducer 1
│ | ├── Route C
│ | | ├── Reducer 2
│ | | ├── Reducer 3
When Reducer 3 becomes outdated, Route C and Route B will also become outdated. Let's suppose I put hot.module.accept
in a file which requires Routes A as hot.module.accept('./routesA', cb)
. I'm wondering how can I check the outdated module stack to find the outdated reducer. In that case, I can put update
methods in all of the reducers so that they can know hot to inject themselves when becoming outdated.