React-admin: Support HMR for reducers

[kimkha]

When I try to enable HMR on my project, console log said:

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

We need to apply these simple code to support HMR. Guide here: https://github.com/reactjs/react-redux/releases/tag/v2.0.0

[djhi]

This won't work. As explained in the redux documentation:

import { createStore } from 'redux';
import rootReducer from '../reducers/index';

export default function configureStore(initialState) {
  const store = createStore(rootReducer, initialState);

  if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept('../reducers', () => {
      const nextRootReducer = require('../reducers/index');
      store.replaceReducer(nextRootReducer);
    });
  }

  return store;
}

Note the two lines:

• module.hot.accept('../reducers', () => {
• const nextRootReducer = require('../reducers/index');

My understanding is that we need to know the module path for hot reloading to work.

[fazo96]

@fzaninotto this still happens on the latest version

[fzaninotto]

React-admin doesn't impose the use of webpack, nor does it know where the reducers will end up in the final bundle.

So my understanding is that HMR support should be added in userland.

But maybe I misunderstood how that works?

[fazo96]

@fzaninotto hot module reload can be enabled for React components, redux reducers and redux sagas.

For react components we can do it in userland by wrapping the Admin component, however this means the redux store gets remounted when the component is hot updated which breaks react-redux (they do not support this). I tried this, unfortunately on hot updates the Admin panel breaks.

The correct way to support hot module reload is to follow the steps in the documentation of react-hot-loader, react-redux and redux-saga to make sure the top level component, reducer and saga can accept hot updates.

Doing this for react-admin is only possible through forking and not in userland.

@djhi showed how to support it for react-redux. If module.hot is undefined because the environment is not webpack or does not support hot module reload, nothing happens.

This means that if the environment does not have hot module reload turned on, nothing happens. Even if not running in webpack, alternatives to it (like parcel) can take advantage of the hot module reload support so it will work there too, or if they don't support it then they won't break.

The only extra library needed for this functionality is the react-hot-loader wrapper that you are supposed to use with your top level component (but below <Provider>) to make it accept hot updates.

[fzaninotto]

Thanks for the explanation. I'm reopening the enhancement request. A PR to implement the solution is welcome.

[mabhub]

Shouldn't this enhancement request having been reopened?