[Redux + Webpack] Hot reloading Redux Reducers with Webpack

Webpack will hot reload the component, but the reducer we need hard refresh.

 

To sovle the problem, go to the store.js:

import {createStore, compse} from 'redux';
import {syncHistoryWithStore} from 'react-router-redux';
import {browserHistory} from 'react-router';

// import root reducer
import rootReducer from './reducers/index';

import comments from './data/comments';
import posts from './data/posts';

const defaultState = {
    posts,
    comments
};

const store = createStore(rootReducer, defaultState);

// sync store with url history
export const history = syncHistoryWithStore(browserHistory, store);
if(module.hot){
    module.hot.accept('./reducers/', () => {
        const nextRootReducer = require('./reducers/index').default;
        store.replaceReducer(nextRootReducer);
    })
}

export default store;

We just need to config the 'reducers' folder to be reloaded