render-server.js shouldn't depend on React/Redux-specific concepts

SteveSandersonMS · SteveSandersonMS · commit 1fc3426278c9 · 2016-02-08T10:08:35.000-08:00
diff --git a/samples/react/MusicStore/ReactApp/boot-server.tsx b/samples/react/MusicStore/ReactApp/boot-server.tsx
@@ -2,27 +2,33 @@ import * as React from 'react';
 import { Provider } from 'react-redux';
 import { renderToString } from 'react-dom/server';
 import { match, RouterContext } from 'react-router';
+import createMemoryHistory from 'history/lib/createMemoryHistory';
 React;
 
 import { routes } from './routes';
 import configureStore from './configureStore';
 import { ApplicationState }  from './store';
 
-export default function (params: any, callback: (err: any, result: { html: string, store: Redux.Store }) => void) {
-    match({ routes, location: params.location }, (error, redirectLocation, renderProps: any) => {
+export default function (params: any, callback: (err: any, result: { html: string, state: any }) => void) {
+    const { location } = params;
+    match({ routes, location }, (error, redirectLocation, renderProps: any) => {
         try {
             if (error) {
                 throw error;
             }
 
-            const store = configureStore(params.history, params.state);
-            const html = renderToString(
+            const history = createMemoryHistory(params.url);
+            const store = params.state as Redux.Store || configureStore(history);
+            let html = renderToString(
                 <Provider store={ store }>
                     <RouterContext {...renderProps} />
                 </Provider>
             );
+            
+            // Also serialise the Redux state so the client can pick up where the server left off
+            html += `<script>window.__redux_state = ${ JSON.stringify(store.getState()) }</script>`;
         
-            callback(null, { html, store });          
+            callback(null, { html, state: store });
         } catch (error) {
             callback(error, null);
         }
diff --git a/samples/react/MusicStore/ReactApp/fx/render-server.js b/samples/react/MusicStore/ReactApp/fx/render-server.js
@@ -1,4 +1,3 @@
-var createMemoryHistory = require('history/lib/createMemoryHistory');
 var url = require('url');
 var babelCore = require('babel-core');
 var babelConfig = {
@@ -26,10 +25,9 @@ var domainTasks = require('./domain-tasks.js');
 var bootServer = require('../boot-server.jsx').default;
 
 function render(requestUrl, callback) {
-    var store;
     var params = {
         location: url.parse(requestUrl),
-        history: createMemoryHistory(requestUrl),
+        url: requestUrl,
         state: undefined
     };
     
@@ -44,22 +42,16 @@ function render(requestUrl, callback) {
                 } else {
                     // The initial 'loading' state HTML is irrelevant - we only want to capture the state
                     // so we can use it to perform a real render once all data is loaded
-                    store = result.store;
+                    params.state = result.state;
                     resolve();
                 }
             });
         }));
     }).then(function() {
         // By now, all the data should be loaded, so we can render for real based on the state now
-        params.state = store.getState();
-        bootServer(params, function(error, result) {
-            if (error) {
-                callback(error, null);
-            } else {
-                var html = result.html + `<script>window.__INITIAL_STATE = ${ JSON.stringify(store.getState()) }</script>`;
-                callback(null, html)
-            }
-        });
+        // TODO: Add an optimisation where, if domain-tasks had no outstanding tasks at the end of
+        // the previous render, we don't re-render (we can use the previous html and state).
+        bootServer(params, callback);
     }).catch(function(error) {
         process.nextTick(() => { // Because otherwise you can't throw from inside a catch
             callback(error, null);
