Skip to content

Instantly share code, notes, and snippets.

@tungd
Created October 24, 2016 02:58
Show Gist options
  • Save tungd/890d2d650d67057a56926d3c300fc9da to your computer and use it in GitHub Desktop.
Save tungd/890d2d650d67057a56926d3c300fc9da to your computer and use it in GitHub Desktop.
Hot reloading for `create-react-app` with Redux and React Router using Webpack HMR
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)
})
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment