import React from 'react';
import ReactDOM from 'react-dom';
import thunk from 'redux-thunk';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose } from 'redux';

import reducer from './reducers';
import { SHOW_DEVTOOLS } from './constants';

const middlewares = [
  applyMiddleware(thunk),
];

if (SHOW_DEVTOOLS) {
  middlewares.push(window.devToolsExtension ? window.devToolsExtension() : f => f);
}

const composedCreateStore = compose.apply(this, middlewares)(createStore);
const store = composedCreateStore(reducer);
const rootEl = document.getElementById('main');
const render = () => {
  // See here for explanation of why this require() is needed:
  // https://github.com/reactjs/redux/pull/1455/files#r54380102
  const Main = require('./components/Main').default; // eslint-disable-line global-require

  ReactDOM.render(
    <Provider store={ store }>
      <Main />
    </Provider>,
    rootEl
  );
};

if (module.hot) {
  module.hot.accept('./components/Main', () => {
    render();
  });
}

render();

import React from 'react';
import ReactDOM from 'react-dom';
import thunk from 'redux-thunk';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose } from 'redux';

import Main from './components/Main';
import reducer from './reducers';
import { SHOW_DEVTOOLS } from './constants';

const middlewares = [
  applyMiddleware(thunk),
];

if (SHOW_DEVTOOLS) {
  middlewares.push(window.devToolsExtension ? window.devToolsExtension() : f => f);
}

const composedCreateStore = compose.apply(this, middlewares)(createStore);
const store = composedCreateStore(reducer);

ReactDOM.render(
  <Provider store={ store }>
    <Main />
  </Provider>,
  document.getElementById('main')
);

--- 
+++ 
@@ -4,7 +4,6 @@
 import { Provider } from 'react-redux';
 import { createStore, applyMiddleware, compose } from 'redux';
 
-import Main from './components/Main';
 import reducer from './reducers';
 import { SHOW_DEVTOOLS } from './constants';
 
@@ -18,10 +17,24 @@
 
 const composedCreateStore = compose.apply(this, middlewares)(createStore);
 const store = composedCreateStore(reducer);
+const rootEl = document.getElementById('main');
+const render = () => {
+  // See here for explanation of why this require() is needed:
+  // https://github.com/reactjs/redux/pull/1455/files#r54380102
+  const Main = require('./components/Main').default; // eslint-disable-line global-require
 
-ReactDOM.render(
-  <Provider store={ store }>
-    <Main />
-  </Provider>,
-  document.getElementById('main')
-);
+  ReactDOM.render(
+    <Provider store={ store }>
+      <Main />
+    </Provider>,
+    rootEl
+  );
+};
+
+if (module.hot) {
+  module.hot.accept('./components/Main', () => {
+    render();
+  });
+}
+
+render();
Fix HMR with some help from my good friend Dan
