PR-753737: Se agregaj Redux al proyecto y al SSR.

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,

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(
-    <Router history={history}>
+    <Provider store={store}>
-        <App tab="home" />
+        <Router history={history}>
-    </Router>
+            <App tab="home" />
+        </Router>
+    </Provider>
 );
 
 if (module.hot) {

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

src/frontend/reducers/initialState.js

@@ -0,0 +1,3 @@
+let initialState = {}
+
+export default  initialState

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

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",

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",

src/server/index.js

@@ -1,3 +1,5 @@
+require('dotenv').config();
+
 require('ignore-styles');
 
 require('@babel/register')({

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(
-        <StaticRouter location={req.url}>
+        <Provider store={store}>
-            <App />
+            <StaticRouter location={req.url}>
-        </StaticRouter>
+                <App />
+            </StaticRouter>
+        </Provider>
     )
     res.send(setResponse(html));
 };

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: {

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,