diff --git a/samples/react/MusicStore/ReactApp/boot-server.tsx b/samples/react/MusicStore/ReactApp/boot-server.tsx
index 1183b12..a3d7c81 100644
--- 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(
);
+
+ // Also serialise the Redux state so the client can pick up where the server left off
+ html += ``;
- 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
index 7e4b00b..c5971b8 100644
--- 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 + ``;
- 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);