Hot reloading for `create-react-app` with Redux and React Router using Webpack HMR

index.js

import React from 'react'
import ReactDOM from 'react-dom'

import { createStore, combineReducers, applyMiddleware, compose } from 'redux'
import thunk from 'redux-thunk'
import { Provider } from 'react-redux'

import { Router, browserHistory, applyRouterMiddleware } from 'react-router'
import { useScroll } from 'react-router-scroll'

import reducers from './reducers'
import routes from './routes'


const composer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
const store = createStore(
  combineReducers(reducers),
  composer(applyMiddleware(thunk))
)
const root = document.getElementById('root')

const factory = (routes, store) => (
  <Provider store={store}>
    <Router
      history={browserHistory}
      routes={routes}
      render={applyRouterMiddleware(useScroll())}
    />
  </Provider>
)

ReactDOM.render(factory(routes, store), root)

if (module.hot) {
  module.hot.accept('./reducers', () => {
    console.info('Replacing reducers...')
    store.replaceReducer(require('./reducers').default)
  })
  
  module.hot.accept('./routes', () => {
    console.info('Rerender...')
    ReactDOM.unmountComponentAtNode(root)
    ReactDOM.render(factory(require('./routes').default, store), root)
  })
}