redux started

2025-10-31 18:57:59 +00:00 · 2020-03-09 18:02:21 -04:00
parent f2714184b7
commit 0c81d47cb2
11 changed files with 578 additions and 26 deletions
--- a/app/containers/App/index.js
+++ b/app/containers/App/index.js
@@ -0,0 +1,8 @@
+import React from 'react';
+
+import "../../styles/antd.less";
+import "../../styles/index.scss";
+
+const App = () => <h1>ConnectUs</h1>;
+
+export default App;
--- a/app/index.html
+++ b/app/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <!-- The first thing in any HTML file should be the charset -->
+    <meta charset="utf-8" />
+
+    <!-- Make the page mobile compatible -->
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <!-- Open Sans Font -->
+    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" />
+    <title>ConnectUs</title>
+  </head>
+
+  <body>
+    <!-- Display a message if JS has been disabled on the browser. -->
+    <noscript
+      >If you're seeing this message, that means
+      <strong>JavaScript has been disabled on your browser</strong>, please
+      <strong>enable JS</strong> to make this app work.</noscript
+    >
+
+    <div id="root"></div>
+  </body>
+</html>
--- a/app/index.js
+++ b/app/index.js
@@ -1,6 +1,22 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { render } from 'react-dom';
+import { Provider } from 'react-redux';
+import { ConnectedRouter } from 'react-router-redux';

-const App = () => <h1>ConnectUs</h1>;
+import store, { history } from './store';

-ReactDOM.render(<App />, document.getElementById('root'));
+import App from './containers/App';
+
+const renderApp = () =>
+  render(
+    <Provider store={store}>
+      <ConnectedRouter history={history}>
+        <App />
+      </ConnectedRouter>
+    </Provider>,
+    document.getElementById('root')
+  );
+
+if (process.env.NODE_ENV !== 'production' && module.hot) {
+  module.hot.accept('containers/App', renderApp);
+}
--- a/app/reducers.js
+++ b/app/reducers.js
@@ -0,0 +1,45 @@
+/**
+ * Combine all reducers in this file and export the combined reducers.
+ */
+
+import { combineReducers } from 'redux-immutable';
+import { fromJS } from 'immutable';
+import { LOCATION_CHANGE } from 'react-router-redux';
+
+/*
+ * routeReducer
+ *
+ * The reducer merges route location changes into our immutable state.
+ * The change is necessitated by moving to react-router-redux@4
+ *
+ */
+
+// Initial routing state
+const routeInitialState = fromJS({
+  location: null,
+});
+
+/**
+ * Merge route into the global application state
+ */
+function routeReducer(state = routeInitialState, action) {
+  switch (action.type) {
+    /* istanbul ignore next */
+    case LOCATION_CHANGE:
+      return state.merge({
+        location: action.payload,
+      });
+    default:
+      return state;
+  }
+}
+
+/**
+ * Creates the main reducer with the dynamically injected ones
+ */
+export default function createReducer(injectedReducers) {
+  return combineReducers({
+    route: routeReducer,
+    ...injectedReducers,
+  });
+}
--- a/app/store.js
+++ b/app/store.js
@@ -0,0 +1,67 @@
+/**
+ * Create the store with dynamic reducers
+ */
+
+import { createStore, applyMiddleware, compose } from 'redux';
+import { createBrowserHistory } from 'history';
+import { fromJS } from 'immutable';
+import { routerMiddleware } from 'react-router-redux';
+import createSagaMiddleware from 'redux-saga';
+
+import createReducer from './reducers';
+
+export const history = createBrowserHistory();
+
+const initialState = {};
+
+const sagaMiddleware = createSagaMiddleware();
+
+// Create the store with two middlewares
+// 1. sagaMiddleware: Makes redux-sagas work
+// 2. routerMiddleware: Syncs the location/URL path to the state
+const middlewares = [sagaMiddleware, routerMiddleware(history)];
+
+const isReduxLogger = false;
+
+if (process.env.NODE_ENV === 'development' && isReduxLogger) {
+  // eslint-disable-next-line global-require
+  const { createLogger } = require('redux-logger');
+
+  middlewares.push(
+    createLogger({
+      collapsed: true,
+      predicate: (getState, action) => getState && action,
+    })
+  );
+}
+
+const enhancers = [applyMiddleware(...middlewares)];
+
+// If Redux DevTools Extension is installed use it, otherwise use Redux compose
+/* eslint-disable no-underscore-dangle */
+const composeEnhancers =
+  process.env.NODE_ENV !== 'production' &&
+  typeof window === 'object' &&
+  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
+    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
+        // TODO Try to remove when `react-router-redux` is out of beta, LOCATION_CHANGE should not be fired more than once after hot reloading
+        // Prevent recomputing reducers for `replaceReducer`
+        shouldHotReload: false,
+      })
+    : compose;
+/* eslint-enable */
+
+const store = createStore(createReducer(), fromJS(initialState), composeEnhancers(...enhancers));
+
+// Extensions
+store.runSaga = sagaMiddleware.run;
+store.injectedReducers = {}; // Reducer registry
+store.injectedSagas = {}; // Saga registry
+
+// Make reducers hot reloadable
+if (process.env.NODE_ENV !== 'production' && module.hot) {
+  module.hot.accept('./reducers', () => {
+    store.replaceReducer(createReducer(store.injectedReducers));
+  });
+}
+export default store;
--- a/app/styles/antd.less
+++ b/app/styles/antd.less
@@ -0,0 +1,3 @@
+@import '~antd/dist/antd.dark.less';
+
+@primary-color: #35a649;
--- a/app/styles/index.scss
+++ b/app/styles/index.scss
@@ -0,0 +1,3 @@
+body {
+  font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
--- a/index.html
+++ b/index.html
@@ -1,10 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>ConnectUs</title>
-  </head>
-
-  <body>
-    <div id="root"></div>
-  </body>
-</html>
--- a/package-lock.json
+++ b/package-lock.json
@@ -1037,6 +1037,53 @@
        "to-fast-properties": "2.0.0"
      }
    },
