fix: spa hot update

Author: hubcarl

app/web/page/spa/redux.jsx

@@ -1,16 +1,17 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { Provider } from 'react-redux'
-
-
+import { AppContainer } from 'react-hot-loader';
 import Header from 'component/header/header.jsx';
 import App from 'component/spa/redux/app';
 import store from 'component/spa/redux/store';
-import './spa.css';
 
 
 // Create an enhanced history that syncs navigation events with the store
 // const history = syncHistoryWithStore(createHistory(), store);
+const RApp = () => {
+  return EASY_ENV_IS_DEV ? <AppContainer><App /></AppContainer> : <App />;
+};
 ReactDOM.render(
   <div>
     <Header></Header>
@@ -19,4 +20,7 @@ ReactDOM.render(
     </Provider>
   </div>,
   document.getElementById('app')
-);
+);
+if (EASY_ENV_IS_DEV && module.hot) {
+  module.hot.accept();
+}

app/web/page/spa/ssr.jsx

@@ -3,28 +3,33 @@ import ReactDOM from 'react-dom'
 import { Provider } from 'react-redux'
 import {match, RouterContext} from 'react-router'
 import { BrowserRouter, StaticRouter } from 'react-router-dom';
-import { matchRoutes, renderRoutes } from 'react-router-config'
+import { matchRoutes, renderRoutes } from 'react-router-config';
+import { AppContainer } from 'react-hot-loader';
 import Layout from 'framework/layout/layout.jsx';
 import Header from 'component/header/header';
 import SSR from 'component/spa/ssr/ssr';
 import { create } from 'component/spa/ssr/store';
 import routes from 'component/spa/ssr/routes'
-import './spa.css';
 
 const clientRender = () => {
   const store = create(window.__INITIAL_STATE__);
   const url = store.getState().url;
-  ReactDOM.render(
-    <div>
-      <Header></Header>
-      <Provider store={ store }>
-        <BrowserRouter>
-          <SSR url={ url }/>
-        </BrowserRouter>
-      </Provider>
-    </div>,
-    document.getElementById('app')
+  const Entry = () => (<div>
+    <Header></Header>
+    <Provider store={ store }>
+      <BrowserRouter>
+        <SSR url={ url }/>
+      </BrowserRouter>
+    </Provider>
+  </div>
   );
+  const render = (App)=>{
+    ReactDOM.hydrate(EASY_ENV_IS_DEV ? <AppContainer><App /></AppContainer> : <App />, document.getElementById('app'));
+  };
+  if (EASY_ENV_IS_DEV && module.hot) {
+    module.hot.accept();
+  }
+  render(Entry);
 };
 
 const serverRender = (context, options)=> {
@@ -55,8 +60,4 @@ const serverRender = (context, options)=> {
     )
   });
 };
-
-export default EASY_ENV_IS_NODE ?  serverRender : clientRender();
-
-
-
+export default EASY_ENV_IS_NODE ?  serverRender : clientRender();