A bare minimum Redux integration

kriasoft · Sep 27, 2016 · 6149ef2 · 6149ef2
1 parent fd2845f
commit 6149ef2
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 1 deletion.
diff --git a/package.json b/package.json
@@ -32,7 +32,10 @@
     "query-string": "4.2.3",
     "react": "15.3.2",
     "react-dom": "15.3.2",
+    "react-redux": "4.4.5",
+    "redux": "3.6.0",
     "sequelize": "3.24.3",
+    "serialize-javascript": "1.3.0",
     "source-map-support": "0.4.2",
     "sqlite3": "3.1.4",
     "universal-router": "1.2.2",

diff --git a/src/client.js b/src/client.js
@@ -16,6 +16,7 @@ import queryString from 'query-string';
 import createBrowserHistory from 'history/createBrowserHistory';
 import { createPath } from 'history/PathUtils';
 import App from './components/App';
+import createStore from './core/createStore';
 
 // Global (context) variables that can be easily accessed from any React component
 // https://facebook.github.io/react/docs/context.html
@@ -30,6 +31,9 @@ const context = {
     const removeCss = styles.map(x => x._insertCss());
     return () => { removeCss.forEach(f => f()); };
   },
+  // Initialize a new Redux store
+  // http://redux.js.org/docs/basics/UsageWithReact.html
+  store: createStore(window.APP_STATE),
 };
 
 function updateTag(tagName, keyName, keyValue, attrName, attrValue) {

diff --git a/src/components/App.js b/src/components/App.js
@@ -16,6 +16,13 @@ const ContextType = {
   // Enables critical path CSS rendering
   // https://github.com/kriasoft/isomorphic-style-loader
   insertCss: PropTypes.func.isRequired,
+  // Integrate Redux
+  // http://redux.js.org/docs/basics/UsageWithReact.html
+  store: PropTypes.shape({
+    subscribe: PropTypes.func.isRequired,
+    dispatch: PropTypes.func.isRequired,
+    getState: PropTypes.func.isRequired,
+  }).isRequired,
 };
 
 /**

diff --git a/src/components/Html.js b/src/components/Html.js
@@ -8,9 +8,10 @@
  */
 
 import React, { PropTypes } from 'react';
+import serialize from 'serialize-javascript';
 import { analytics } from '../config';
 
-function Html({ title, description, style, script, children }) {
+function Html({ title, description, style, script, state, children }) {
   return (
     <html className="no-js" lang="en">
       <head>
@@ -24,6 +25,9 @@ function Html({ title, description, style, script, children }) {
       </head>
       <body>
         <div id="app" dangerouslySetInnerHTML={{ __html: children }} />
+        <script
+          dangerouslySetInnerHTML={{ __html: `window.APP_STATE=${serialize(state || {})}` }}
+        />
         {script && <script src={script} />}
         {analytics.google.trackingId &&
           <script
@@ -45,6 +49,7 @@ Html.propTypes = {
   description: PropTypes.string.isRequired,
   style: PropTypes.string,
   script: PropTypes.string,
+  state: PropTypes.object,
   children: PropTypes.string,
 };
 

diff --git a/src/core/createStore.js b/src/core/createStore.js
@@ -0,0 +1,16 @@
+/**
+ * React Starter Kit (https://www.reactstarterkit.com/)
+ *
+ * Copyright © 2014-2016 Kriasoft, LLC. All rights reserved.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.txt file in the root directory of this source tree.
+ */
+
+import { createStore, combineReducers } from 'redux';
+
+const reducers = {
+  // TODO: Place your application store reducers here
+};
+
+export default createStore.bind(undefined, combineReducers(reducers));
diff --git a/src/server.js b/src/server.js
@@ -29,6 +29,7 @@ import models from './data/models';
 import schema from './data/schema';
 import routes from './routes';
 import assets from './assets'; // eslint-disable-line import/no-unresolved
+import createStore from './core/createStore';
 import { port, auth } from './config';
 
 const app = express();
@@ -102,6 +103,11 @@ app.get('*', async (req, res, next) => {
         // eslint-disable-next-line no-underscore-dangle
         styles.forEach(style => css.add(style._getCss()));
       },
+      // Initialize a new Redux store
+      // http://redux.js.org/docs/basics/UsageWithReact.html
+      store: createStore({
+        user: req.user || null,
+      }),
     };
 
     const route = await UniversalRouter.resolve(routes, {
@@ -113,6 +119,7 @@ app.get('*', async (req, res, next) => {
     data.children = ReactDOM.renderToString(<App context={context}>{route.component}</App>);
     data.style = [...css].join('');
     data.script = assets.main.js;
+    data.state = context.store.getState();
     const html = ReactDOM.renderToStaticMarkup(<Html {...data} />);
 
     res.status(route.status || 200);