Make Redux reducers and other non-components hot loadable

Question

I'm having a tough time getting my reducers to be hot swapable.

I'm using Webpack and react-transform-hmr. With this, all of the CSS and the components are hot loaded when I save, but when I try and work on another type of type - most notably the reducers - it would tell me to do a full refresh.

I figured out that this is because I need to explicitly re-load the reducers in and accept the event. Which I'm doing with this code in my store.js:

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

reducers/index exports the root reducer.

However now when I run this it still tells me [HMR] Cannot check for update (Full reload needed and also errors saying [HMR] TypeError: currentReducer is not a function

So - I need some help getting this to work. The code is available at https://github.com/wesbos/Simple-Redux and you can reproduce it by doing:

1. npm install
2. npm start
3. Open localhost:3000 in your browser
4. Edit a reducer - open posts.js and change the number on line 6 to anything else

Answer 1

I haven’t looked closely but my best guess is that it’s this issue.
Babel 6 no longer tries to make ES6 default exports the result of module.exports.

So instead of

const nextRootReducer = require('./reducers/index');

you probably want

const nextRootReducer = require('./reducers/index').default;

which matches the Babel 6 output for ES6 default exports.