Redux examples has the Provider HMR Warning

[howardya]

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?

[howardya]

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?

[jaredpalmer]

Can you submit a PR?

[Metnew]

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

[benhamlin]

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

[alleniver]

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

solve my problem! thanks man.