Redux.replaceReducer throw warning "Unexpected key found"

[andreechristian]

This issue was moved from reduxjs/react-redux#360

Hello,
I tried to do a code splitting on route change.

When the route changes to '/register', i dynamically add "registration" as one of the root state using replaceReducer and it work just fine.
Once the registration completed i want to remove the reducer using replaceReducer again, but instead it return the following warning :

Unexpected key "registration" found in initialState argument passed to createStore. Expected to find one of the known reducer keys instead: ... Unexpected keys will be ignored.

Thanks in advance

[andreechristian]

Basically, i cannot remove a 'sub state' once it is added to the store :(

[gaearon]

Technically this is a warning rather than an error so you can. But it is annoying. I think we should fix this.

[cpeddecord]

I'm running into this warning after adding serialized state from a server handoff whilst routing into a route with a dynamically added reducer. Only happens on initial load as my routes initialize on the client after the store. Wondering if there's a good workaround here...

[andreechristian]

I think after changing current reducer into next reducer, we should trim unnecessary state from current state based on next reducer keys. Or if the store doesn't have multiple reducers, do something like recreating store state based on next reducers default action => and then assign current state data that matches next state data. And only after that we should dispatch the INIT.

[andreechristian]

Also @gaearon, although this is a warning, it seemed to me that the state doesn't necessarily changed. I still got 'registration' as one of my root state. Or is it expected? But if it is expected, then my 'registration' state will gonna be a dead meat right there, right? The reducer's gone but the state remains.

[gaearon]

I would suggest removing that warning in the source and checking which tests fail. They likely show reasonable ideas or why this warning was added. Then we can consider how to make it works well for all use cases.

[flucivja]

Hi,

I came across same issue when I am trying to build modular application. The basic idea is that once module is loaded it will inject its own reducers and once module is unloaded it should remove its own reducers.
I've accomplished it with usage with react-router and using onEnter and onLeave hooks. Basically onEnter hook inject module's reducers with replaceReducer and dispatch actions 'a1', 'a2', 'a3' on the injected reducers. Then once user navigates outside of the module, module`s reducers are removed in onLeave hook also with usage of replaceReducer.
The issue is that and I got above warning too but the bigger issue is that also all 'a1', 'a2', 'a3' actions are dispatched again and I am not sure why because I don't dispatch these actions in onLeave hook. Do you have some idea why this happens?

@edit
strikeout issue which was my bad :)

Thanks.

[BryceHayden]

I've been messing around with updating, and in some cases replacing the reducers based on dynamic routes. I posted a comment in response to @gaearon answer on stack overflow. I followed his answer for getting the reducers injected into the store, but I ran into a problem when I wanted to inject more reducers dealing with the same branch on the state tree on a different route. I couldn't figure out a way to combine the reducers that were already present and the new reducers. I don't want to combine these sooner as it allows me to code split the reducers down to what each page actually needs.

[gaearon]

@QuietOmen Please post your question on SO, doesn’t look like this thread would be very helpful 😉

[BryceHayden]

Thanks, I posted it here in case anyone stumbles upon this thread and becomes curious.

[objectivePinta]

Ran in this issue, when writing a test for the store

[SijieCai]

CombineReducer only show this warning on non-production environment, so a workaround could be:

  // on route leaving
  if (process.env.NODE_ENV === 'production') {
     // remove reducer here
  }