+    "@redux-saga/core": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@redux-saga/core/-/core-1.1.3.tgz",
+      "integrity": "sha512-8tInBftak8TPzE6X13ABmEtRJGjtK17w7VUs7qV17S8hCO5S3+aUTWZ/DBsBJPdE8Z5jOPwYALyvofgq1Ws+kg==",
+      "requires": {
+        "@babel/runtime": "7.8.7",
+        "@redux-saga/deferred": "1.1.2",
+        "@redux-saga/delay-p": "1.1.2",
+        "@redux-saga/is": "1.1.2",
+        "@redux-saga/symbols": "1.1.2",
+        "@redux-saga/types": "1.1.0",
+        "redux": "4.0.5",
+        "typescript-tuple": "2.2.1"
+      }
+    },
+    "@redux-saga/deferred": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@redux-saga/deferred/-/deferred-1.1.2.tgz",
+      "integrity": "sha512-908rDLHFN2UUzt2jb4uOzj6afpjgJe3MjICaUNO3bvkV/kN/cNeI9PMr8BsFXB/MR8WTAZQq/PlTq8Kww3TBSQ=="
+    },
+    "@redux-saga/delay-p": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@redux-saga/delay-p/-/delay-p-1.1.2.tgz",
+      "integrity": "sha512-ojc+1IoC6OP65Ts5+ZHbEYdrohmIw1j9P7HS9MOJezqMYtCDgpkoqB5enAAZrNtnbSL6gVCWPHaoaTY5KeO0/g==",
+      "requires": {
+        "@redux-saga/symbols": "1.1.2"
+      }
+    },
+    "@redux-saga/is": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@redux-saga/is/-/is-1.1.2.tgz",
+      "integrity": "sha512-OLbunKVsCVNTKEf2cH4TYyNbbPgvmZ52iaxBD4I1fTif4+MTXMa4/Z07L83zW/hTCXwpSZvXogqMqLfex2Tg6w==",
+      "requires": {
+        "@redux-saga/symbols": "1.1.2",
+        "@redux-saga/types": "1.1.0"
+      }
+    },
+    "@redux-saga/symbols": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@redux-saga/symbols/-/symbols-1.1.2.tgz",
+      "integrity": "sha512-EfdGnF423glv3uMwLsGAtE6bg+R9MdqlHEzExnfagXPrIiuxwr3bdiAwz3gi+PsrQ3yBlaBpfGLtDG8rf3LgQQ=="
+    },
+    "@redux-saga/types": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@redux-saga/types/-/types-1.1.0.tgz",
+      "integrity": "sha512-afmTuJrylUU/0OtqzaRkbyYFFNgCF73Bvel/sw90pvGrWIZ+vyoIJqA6eMSoA6+nb443kTmulmBtC9NerXboNg=="
+    },
    "@samverschueren/stream-to-observable": {
      "version": "0.3.0",
      "resolved": "https://registry.npmjs.org/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.0.tgz",
@@ -1587,6 +1634,13 @@
      "integrity": "sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==",
      "dev": true
    },
