Skip to content

Commit 74a7c6f

Browse files
authored
Merge pull request #30 from imbhargav5/fix-14
Server rendering with Redux
2 parents 14ca395 + c88ddda commit 74a7c6f

File tree

4 files changed

+63
-49
lines changed

4 files changed

+63
-49
lines changed

src/client/app.js

Lines changed: 35 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
import React, { Component } from "react";
22
import { Route, Redirect, Switch } from "react-router-dom";
33
import PropTypes from "prop-types";
4-
import { Provider } from "react-redux";
54
import bundle from "./bundle";
65
import Header from "./components/Header";
76
import Core from "./components/Core";
87
import Footer from "./components/Footer";
98
import FadeIn from "./components/FadeIn";
10-
import store from "./store";
119
import Home from "./containers/Home";
1210
import About from "./containers/About";
1311
import NotFoundPage from "./containers/NotFound";
@@ -106,43 +104,41 @@ FadingRoute.propTypes = {
106104
export default class App extends Component {
107105
render() {
108106
return (
109-
<Provider store={store}>
110-
<Root>
111-
<RootMain>
112-
<Sidebar>
113-
<StyledHeader />
114-
<StyledFooter />
115-
</Sidebar>
116-
<StyledCore>
117-
<Switch>
118-
<FadingRoute exact path="/" component={Home} />
119-
<Route exact path="/about" component={About} />
120-
<Route exact path="/counter" component={Counter} />
121-
<RedirectWithStatus
122-
from="/500"
123-
to={{
124-
pathname: "error",
125-
state: {
126-
status: 500
127-
}
128-
}}
129-
/>
130-
<RedirectWithStatus
131-
from="/401"
132-
to={{
133-
pathname: "error",
134-
state: {
135-
status: 401
136-
}
137-
}}
138-
/>
139-
<Route exact path="/error" component={ServerError} />
140-
<Route component={NotFoundPage} />
141-
</Switch>
142-
</StyledCore>
143-
</RootMain>
144-
</Root>
145-
</Provider>
107+
<Root>
108+
<RootMain>
109+
<Sidebar>
110+
<StyledHeader />
111+
<StyledFooter />
112+
</Sidebar>
113+
<StyledCore>
114+
<Switch>
115+
<FadingRoute exact path="/" component={Home} />
116+
<Route exact path="/about" component={About} />
117+
<Route exact path="/counter" component={Counter} />
118+
<RedirectWithStatus
119+
from="/500"
120+
to={{
121+
pathname: "error",
122+
state: {
123+
status: 500
124+
}
125+
}}
126+
/>
127+
<RedirectWithStatus
128+
from="/401"
129+
to={{
130+
pathname: "error",
131+
state: {
132+
status: 401
133+
}
134+
}}
135+
/>
136+
<Route exact path="/error" component={ServerError} />
137+
<Route component={NotFoundPage} />
138+
</Switch>
139+
</StyledCore>
140+
</RootMain>
141+
</Root>
146142
);
147143
}
148144
}

src/client/index.js

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,15 @@ import { BrowserRouter } from "react-router-dom";
33
// hydrate is responsible for server rendering going forward
44
import { hydrate as render } from "react-dom";
55
import App from "./app";
6+
import { Provider } from "react-redux";
7+
import store from "./store";
68

79
render(
8-
<BrowserRouter>
9-
<App />
10-
</BrowserRouter>,
10+
<Provider store={store}>
11+
<BrowserRouter>
12+
<App />
13+
</BrowserRouter>
14+
</Provider>,
1115
document.getElementById("app")
1216
);
1317

src/client/store/index.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import createStore from "./createStore";
22
import rootReducer from "../reducers";
33

4-
export default createStore(rootReducer);
4+
const preloadedState = window.__PRELOADED_STATE__ || {};
5+
export default createStore(rootReducer, preloadedState);

src/server/app.js

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import path from "path";
2-
import fs from "fs";
32
import React from "react";
43
import { renderToString } from "react-dom/server";
54
import express from "express";
65
import { StaticRouter as Router } from "react-router";
7-
import App from "../client/app";
6+
import { Provider } from "react-redux";
87
import { ServerStyleSheet } from "styled-components";
8+
import App from "../client/app";
9+
import createStore from "../client/store/createStore";
10+
import rootReducer from "../client/reducers";
911

1012
// Environment variables
1113
const isDevelopment = process.env.NODE_ENV === "development";
@@ -39,13 +41,24 @@ const context = {};
3941

4042
function render(req, res, err) {
4143
const sheet = new ServerStyleSheet();
42-
const html = renderToString(
44+
// setting counter initial value to 5
45+
const store = createStore(rootReducer, {
46+
counter: 5
47+
});
48+
let html = renderToString(
4349
sheet.collectStyles(
44-
<Router location={req.url} context={context}>
45-
<App />
46-
</Router>
50+
<Provider store={store}>
51+
<Router location={req.url} context={context}>
52+
<App />
53+
</Router>
54+
</Provider>
4755
)
4856
);
57+
html += `
58+
<script>
59+
var __PRELOADED_STATE__ = ${JSON.stringify(store.getState())}
60+
</script>
61+
`;
4962
const styleTags = sheet.getStyleTags();
5063
// This renders html as well as a concatenated string list of style tags
5164
res.render(indexTemplate, {

0 commit comments

Comments
 (0)