feat: remove AppContainer from RHL3, mark App container as hot-exported.

Author: calvinl

client/index.js

@@ -3,39 +3,21 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import { ConnectedRouter } from 'react-router-redux';
-import { AppContainer } from 'react-hot-loader';
 import createHistory from 'history/createBrowserHistory';
 import configureStore from 'store';
 import App from 'containers/App';
 
-const history = createHistory();
-
-// The root element of your app
-const rootElement = document.getElementById('app');
-
-// Creates the Redux store based on the initial state passed down by the server
-// rendering.
+// Hydrate the redux store from server state.
 const initialState = window.__INITIAL_STATE__;
+const history = createHistory();
 const store = configureStore(initialState, history);
 
-const render = (Component) => {
-  ReactDOM.hydrate(
-    <Provider store={store}>
-      <AppContainer>
-        <ConnectedRouter history={history}>
-          <Component />
-        </ConnectedRouter>
-      </AppContainer>
-    </Provider>,
-    rootElement
-  );
-};
-
-render(App);
-
-if (module.hot) {
-  // We need to re-require the main App module.
-  module.hot.accept('../common/js/containers/App', () => {
-    render(require('../common/js/containers/App').default);
-  });
-}
+// Render the application
+ReactDOM.hydrate(
+  <Provider store={store}>
+    <ConnectedRouter history={history}>
+      <App />
+    </ConnectedRouter>
+  </Provider>,
+  document.getElementById('app')
+);

common/js/containers/App/index.js

@@ -3,6 +3,7 @@ import { Switch } from 'react-router-dom';
 import { RouteWithSubRoutes } from 'components/common';
 import { Container } from 'semantic-ui-react';
 import { Header, Footer } from 'components/common';
+import { hot } from 'react-hot-loader';
 import routes from 'routes';
 
 const App = () => (
@@ -17,4 +18,4 @@ const App = () => (
   </Container>
 );
 
-export default App;
+export default hot(module)(App);