+    "asap": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=",
+      "dev": true,
+      "optional": true
+    },
    "asn1": {
      "version": "0.2.4",
      "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
@@ -2382,6 +2436,12 @@
        "wrap-ansi": "5.1.0"
      }
    },
+    "clone": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+      "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=",
+      "dev": true
+    },
    "clone-deep": {
      "version": "4.0.1",
      "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
@@ -2763,6 +2823,38 @@
        "component-classes": "1.2.6"
      }
    },
+    "css-loader": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-3.4.2.tgz",
+      "integrity": "sha512-jYq4zdZT0oS0Iykt+fqnzVLRIeiPWhka+7BqPn+oSIpWJAHak5tmB/WZrJ2a21JhCeFyNnnlroSl8c+MtVndzA==",
+      "dev": true,
+      "requires": {
+        "camelcase": "5.3.1",
+        "cssesc": "3.0.0",
+        "icss-utils": "4.1.1",
+        "loader-utils": "1.4.0",
+        "normalize-path": "3.0.0",
+        "postcss": "7.0.27",
+        "postcss-modules-extract-imports": "2.0.0",
+        "postcss-modules-local-by-default": "3.0.2",
+        "postcss-modules-scope": "2.1.1",
+        "postcss-modules-values": "3.0.0",
+        "postcss-value-parser": "4.0.3",
+        "schema-utils": "2.6.4"
+      },
+      "dependencies": {
+        "schema-utils": {
+          "version": "2.6.4",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.6.4.tgz",
+          "integrity": "sha512-VNjcaUxVnEeun6B2fiiUDjXXBtD4ZSH7pdbfIu1pOFwgptDPLMo/z9jr4sUfsjFVPqDCEin/F7IYlq7/E6yDbQ==",
+          "dev": true,
+          "requires": {
+            "ajv": "6.12.0",
+            "ajv-keywords": "3.4.1"
+          }
+        }
+      }
+    },
    "css-select": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz",
@@ -2781,6 +2873,12 @@
      "integrity": "sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==",
      "dev": true
    },
+    "cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true
+    },
    "currently-unhandled": {
      "version": "0.4.1",
      "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz",
@@ -2844,6 +2942,11 @@
      "integrity": "sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=",
      "dev": true
    },
+    "deep-diff": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/deep-diff/-/deep-diff-0.3.8.tgz",
+      "integrity": "sha1-wB3mPvsO7JeYgB1Ax+Da4ltYLIQ="
+    },
    "deep-equal": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz",
@@ -5529,6 +5632,15 @@
        "safer-buffer": "2.1.2"
      }
    },
+    "icss-utils": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-4.1.1.tgz",
+      "integrity": "sha512-4aFq7wvWyMHKgxsH8QQtGpvbASCf+eM3wPRLI6R+MgAnTCZ6STYsRvttLvRWK0Nfif5piF394St3HeJDaljGPA==",
+      "dev": true,
+      "requires": {
+        "postcss": "7.0.27"
+      }
+    },
    "ieee754": {
      "version": "1.1.13",
      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.13.tgz",
@@ -5547,6 +5659,18 @@
      "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
      "dev": true
    },
+    "image-size": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
+      "integrity": "sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=",
+      "dev": true,
+      "optional": true
+    },
+    "immutable": {
+      "version": "4.0.0-rc.12",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0-rc.12.tgz",
+      "integrity": "sha512-0M2XxkZLx/mi3t8NVwIm1g8nHoEmM9p9UBl/G9k4+hm0kBgOVdMV/B3CY5dQ8qG8qc80NN4gDV4HQv6FTJ5q7A=="
+    },
    "import-fresh": {
      "version": "3.2.1",
      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.1.tgz",
@@ -5593,6 +5717,12 @@
      "integrity": "sha1-Sl/W0nzDMvN+VBmlBNu4NxBckok=",
      "dev": true
    },
+    "indexes-of": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz",
+      "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=",
+      "dev": true
+    },
    "infer-owner": {
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz",
@@ -6230,6 +6360,44 @@
        "invert-kv": "2.0.0"
      }
    },
