Isomorphic Redux with Code Splitting and Lazily Loaded Reducers

Question

I am creating an isomorphic code-breaking application using a responsive router and reduct. I have been as far as I can, but I need help to figure out the rest of my problem. I have a large application that requires code separation for an interface. I have a gearbox registry that allows me to register new gearboxes (lazy loaded) or replace existing gearboxes in my store. This works fine, however, since sections of my application are lazy loaded, my lazy loaded reducers are missing when I call combReducers () on the client side, while they are perfectly resolved on the server. This causes an unexpected key error and causes my store to ignore the abusive key (s) in my initial state.

initialState (from server)

{ "cases": {...}, "user": {...} } 

Client side redux expected initialState

It is based on affordable gearboxes.

 { "user": {...} } 

Loaded gear

• UserReducer

Lazy loaded reducer

• Casereducer

An error occurs when I call the following

 const finalCreateStore = compose( applyMiddleware(promiseMiddleware) )(createStore); const rootReducer = combineReducers({...reducers}) const store = finalCreateStore(rootReducer, initialState); 

An unexpected key “case” found in the initialState argument passed to createStore. Instead, you are expected to find one of the well-known gear keys: "user". Unexpected keys will be ignored.

Everything works well on the server, but initializing the application on the client, although there is no short-term reduction before downloading it, causes this error. Does anyone know how to get around this error, or say redux does not check the form of the initial state? I need “cases” for my lazy loaded gearbox.

Answer 1

It looks like you should stop using the built-in combineReducers , since you know that the warning does not apply to your use. From the Redux manual:

These two ways of writing a combined gearbox are completely equivalent:

 const reducer = combineReducers({ a: doSomethingWithA, b: processB, c: c }) function reducer(state, action) { return { a: doSomethingWithA(state.a, action), b: processB(state.b, action), c: c(state.c, action) } } 

So you can go with the second option.