Add Redux to the server and client and connect to <Layout>

- Remove ReactRouter's createElement prop and wrap ReactRouter in
  ReactRedux's Provider component for both server and client.
- Redux store
  - Create a minimal reducer that returns the state only.
  - Pass the initial state for server and client.
- Use ReactRedux's connect method to map state to props for
  <Layout>.

Author: remarkablemark

client.js

@@ -1,6 +1,15 @@
 var ReactDOM = require('react-dom');
+var React = require('react');
 var routes = require('./routes/routes.jsx');
+var Redux = require('redux');
+var Provider = require('react-redux').Provider;
+
+function reducer(state) { return state; }
+
+var store = Redux.createStore(reducer, window.PROPS);
 
 ReactDOM.render(
-    routes, document
+    <Provider store={store}>
+        {routes}
+    </Provider>, document
 );

routes/index.jsx

@@ -2,20 +2,24 @@ var router = require('express').Router();
 var React = require('react');
 var ReactDOMServer = require('react-dom/server');
 var ReactRouter = require('react-router');
+var Redux = require('redux');
+var Provider = require('react-redux').Provider;
+
+function reducer(state) { return state; }
 
 router.get('*', function(request, response) {
-    var props = { title: 'Universal React' };
+    var initialState = { title: 'Universal React' };
+    var store = Redux.createStore(reducer, initialState);
+
     ReactRouter.match({
         routes: require('./routes.jsx'),
         location: request.url
     }, function(error, redirectLocation, renderProps) {
         if (renderProps) {
             var html = ReactDOMServer.renderToString(
-                <ReactRouter.RouterContext {...renderProps}
-                    createElement={function(Component, renderProps) {
-                        return <Component {...renderProps} custom={props} />;
-                    }}
-                />
+                <Provider store={store}>
+                    <ReactRouter.RouterContext {...renderProps} />
+                </Provider>
             );
             response.send(html);
         } else {

routes/routes.jsx

@@ -5,14 +5,8 @@ var Route = ReactRouter.Route;
 var IndexRoute = ReactRouter.IndexRoute;
 var browserHistory = ReactRouter.browserHistory;
 
-if (typeof window === 'object') {
-    function createElement(Component, props) {
-        return <Component {...props} custom={window.PROPS} />;
-    }
-}
-
 module.exports = (
-    <Router history={browserHistory} createElement={createElement}>
+    <Router history={browserHistory}>
         <Route path='/' component={require('../views/Layout.jsx')}>
             <IndexRoute component={require('../views/Index.jsx')} />
             <Route path='about' component={require('../views/About.jsx')} />

views/Layout.jsx

@@ -1,8 +1,8 @@
 var React = require('react');
 var Link = require('react-router').Link;
+var connect = require('react-redux').connect;
 
-module.exports = React.createClass({
-    displayName: 'Layout',
+var Layout = React.createClass({
     _handleClick: function() {
         alert();
     },
@@ -36,3 +36,11 @@ module.exports = React.createClass({
         );
     }
 });
+
+var wrapper = connect(
+    function(state) {
+        return { custom: state };
+    }
+);
+
+module.exports = wrapper(Layout);