+    "less": {
+      "version": "3.11.1",
+      "resolved": "https://registry.npmjs.org/less/-/less-3.11.1.tgz",
+      "integrity": "sha512-tlWX341RECuTOvoDIvtFqXsKj072hm3+9ymRBe76/mD6O5ZZecnlAOVDlWAleF2+aohFrxNidXhv2773f6kY7g==",
+      "dev": true,
+      "requires": {
+        "clone": "2.1.2",
+        "errno": "0.1.7",
+        "graceful-fs": "4.2.3",
+        "image-size": "0.5.5",
+        "mime": "1.6.0",
+        "mkdirp": "0.5.1",
+        "promise": "7.3.1",
+        "request": "2.88.2",
+        "source-map": "0.6.1",
+        "tslib": "1.11.1"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true,
+          "optional": true
+        }
+      }
+    },
+    "less-loader": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/less-loader/-/less-loader-5.0.0.tgz",
+      "integrity": "sha512-bquCU89mO/yWLaUq0Clk7qCsKhsF/TZpJUzETRvJa9KSVEL9SO3ovCvdEHISBhrC81OwC8QSVX7E0bzElZj9cg==",
+      "dev": true,
+      "requires": {
+        "clone": "2.1.2",
+        "loader-utils": "1.4.0",
+        "pify": "4.0.1"
+      }
+    },
    "leven": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@@ -8199,6 +8367,83 @@
      "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=",
      "dev": true
    },
+    "postcss": {
+      "version": "7.0.27",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
+      "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+      "dev": true,
+      "requires": {
+        "chalk": "2.4.2",
+        "source-map": "0.6.1",
+        "supports-color": "6.1.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
+      }
+    },
+    "postcss-modules-extract-imports": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-2.0.0.tgz",
+      "integrity": "sha512-LaYLDNS4SG8Q5WAWqIJgdHPJrDDr/Lv775rMBFUbgjTz6j34lUznACHcdRWroPvXANP2Vj7yNK57vp9eFqzLWQ==",
+      "dev": true,
+      "requires": {
+        "postcss": "7.0.27"
+      }
+    },
+    "postcss-modules-local-by-default": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-3.0.2.tgz",
+      "integrity": "sha512-jM/V8eqM4oJ/22j0gx4jrp63GSvDH6v86OqyTHHUvk4/k1vceipZsaymiZ5PvocqZOl5SFHiFJqjs3la0wnfIQ==",
+      "dev": true,
+      "requires": {
+        "icss-utils": "4.1.1",
+        "postcss": "7.0.27",
+        "postcss-selector-parser": "6.0.2",
+        "postcss-value-parser": "4.0.3"
+      }
+    },
+    "postcss-modules-scope": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-2.1.1.tgz",
+      "integrity": "sha512-OXRUPecnHCg8b9xWvldG/jUpRIGPNRka0r4D4j0ESUU2/5IOnpsjfPPmDprM3Ih8CgZ8FXjWqaniK5v4rWt3oQ==",
+      "dev": true,
+      "requires": {
+        "postcss": "7.0.27",
+        "postcss-selector-parser": "6.0.2"
+      }
+    },
+    "postcss-modules-values": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-3.0.0.tgz",
+      "integrity": "sha512-1//E5jCBrZ9DmRX+zCtmQtRSV6PV42Ix7Bzj9GbwJceduuf7IqP8MgeTXuRDHOWj2m0VzZD5+roFWDuU8RQjcg==",
+      "dev": true,
+      "requires": {
+        "icss-utils": "4.1.1",
+        "postcss": "7.0.27"
+      }
+    },
+    "postcss-selector-parser": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz",
+      "integrity": "sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg==",
+      "dev": true,
+      "requires": {
+        "cssesc": "3.0.0",
+        "indexes-of": "1.0.1",
+        "uniq": "1.0.1"
+      }
+    },
+    "postcss-value-parser": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.0.3.tgz",
+      "integrity": "sha512-N7h4pG+Nnu5BEIzyeaaIYWs0LI5XC40OrRh5L60z0QjFsqGWcHcbkBvpe1WYpcIS9yQ8sOi/vIPt1ejQCrMVrg==",
+      "dev": true
+    },
    "prelude-ls": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
@@ -8398,6 +8643,16 @@
      "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
      "dev": true
    },
+    "promise": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
+      "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "asap": "2.0.6"
+      }
+    },
    "promise-inflight": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
