Make Redux reducers and other non-components hot loadable



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( {'./reducers/', () => {
    const nextRootReducer = require('./reducers/index');

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





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.


Facebook Comments

Post a comment