Merge pull request #30 from imbhargav5/fix-14

Server rendering with Redux

src/client/app.js

@@ -1,13 +1,11 @@
 import React, { Component } from "react";
 import { Route, Redirect, Switch } from "react-router-dom";
 import PropTypes from "prop-types";
-import { Provider } from "react-redux";
 import bundle from "./bundle";
 import Header from "./components/Header";
 import Core from "./components/Core";
 import Footer from "./components/Footer";
 import FadeIn from "./components/FadeIn";
-import store from "./store";
 import Home from "./containers/Home";
 import About from "./containers/About";
 import NotFoundPage from "./containers/NotFound";
@@ -106,43 +104,41 @@ FadingRoute.propTypes = {
 export default class App extends Component {
   render() {
     return (
-      <Provider store={store}>
-        <Root>
-          <RootMain>
-            <Sidebar>
-              <StyledHeader />
-              <StyledFooter />
-            </Sidebar>
-            <StyledCore>
-              <Switch>
-                <FadingRoute exact path="/" component={Home} />
-                <Route exact path="/about" component={About} />
-                <Route exact path="/counter" component={Counter} />
-                <RedirectWithStatus
-                  from="/500"
-                  to={{
-                    pathname: "error",
-                    state: {
-                      status: 500
-                    }
-                  }}
-                />
-                <RedirectWithStatus
-                  from="/401"
-                  to={{
-                    pathname: "error",
-                    state: {
-                      status: 401
-                    }
-                  }}
-                />
-                <Route exact path="/error" component={ServerError} />
-                <Route component={NotFoundPage} />
-              </Switch>
-            </StyledCore>
-          </RootMain>
-        </Root>
-      </Provider>
+      <Root>
+        <RootMain>
+          <Sidebar>
+            <StyledHeader />
+            <StyledFooter />
+          </Sidebar>
+          <StyledCore>
+            <Switch>
+              <FadingRoute exact path="/" component={Home} />
+              <Route exact path="/about" component={About} />
+              <Route exact path="/counter" component={Counter} />
+              <RedirectWithStatus
+                from="/500"
+                to={{
+                  pathname: "error",
+                  state: {
+                    status: 500
+                  }
+                }}
+              />
+              <RedirectWithStatus
+                from="/401"
+                to={{
+                  pathname: "error",
+                  state: {
+                    status: 401
+                  }
+                }}
+              />
+              <Route exact path="/error" component={ServerError} />
+              <Route component={NotFoundPage} />
+            </Switch>
+          </StyledCore>
+        </RootMain>
+      </Root>
     );
   }
 }

src/client/index.js

@@ -3,11 +3,15 @@ import { BrowserRouter } from "react-router-dom";
 // hydrate is responsible for server rendering going forward
 import { hydrate as render } from "react-dom";
 import App from "./app";
+import { Provider } from "react-redux";
+import store from "./store";
 
 render(
-  <BrowserRouter>
-    <App />
-  </BrowserRouter>,
+  <Provider store={store}>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </Provider>,
   document.getElementById("app")
 );
 

src/client/store/index.js

@@ -1,4 +1,5 @@
 import createStore from "./createStore";
 import rootReducer from "../reducers";
 
-export default createStore(rootReducer);
+const preloadedState = window.__PRELOADED_STATE__ || {};
+export default createStore(rootReducer, preloadedState);

src/server/app.js

@@ -1,11 +1,13 @@
 import path from "path";
-import fs from "fs";
 import React from "react";
 import { renderToString } from "react-dom/server";
 import express from "express";
 import { StaticRouter as Router } from "react-router";
-import App from "../client/app";
+import { Provider } from "react-redux";
 import { ServerStyleSheet } from "styled-components";
+import App from "../client/app";
+import createStore from "../client/store/createStore";
+import rootReducer from "../client/reducers";
 
 // Environment variables
 const isDevelopment = process.env.NODE_ENV === "development";
@@ -39,13 +41,24 @@ const context = {};
 
 function render(req, res, err) {
   const sheet = new ServerStyleSheet();
-  const html = renderToString(
+  // setting counter initial value to 5
+  const store = createStore(rootReducer, {
+    counter: 5
+  });
+  let html = renderToString(
     sheet.collectStyles(
-      <Router location={req.url} context={context}>
-        <App />
-      </Router>
+      <Provider store={store}>
+        <Router location={req.url} context={context}>
+          <App />
+        </Router>
+      </Provider>
     )
   );
+  html += `
+    <script>
+      var __PRELOADED_STATE__ = ${JSON.stringify(store.getState())}
+    </script>
+  `;
   const styleTags = sheet.getStyleTags();
   // This renders html as well as a concatenated string list of style tags
   res.render(indexTemplate, {