Redux-devtools: Actions re-dispatched on route change

[hugocaillard]

I'm encountering a strange behaviour with the devtools, when some actions are dispatched and then the route changes (either by clicking a or calling the history API), all the actions previously dispatched are called again. They don't appear in the actions history of the devtools, but the action handlers are called. The only solution I found so far is to uninstall the redux-devtools...
It might (or might not?) be a duplicate of #167.
I could work on an example reproducing this behaviour if it's unclear.

[zalmoxisus]

It doesn't seem related to that issue. Most likely you're using store.replaceReducer. If not, please provide the code, so I could look into it.

[hugocaillard]

Indeed I'm using /davezuko/react-redux-starter-kit which uses the following code:

export const injectReducer = (store, { key, reducer }) => {
  store.asyncReducers[key] = reducer
  store.replaceReducer(makeRootReducer(store.asyncReducers))
}

Then in onEnter or getComponent I simply call injectReducer(store, { key: 'Key', reducer }).

I'll take time later to reproduce it on a simple project and provide the relevant code

[zalmoxisus]

replaceReducer is not intended for such cases, you want to use it only when your reducers' functions are changed.

cc @gaearon @davezuko

[davezuko]

Thanks for the ping, I haven't visited that code in a while. Will take a look and make the appropriate changes.

[hugocaillard]

By the way I didn't succeed to reproduce it on the counter example, but my project is a bit more complicated with several subroutes and actions passed to re-usable component. I'll come back here or on the gitter when I have isolated the issue (it might comes from me as well).

[DenJohX]

I'm having the same issue with the react-redux-starter-kit, a visible way to recreate it is to use react-redux-toastr in the project, then all the toasted messages you made whitout doing a commit in redux-devtools gets re-dispatched on Route changes as well on hot module replacements.

My project does a lot of redux actions so I'm kinda used to constantly commit on devtools, I guess it's not that annoying for me.

[davezuko]

Just for clarity, for problems specific to the starter kit, I suggest opening issues there, since (unless found to be otherwise) they are likely a problem with that project and _not_ of the devtools themselves. I really don't want to burden the devtool maintainers with issues likely out of their control. That said, I've still got this on my radar and will try to look at this soon.

[mjadczak]

I've run into this as well, it was actually causing an infinite loop when combined with code-splitting which made me have to disable devtools which obviously makes developing harder. From what I could tell from the stack trace, going to a route which was defined with a code-split point in its getComponent function, which in react-redux-starter-kit looks like this:

getComponent (nextState, cb) {
    /*  Webpack - use 'require.ensure' to create a split point
     and embed an async module loader (jsonp) when bundling   */
    require.ensure([], (require) => {
      /*  Webpack - use require callback to define
       dependencies for bundling   */
      const Signup = require('./containers/SignupContainer').default
      const reducer = require('./modules/Signup').default

      /*  Add the reducer to the store on key 'counter'  */
      injectReducer(store, { key: 'Signup', reducer })

      /*  Return getComponent   */
      cb(null, Signup)

      /* Webpack named bundle   */
    }, 'Signup')
  }

the injectReducer triggers replaceReducer, which re-triggers all actions while devtools is enabled, which triggers the route-change action in react-redux-router, which triggers this getComponent function again... you see where the loop is. I'm not quite sure in which of react-redux-starter-kit, react-router-redux or redux-devtools this issue should actually be fixed however as I have not had time to really drill in and figure this out.

[zalmoxisus]

Now you can specify shouldHotReload: false for the instrumentation or for Redux DevTools Extension:

  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);

It will prevent recomputing reducers for replaceReducer.
See the release notes for more details. Feel free to reopen the issue if it doesn't help.