Reducer is called with previously performed actions when asynchronously loading another reducer

Seeing a weird bug only when I use the extension (2.5.1.9). Not using it with Vanilla DevTools. Have followed instructions in the README to set it up.

The bug is: my reducer is called with previous actions when asynchronously loading another reducer.

Say I perform actions say ACTION_X and ACTION_Y in a page. I leave the page and go to another where the new page’s reducer is injected. When this happens the previous page’s reducer is called with all the actions I performed in that page (ACTION_X & ACTION_Y).

I can confirm the actions are not dispatched from my code after I leave the page and also they do not show up in the extension. I think it’s caused because of the reducer injection. Because if I navigate to a page which does not have a reducer this won’t happen.

What’s weird about this is it happens only for two of the 5 actions I have in the page. Have not observed it in other pages.

Any help to debug this further is much appreciated.

My app uses React Router with Webpack code splitting and I’m asynchronously injecting reducers on a route load like this:

{
     path: "somePath",
     getComponent(location, cb) {
         require.ensure([],
             require => {
                 injectReducer('reducerName', require('./pages/SomePage/SomePage.reducer').default);
                     cb(null, CreateModel);
                  }
              )
            }
       }
}

where injectReducer is:

function injectAsyncReducer(store) {
    return (name, asyncReducer) => {
        store.asyncReducers[name] = asyncReducer; 
        store.replaceReducer(createReducer(store.asyncReducers));
    };
}

injectReducer = injectAsyncReducer(store);

and my createReducer looks like this

export default function createReducer(asyncReducers) {
    const appReducer = combineReducers({
        ...asyncReducers
    });

    return (state, action) => {
        return appReducer(state, action)
    };
};

[zalmoxisus]

I have just published v2.7.0 where you can fix that behaviour by specifying shouldHotReload parameter to false like:

  const composeEnhancers =
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?   
      window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
        shouldHotReload: false
      }) : compose;

  const enhancer = composeEnhancers(
    applyMiddleware(...middleware),
    // other store enhancers if any
  );
  const store = createStore(reducer, enhancer);

See the release notes for more details. Feel free to reopen the issue if it doesn’t help.

[skosno]

Is there any way to go around this issue? Disabling devtools is an option but would prefer to have them.