A bare minimum Redux integration

kriasoft · Nov 5, 2016 · f8f1413 · f8f1413
1 parent 39dfad6
commit f8f1413
Show file tree

Hide file tree

Showing 10 changed files with 79 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.5",
+    "serialize-javascript": "1.3.0",
     "source-map-support": "0.4.5",
     "sqlite3": "3.1.6",
     "universal-router": "2.0.0",

diff --git a/src/actions/README.md b/src/actions/README.md
@@ -0,0 +1,3 @@
+## Redux Actions
+
+For more information visit http://redux.js.org/docs/basics/Actions.html
diff --git a/src/client.js b/src/client.js
@@ -16,6 +16,7 @@ import queryString from 'query-string';
 import { createPath } from 'history/PathUtils';
 import history from './core/history';
 import App from './components/App';
+import createStore from './core/createStore';
 import { ErrorReporter, deepForceUpdate } from './core/devUtils';
 
 // Global (context) variables that can be easily accessed from any React component
@@ -28,6 +29,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
@@ -13,6 +13,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, chunk, children }) {
+function Html({ title, description, style, script, state, chunk, children }) {
   return (
     <html className="no-js" lang="en">
       <head>
@@ -24,6 +25,11 @@ function Html({ title, description, style, script, chunk, children }) {
       </head>
       <body>
         <div id="app" dangerouslySetInnerHTML={{ __html: children }} />
+        {state && <script
+          dangerouslySetInnerHTML={{
+            __html: `window.APP_STATE=${serialize(state, { isJSON: true })}`,
+          }}
+        />}
         {script && <script src={script} />}
         {chunk && <script src={chunk} />}
         {analytics.google.trackingId &&
@@ -46,6 +52,7 @@ Html.propTypes = {
   description: PropTypes.string.isRequired,
   style: PropTypes.string,
   script: PropTypes.string,
+  state: PropTypes.object,
   chunk: PropTypes.string,
   children: PropTypes.string,
 };

diff --git a/src/core/createStore.js b/src/core/createStore.js
@@ -0,0 +1,13 @@
+/**
+ * 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 } from 'redux';
+import reducers from '../reducers';
+
+export default createStore.bind(undefined, reducers);
diff --git a/src/reducers/README.md b/src/reducers/README.md
@@ -0,0 +1,3 @@
+## Redux Reducers
+
+For more information visit http://redux.js.org/docs/basics/Actions.html
diff --git a/src/reducers/index.js b/src/reducers/index.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.
+ */
+
+/* eslint-disable global-require */
+
+import { combineReducers } from 'redux';
+
+export default combineReducers({
+  user: require('./user').default,
+});
diff --git a/src/reducers/user.js b/src/reducers/user.js
@@ -0,0 +1,15 @@
+/**
+ * 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.
+ */
+
+export default function user(state = {}, action) {
+  switch (action.type) {
+    default:
+      return state;
+  }
+}
diff --git a/src/server.js b/src/server.js
@@ -28,6 +28,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();
@@ -96,6 +97,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, {
@@ -112,6 +118,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();
     data.chunk = assets[route.chunk] && assets[route.chunk].js;
     const html = ReactDOM.renderToStaticMarkup(<Html {...data} />);
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		## Redux Actions

		For more information visit http://redux.js.org/docs/basics/Actions.html
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		## Redux Reducers

		For more information visit http://redux.js.org/docs/basics/Actions.html