title: React Hot Reload with Redux
body: <p>I've gotten everything working with HMR / React Hot Reloader as it pertains to views. But after adding redux, react-redux, etc ... anytime I modify a view or reducer I get the following error:</p>
  
  <p><code>&lt;Provider&gt; does not support changing `store` on the fly. It is most likely that you see this error because you updated to Redux 2.x and React Redux 2.x which no longer hot reload reducers automatically. See https://github.com/reactjs/react-redux/releases/tag/v2.0.0 for the migration instructions.</code></p>
  
  <p>Following the link in the error leads to a 2 year old post about explicitly using replaceReducer, so that's what I did.</p>
  
  <p>My versions:</p>
  
  <p>"redux": "^3.7.2"
  "react-redux": "^5.0.6"</p>
  
  <p>I have a feeling this is mostly due to my lack of understanding of where and how to place my module.hot.accept calls (and if you can have multiple?). Relevant code is below.</p>
  
  <p><strong>boot.js (entry point)</strong></p>
  
  <pre><code>import { Provider } from 'react-redux';
  import { AppContainer } from 'react-hot-loader';
  import { ConnectedRouter } from 'react-router-redux';
  
  import App from './App';
  
  import { configureStore, history } from './store/configureStore';
  
  let store = configureStore();
  
  function renderApp() {
      ReactDOM.render(
        &lt;AppContainer&gt;
          &lt;Provider store={store}&gt;
            &lt;ConnectedRouter history={history}&gt;
              &lt;App /&gt;
            &lt;/ConnectedRouter&gt;
          &lt;/Provider&gt;
        &lt;/AppContainer&gt;
        , document.getElementById("app"));
  }
  
  renderApp();
  
  if (module.hot) {
      module.hot.accept(() =&gt; {
          renderApp();
      })
  }
  </code></pre>
  
  <p><strong>configureStore.js</strong> </p>
  
  <pre><code>import createHistory from 'history/createBrowserHistory';
  import { createStore, combineReducers, compose, applyMiddleware } from 'redux';
  import { routerMiddleware, routerReducer } from 'react-router-redux';
  import thunk from 'redux-thunk';
  
  import DevTools from '../components/DevTools';
  
  import * as rootReducer from '../services/rootReducer';
  
  const composeEnhancers = compose;
  
  export const history = createHistory();
  
  const middleware = routerMiddleware(history);
  
  export function configureStore(initialState) {
    const reducers = { ...rootReducer, router: routerReducer };
  
    const store =  createStore(
      combineReducers(reducers),
      initialState,
      composeEnhancers(
        applyMiddleware(middleware, thunk),
        DevTools.instrument()
      )
    );
  
    if (module.hot) {
      module.hot.accept('../services/rootReducer', () =&gt; {
        const nextRootReducer = require('../services/rootReducer').default;
        const finalReducer = {...nextRootReducer, router: routerReducer };
        store.replaceReducer(finalReducer);
      })
    }
  
    return store;
  }
  </code></pre>
  
  <p>The module.hot.accept in my configureStore is never actually called, because the parent one in boot.js is. Can there be only 1?!</p>
  
  <p>How do I get rid of this error?</p>
  
  <p>Or, let me rephrase: How do I get rid of this error and properly setup a react hot loading environment with redux stores?</p>
  
  <p>Possibly relevant Github issue:</p>
  
  <p><a href="https://github.com/reactjs/react-redux/issues/259" rel="noreferrer">https://github.com/reactjs/react-redux/issues/259</a></p>