diff --git a/src/client/actions/index.js b/src/client/actions/index.js
new file mode 100644
index 0000000..8bb910a
--- /dev/null
+++ b/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
+ });
+};
\ No newline at end of file
diff --git a/src/client/client.js b/src/client/client.js
new file mode 100644
index 0000000..a78a4c8
--- /dev/null
+++ b/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(
+
+
+
+
+ ,
+ document.querySelector('#root')
+);
\ No newline at end of file
diff --git a/src/client/index.js b/src/client/index.js
deleted file mode 100644
index dadaf02..0000000
--- a/src/client/index.js
+++ /dev/null
@@ -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(
-
-
- ,
- document.querySelector('#root')
-);
\ No newline at end of file
diff --git a/src/client/reducers/index.js b/src/client/reducers/index.js
new file mode 100644
index 0000000..62644c5
--- /dev/null
+++ b/src/client/reducers/index.js
@@ -0,0 +1,6 @@
+import { combineReducers } from "redux";
+import usersReducer from "./usersReducer";
+
+export default combineReducers({
+ users: usersReducer
+});
\ No newline at end of file
diff --git a/src/client/reducers/usersReducer.js b/src/client/reducers/usersReducer.js
new file mode 100644
index 0000000..dafc0d4
--- /dev/null
+++ b/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;
+ }
+};
\ No newline at end of file
diff --git a/src/helpers/createStore.js b/src/helpers/createStore.js
new file mode 100644
index 0000000..bc8b9ca
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/helpers/renderer.js b/src/helpers/renderer.js
index 3cd2f94..a1b0747 100644
--- a/src/helpers/renderer.js
+++ b/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(
-
-
-
+
+
+
+
+
);
return `
diff --git a/src/index.js b/src/index.js
index f023c86..07c5b7c 100644
--- a/src/index.js
+++ b/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, () => {
diff --git a/webpack.client.js b/webpack.client.js
index 6449504..7242ce2 100644
--- a/webpack.client.js
+++ b/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')