add redux

This commit is contained in:
agatha 2024-04-12 21:58:11 -04:00
parent 67e11b4e30
commit aa9e1cc542
9 changed files with 67 additions and 17 deletions

View File

@ -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
});
};

19
src/client/client.js Normal file
View File

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

View File

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

View File

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

View File

@ -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;
}
};

View File

@ -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;
}

View File

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

View File

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

View File

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