add redux

src/client/actions/index.js

@@ -0,0 +1,11 @@
+import axios from 'axios';
+
+export const FETCH_USERS = 'fetch_users';
+export const fetchUsers = () => async dispatch => {
+  const res = await axios.get('https://react-ssr-api.herokuapp.com/users');
+
+  dispatch({
+          type: FETCH_USERS,
+          payload: res
+  });
+};

src/client/client.js

@@ -0,0 +1,19 @@
+import React from "react";
+import ReactDOM from 'react-dom';
+import { BrowserRouter } from "react-router-dom";
+import { createStore, applyMiddleware} from "redux";
+import thunk from 'redux-thunk';
+import { Provider } from "react-redux";
+import Routes from './Routes';
+import reducers from "./reducers";
+
+const store = createStore(reducers, {}, applyMiddleware(thunk));
+
+ReactDOM.hydrate(
+    <Provider store={store}>
+    <BrowserRouter>
+        <Routes />
+    </BrowserRouter>
+    </Provider>,
+    document.querySelector('#root')
+);

src/client/index.js

@@ -1,11 +0,0 @@
-import React from "react";
-import ReactDOM from 'react-dom';
-import { BrowserRouter } from "react-router-dom";
-import Routes from './Routes';
-
-ReactDOM.hydrate(
-    <BrowserRouter>
-        <Routes />
-    </BrowserRouter>,
-    document.querySelector('#root')
-);

src/client/reducers/index.js

@@ -0,0 +1,6 @@
+import { combineReducers } from "redux";
+import usersReducer from "./usersReducer";
+
+export default combineReducers({
+    users: usersReducer
+});

src/client/reducers/usersReducer.js

@@ -0,0 +1,10 @@
+import { FETCH_USERS } from "../actions";
+
+export default (state = [], action) => {
+    switch (action.type) {
+        case FETCH_USERS:
+            return action.payload.data;
+        default:
+            return state;
+    }
+};

src/helpers/createStore.js

@@ -0,0 +1,9 @@
+import { createStore, applyMiddleware} from "redux";
+import thunk from 'redux-thunk';
+import reducers from "../client/reducers";
+
+export default () => {
+    const store = createStore(reducers, {}, applyMiddleware(thunk));
+
+    return store;
+}

src/helpers/renderer.js

@@ -1,13 +1,16 @@
 import React from "react";
 import { renderToString } from "react-dom/server";
 import { StaticRouter } from "react-router-dom";
+import { Provider } from "react-redux";
 import Routes from "../client/Routes";
 
-export default (req) => {
+export default (req, store) => {
     const content = renderToString(
-        <StaticRouter location={req.path} context={{}}>
-            <Routes />
-        </StaticRouter>
+        <Provider store={store}>
+            <StaticRouter location={req.path} context={{}}>
+                <Routes />
+            </StaticRouter>
+        </Provider>
     );
 
     return `

src/index.js

@@ -1,11 +1,14 @@
 import express from 'express';
 import renderer from './helpers/renderer';
+import createStore from "./helpers/createStore";
 
 const app = express();
 
 app.use(express.static('public'));
 app.get('*', (req, res) => {
-    res.send(renderer(req));
+    const store = createStore()
+
+    res.send(renderer(req, store));
 });
 
 app.listen(3000, () => {

webpack.client.js

@@ -3,7 +3,7 @@ const merge = require('webpack-merge');
 const baseConfig = require('./webpack.base.js');
 
 const config = {
-    entry: './src/client/index.js',
+    entry: './src/client/client.js',
     output: {
         filename: 'bundle.js',
         path: path.resolve(__dirname, 'public')