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')