@@ -8970,6 +9225,28 @@
      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
    },
+    "react-redux": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.0.tgz",
+      "integrity": "sha512-EvCAZYGfOLqwV7gh849xy9/pt55rJXPwmYvI4lilPM5rUT/1NxuuN59ipdBksRVSvz0KInbPnp4IfoXJXCqiDA==",
+      "requires": {
+        "@babel/runtime": "7.8.7",
+        "hoist-non-react-statics": "3.3.2",
+        "loose-envify": "1.4.0",
+        "prop-types": "15.7.2",
+        "react-is": "16.13.0"
+      },
+      "dependencies": {
+        "hoist-non-react-statics": {
+          "version": "3.3.2",
+          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+          "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+          "requires": {
+            "react-is": "16.13.0"
+          }
+        }
+      }
+    },
    "react-router": {
      "version": "5.1.2",
      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.1.2.tgz",
@@ -9024,6 +9301,11 @@
        "tiny-warning": "1.0.3"
      }
    },
+    "react-router-redux": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/react-router-redux/-/react-router-redux-4.0.8.tgz",
+      "integrity": "sha1-InQDWWtRUeGCN32rg1tdRfD4BU4="
+    },
    "read-pkg": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
@@ -9137,6 +9419,36 @@
        }
      }
    },
+    "redux": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.0.5.tgz",
+      "integrity": "sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==",
+      "requires": {
+        "loose-envify": "1.4.0",
+        "symbol-observable": "1.2.0"
+      }
+    },
+    "redux-immutable": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/redux-immutable/-/redux-immutable-4.0.0.tgz",
+      "integrity": "sha1-Ohoy32Y2ZGK2NpHw4dw15HK7yfM="
+    },
+    "redux-logger": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/redux-logger/-/redux-logger-3.0.6.tgz",
+      "integrity": "sha1-91VZZvMJjzyIYExEnPC69XeCdL8=",
+      "requires": {
+        "deep-diff": "0.3.8"
+      }
+    },
+    "redux-saga": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/redux-saga/-/redux-saga-1.1.3.tgz",
+      "integrity": "sha512-RkSn/z0mwaSa5/xH/hQLo8gNf4tlvT18qXDNvedihLcfzh+jMchDgaariQoehCpgRltEm4zHKJyINEz6aqswTw==",
+      "requires": {
+        "@redux-saga/core": "1.1.3"
+      }
+    },
    "regenerate": {
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz",
@@ -10598,6 +10910,28 @@
      "integrity": "sha512-VTyMAUfdm047mwKl+u79WIdrZxtFtn+nBxHeb844XBQ9uMNTuTHdx2hc5RiAJYqwTj3wc/xe5HLSdJSkJ+WfZw==",
      "dev": true
    },
+    "style-loader": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-1.1.3.tgz",
+      "integrity": "sha512-rlkH7X/22yuwFYK357fMN/BxYOorfnfq0eD7+vqlemSK4wEcejFF1dg4zxP0euBW8NrYx2WZzZ8PPFevr7D+Kw==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "1.4.0",
+        "schema-utils": "2.6.4"
+      },
+      "dependencies": {
+        "schema-utils": {
+          "version": "2.6.4",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.6.4.tgz",
+          "integrity": "sha512-VNjcaUxVnEeun6B2fiiUDjXXBtD4ZSH7pdbfIu1pOFwgptDPLMo/z9jr4sUfsjFVPqDCEin/F7IYlq7/E6yDbQ==",
+          "dev": true,
+          "requires": {
+            "ajv": "6.12.0",
+            "ajv-keywords": "3.4.1"
+          }
+        }
+      }
+    },
    "supports-color": {
      "version": "6.1.0",
      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
@@ -10610,8 +10944,7 @@
    "symbol-observable": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
-      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==",
-      "dev": true
+      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
    },
    "table": {
      "version": "5.4.6",
@@ -10876,6 +11209,27 @@
      "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
      "dev": true
    },
