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,