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,6 +4,7 @@
 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';
 
@@ -17,24 +18,10 @@
 
 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();
+ReactDOM.render(
+  <Provider store={ store }>
+    <Main />
+  </Provider>,
+  document.getElementById('main')
+);
Fix HMR with some help from my good friend Dan