+    "typescript-compare": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/typescript-compare/-/typescript-compare-0.0.2.tgz",
+      "integrity": "sha512-8ja4j7pMHkfLJQO2/8tut7ub+J3Lw2S3061eJLFQcvs3tsmJKp8KG5NtpLn7KcY2w08edF74BSVN7qJS0U6oHA==",
+      "requires": {
+        "typescript-logic": "0.0.0"
+      }
+    },
+    "typescript-logic": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/typescript-logic/-/typescript-logic-0.0.0.tgz",
+      "integrity": "sha512-zXFars5LUkI3zP492ls0VskH3TtdeHCqu0i7/duGt60i5IGPIpAHE/DWo5FqJ6EjQ15YKXrt+AETjv60Dat34Q=="
+    },
+    "typescript-tuple": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/typescript-tuple/-/typescript-tuple-2.2.1.tgz",
+      "integrity": "sha512-Zcr0lbt8z5ZdEzERHAMAniTiIKerFCMgd7yjq1fPnDJ43et/k9twIFQMUYff9k5oXcsQ0WpvFcgzK2ZKASoW6Q==",
+      "requires": {
+        "typescript-compare": "0.0.2"
+      }
+    },
    "uglify-js": {
      "version": "3.8.0",
      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.8.0.tgz",
@@ -10997,6 +11351,12 @@
        "set-value": "2.0.1"
      }
    },
+    "uniq": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz",
+      "integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=",
+      "dev": true
+    },
    "unique-filename": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-1.1.1.tgz",
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "webpack-dev-server --open --mode development",
+    "start": "webpack-dev-server --mode development",
    "format": "prettier --write \"app/**/*.js\"",
    "eslint-fix": "eslint --fix \"app/**/*.js\"",
    "build": "webpack --mode production"
@@ -17,9 +17,17 @@
  "license": "MIT",
  "dependencies": {
    "antd": "^4.0.2",
+    "history": "^4.10.1",
+    "immutable": "^4.0.0-rc.12",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
-    "react-router-dom": "^5.1.2"
+    "react-redux": "^7.2.0",
+    "react-router-dom": "^5.1.2",
+    "react-router-redux": "^4.0.8",
+    "redux": "^4.0.5",
+    "redux-immutable": "^4.0.0",
+    "redux-logger": "^3.0.6",
+    "redux-saga": "^1.1.3"
  },
  "devDependencies": {
    "@babel/core": "^7.8.7",
@@ -27,6 +35,7 @@
    "@babel/preset-react": "^7.8.3",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.0.6",
+    "css-loader": "^3.4.2",
    "eslint": "^6.8.0",
    "eslint-config-airbnb": "^18.0.1",
    "eslint-config-prettier": "^6.10.0",
@@ -39,11 +48,14 @@
    "eslint-plugin-react-hooks": "^2.5.0",
    "html-webpack-plugin": "^3.2.0",
    "husky": "^4.2.3",
+    "less": "^3.11.1",
+    "less-loader": "^5.0.0",
    "lint-staged": "^10.0.8",
    "node-sass": "^4.13.1",
    "prettier": "^1.19.1",
    "pretty-quick": "^2.0.1",
    "sass-loader": "^8.0.2",
+    "style-loader": "^1.1.3",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11",
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -19,26 +19,49 @@ module.exports = {
        exclude: /node_modules/,
        use: ['babel-loader', 'eslint-loader'],
      },
+      {
+        test: /\.less$/,
+        use: [
+          {
+            loader: 'style-loader',
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              modules: {
+                localIdentName: '[name]__[local]___[hash:base64:5]',
+              },
+              sourceMap: true,
+            },
+          },
+          {
+            loader: 'less-loader',
+            options: {
+              javascriptEnabled: true,
+            },
+          },
+        ],
+      },
      {
        test: /\.(css|scss)$/,
        exclude: /node_modules/,
        use: [
+          {
+            loader: 'style-loader',
+          },
          {
            loader: 'css-loader',
            options: {
-              discardDuplicates: true,
-              importLoaders: 1,
-              // This enables local scoped CSS based in CSS Modules spec
-              modules: true,
-              // generates a unique name for each class (e.g. app__app___2x3cr)
-              localIdentName: '[name]__[local]___[hash:base64:5]',
-              sourceMap: process.env.NODE_ENV !== 'production',
+              modules: {
+                localIdentName: '[name]__[local]___[hash:base64:5]',
+              },
+              sourceMap: true,
            },
          },
          {
            loader: 'sass-loader',
            options: {
-              sourceMap: process.env.NODE_ENV !== 'production',
+              sourceMap: true,
            },
          },
        ],
@@ -51,7 +74,7 @@ module.exports = {

  plugins: [
    new HtmlWebPackPlugin({
-      template: './index.html',
+      template: './app/index.html',
      filename: './index.html',
    }),
  ],