Razzle: Redux examples has the Provider HMR Warning

Created on 6 Oct 2017 · 5Comments · Source: jaredpalmer/razzle

Reproduce, git clone.
cd examples/with-redux
yarn
yarn start

then change any file, for instance, common/components/Counter.js, HMR will work, but browser will sound the following warning

<Provider> 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.

I have tried to google around this error, but does not find any food solution to it. Anyone manage to overcome this?

Source

howardya

Most helpful comment

Add key={Math.random()} prop to <Provider>. It should fix this warning.

Metnew on 8 Feb 2018

👍4 🎉1

All 5 comments

I added the following code to the file client.js and it removes the warning.

if (module.hot) {
  module.hot.accept();
  module.hot.accept('./App', () => {
    hydrate(
      <Provider store={store}>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </Provider>,
      document.getElementById('app')
    );
  });
}

Anyone has any view of this?

howardya on 9 Oct 2017

Can you submit a PR?

jaredpalmer on 22 Nov 2017

Add key={Math.random()} prop to <Provider>. It should fix this warning.

Metnew on 8 Feb 2018

👍4 🎉1

@howardya's solution is the better one here. Using a random key silences the warning but doesn't change the fact that the store is being recreated on every update, which is what's not supported. It can lead to some wonky behavior, especially if you're using redux dev-tools or similar.

By specifically handling the ./App module, that will catch virtually all updates except for reducers, which is already handled separately. That leaves changes to configureStore.js and client/index.js itself as unhandled. You can either leave the catch-all in, which would rerun everything and still cause the warning, or remove it, which triggers a page reload. I think the latter would be more correct here.

I'll take a look at making a PR for this.