From fdfd3641c189e5a6c5cf19cfc6968ddd4edf7cbc Mon Sep 17 00:00:00 2001 From: Alejandro Lembke Barrientos Date: Mon, 18 Apr 2022 03:59:56 +0000 Subject: [PATCH] PR-753737: Se agregaj Redux al proyecto y al SSR. --- src/config/index.js | 2 -- src/frontend/index.js | 38 ++++++++++++++++++++++++--- src/frontend/reducers/index.js | 9 +++++++ src/frontend/reducers/initialState.js | 3 +++ src/frontend/reducers/testReducer.js | 18 +++++++++++++ src/package-lock.json | 18 +++++++++++++ src/package.json | 1 + src/server/index.js | 2 ++ src/server/server.js | 16 ++++++++--- src/webpack.config.dev.js | 4 +++ src/webpack.config.js | 4 +++ 11 files changed, 107 insertions(+), 8 deletions(-) create mode 100644 src/frontend/reducers/index.js create mode 100644 src/frontend/reducers/initialState.js create mode 100644 src/frontend/reducers/testReducer.js diff --git a/src/config/index.js b/src/config/index.js index 4f774ae..a1fd020 100644 --- a/src/config/index.js +++ b/src/config/index.js @@ -1,5 +1,3 @@ -require('dotenv').config(); - const config = { env: process.env.ENV ? process.env.ENV : 'production', port: process.env.PORT ? process.env.PORT : 80, diff --git a/src/frontend/index.js b/src/frontend/index.js index 7ac0030..18b1a22 100644 --- a/src/frontend/index.js +++ b/src/frontend/index.js @@ -4,17 +4,49 @@ import { createRoot } from 'react-dom/client'; import { BrowserRouter as Router } from 'react-router-dom'; //History import { createBrowserHistory } from 'history'; +//Redux +import { createStore } from 'redux'; //, applyMiddleware +import { Provider } from 'react-redux'; +import { composeWithDevTools as composeWithDevToolsWeb } from 'redux-devtools-extension'; +import { config } from '../config'; +import reducer from './reducers'; +import initialState from './reducers/initialState'; + import App from './components/App'; import './styles/global.sass'; +//Redux DevTools +/* declare global { + interface Window { + __REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: typeof compose; + } +} */ + +const { env } = config + +const composeEnhancers = composeWithDevToolsWeb({ + // Specify here name, actionsBlacklist, actionsCreators and other options +}); + +const store = env === 'development' ? createStore( + reducer, + initialState, + composeEnhancers(), +) : createStore( + reducer, + initialState, +) + const container = document.getElementById('app'); const root = createRoot(container); const history = createBrowserHistory() root.render( - - - + + + + + ); if (module.hot) { diff --git a/src/frontend/reducers/index.js b/src/frontend/reducers/index.js new file mode 100644 index 0000000..08cd4e7 --- /dev/null +++ b/src/frontend/reducers/index.js @@ -0,0 +1,9 @@ +import { combineReducers } from 'redux'; +import testReducer from './testReducer'; + +const rootReducer = combineReducers({ + //Here comes the reducers + testReducer +}) + +export default rootReducer \ No newline at end of file diff --git a/src/frontend/reducers/initialState.js b/src/frontend/reducers/initialState.js new file mode 100644 index 0000000..c09ee18 --- /dev/null +++ b/src/frontend/reducers/initialState.js @@ -0,0 +1,3 @@ +let initialState = {} + +export default initialState \ No newline at end of file diff --git a/src/frontend/reducers/testReducer.js b/src/frontend/reducers/testReducer.js new file mode 100644 index 0000000..9c1dbcc --- /dev/null +++ b/src/frontend/reducers/testReducer.js @@ -0,0 +1,18 @@ +const initialState = { + hello: 'world' +} + +let testReducer = (state = initialState, action) => { + switch (action.type){ + case 'CHANGE_HELLO': { + let newHello = action.payload.hello + return { + hello: newHello + } + } + default: + return state + } +} + +export default testReducer \ No newline at end of file diff --git a/src/package-lock.json b/src/package-lock.json index 05e940d..755ee1c 100644 --- a/src/package-lock.json +++ b/src/package-lock.json @@ -35,6 +35,7 @@ "mini-css-extract-plugin": "^2.6.0", "nodemon": "^2.0.15", "react-refresh": "^0.12.0", + "redux-devtools-extension": "^2.13.9", "sass": "^1.50.0", "sass-loader": "^12.6.0", "style-loader": "^3.3.1", @@ -6926,6 +6927,16 @@ "@babel/runtime": "^7.9.2" } }, + "node_modules/redux-devtools-extension": { + "version": "2.13.9", + "resolved": "https://registry.npmjs.org/redux-devtools-extension/-/redux-devtools-extension-2.13.9.tgz", + "integrity": "sha512-cNJ8Q/EtjhQaZ71c8I9+BPySIBVEKssbPpskBfsXqb8HJ002A3KRVHfeRzwRo6mGPqsm7XuHTqNSNeS1Khig0A==", + "deprecated": "Package moved to @redux-devtools/extension.", + "dev": true, + "peerDependencies": { + "redux": "^3.1.0 || ^4.0.0" + } + }, "node_modules/regenerate": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", @@ -13660,6 +13671,13 @@ "@babel/runtime": "^7.9.2" } }, + "redux-devtools-extension": { + "version": "2.13.9", + "resolved": "https://registry.npmjs.org/redux-devtools-extension/-/redux-devtools-extension-2.13.9.tgz", + "integrity": "sha512-cNJ8Q/EtjhQaZ71c8I9+BPySIBVEKssbPpskBfsXqb8HJ002A3KRVHfeRzwRo6mGPqsm7XuHTqNSNeS1Khig0A==", + "dev": true, + "requires": {} + }, "regenerate": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", diff --git a/src/package.json b/src/package.json index c1fb19c..c7ec7fc 100644 --- a/src/package.json +++ b/src/package.json @@ -50,6 +50,7 @@ "mini-css-extract-plugin": "^2.6.0", "nodemon": "^2.0.15", "react-refresh": "^0.12.0", + "redux-devtools-extension": "^2.13.9", "sass": "^1.50.0", "sass-loader": "^12.6.0", "style-loader": "^3.3.1", diff --git a/src/server/index.js b/src/server/index.js index c732e25..b2c644b 100644 --- a/src/server/index.js +++ b/src/server/index.js @@ -1,3 +1,5 @@ +require('dotenv').config(); + require('ignore-styles'); require('@babel/register')({ diff --git a/src/server/server.js b/src/server/server.js index b8b9932..07f2e4a 100644 --- a/src/server/server.js +++ b/src/server/server.js @@ -11,7 +11,14 @@ import webpackHotMiddleware from 'webpack-hot-middleware'; //Dependencies of SSR import React from 'react'; import { renderToString } from 'react-dom/server'; +//Router import { StaticRouter } from "react-router-dom/server"; +//Redux +import { createStore } from 'redux'; //, applyMiddleware +import { Provider } from 'react-redux'; +import reducer from '../frontend/reducers'; +import initialState from '../frontend/reducers/initialState'; +//App import App from '../frontend/components/App'; const { env, port } = config @@ -55,10 +62,13 @@ const setResponse = (html) => { } const renderApp = (req, res) => { + const store = createStore(reducer, initialState) const html = renderToString( - - - + + + + + ) res.send(setResponse(html)); }; diff --git a/src/webpack.config.dev.js b/src/webpack.config.dev.js index 0ea639d..a3fbe06 100644 --- a/src/webpack.config.dev.js +++ b/src/webpack.config.dev.js @@ -1,4 +1,5 @@ const path = require('path'); +const dotenv = require('dotenv').config(); const webpack = require('webpack'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'); @@ -41,6 +42,9 @@ module.exports = { new MiniCssExtractPlugin({ filename: 'assets/app.css', }), + new webpack.DefinePlugin({ + 'process.env': JSON.stringify(dotenv.parsed), + }), ], /* devServer: { static: { diff --git a/src/webpack.config.js b/src/webpack.config.js index 8e9b0db..76ab968 100644 --- a/src/webpack.config.js +++ b/src/webpack.config.js @@ -1,4 +1,5 @@ const path = require('path'); +const dotenv = require('dotenv').config(); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); const TerserPlugin = require('terser-webpack-plugin'); @@ -43,6 +44,9 @@ module.exports = { filename: 'assets/app.css', }), new CleanWebpackPlugin(), + new webpack.DefinePlugin({ + 'process.env': JSON.stringify(dotenv.parsed), + }), ], optimization: { minimize: true,