First switch to redux-toolkit

Dashboard/package.json

@@ -52,10 +52,12 @@
   "license": "ISC",
   "dependencies": {
     "@redux-devtools/cli": "1.0.0-9",
+    "@reduxjs/toolkit": "^1.7.1",
     "@types/jest": "27.0.2",
     "@types/node": "15.14.9",
     "@types/react": "17.0.27",
     "@types/react-dom": "17.0.9",
+    "@types/react-redux": "^7.1.21",
     "@types/remote-redux-devtools": "0.5.5",
     "@types/styled-components": "5.1.14",
     "chalk": "4.1.2",

Dashboard/src/redux/hooks/index.ts

@@ -0,0 +1,6 @@
+import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
+import { AppDispatch, RootState } from "../store/types.d";
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+export const useAppDispatch = () => useDispatch<AppDispatch>();
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

Dashboard/src/redux/middlewares/logger.ts

@@ -0,0 +1,10 @@
+import { Middleware } from "@reduxjs/toolkit";
+import { RootState } from "../store/types.d";
+
+const logger: Middleware<{}, RootState> = (store) => (next) => (action) => {
+  console.log(action.type);
+  console.log(store.getState());
+  return next(action);
+};
+
+export default logger;

Dashboard/src/redux/store/index.ts

@@ -1,19 +1,15 @@
 import thunk from "redux-thunk";
-import { createStore, applyMiddleware } from "redux";
+import { configureStore } from "@reduxjs/toolkit";
-import { RootAction, RootState } from "typesafe-actions";
-import composeEnhancers from "./utils";
 import rootReducer from "./root-reducer";
+import logger from "../middlewares/logger";
 
-const middlewares = [thunk];
+const middlewares = [thunk, logger];
 
-const enhancer = composeEnhancers(applyMiddleware(...middlewares));
+const store = configureStore(
-
+  {
-const initialState = {};
+    reducer: rootReducer,
-
+    middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(middlewares),
-const store = createStore<RootState, RootAction, any, any>(
+  },
-  rootReducer,
-  initialState,
-  enhancer,
 );
 
 export default store;

Dashboard/src/redux/store/root-action.ts

@@ -1,7 +0,0 @@
-import * as serialConnectionActions from "../actions/serialConnectionActions";
-
-const rootAction = {
-  serialConnection: serialConnectionActions,
-};
-
-export default rootAction;

Dashboard/src/redux/store/types.d.ts

@@ -1,19 +1,5 @@
-import { StateType, ActionType } from "typesafe-actions";
+import store from ".";
-import { ThunkAction } from "redux-thunk";
 import rootReducer from "./root-reducer";
-import rootAction from "./root-action";
-import store from "./index";
 
-declare module "typesafe-actions" {
+export type RootState = ReturnType<typeof rootReducer>;
-  export type Store = StateType<typeof store>;
+export type AppDispatch = typeof store.dispatch;
-
-  export type RootState = StateType<typeof rootReducer>;
-
-  export type RootAction = ActionType<typeof rootAction>;
-
-  export type ThunkResult<R> = ThunkAction<R, RootState, unknown, RootAction>;
-
-  interface Types {
-    RootAction: RootAction;
-  }
-}

Dashboard/src/redux/store/utils.ts

@@ -1,12 +0,0 @@
-import { composeWithDevTools } from "remote-redux-devtools";
-
-// Access Redux devtools via http://localhost:8000
-const composeEnhancers = composeWithDevTools({
-  name: "Light-Control",
-  realtime: true,
-  secure: false,
-  hostname: "localhost",
-  port: 8000,
-});
-
-export default composeEnhancers;

Dashboard/tsconfig.json

@@ -3,8 +3,7 @@
     "target": "ES2018",
     "module": "CommonJS",
     "lib": ["dom", "esnext"],
-    "declaration": true,
+    "declaration": false,
-    "declarationMap": true,
     "noEmit": false,
     "jsx": "react",
     "strict": true,

Dashboard/yarn.lock

@@ -1677,6 +1677,16 @@
     prop-types "^15.7.2"
     redux-devtools-themes "^1.0.0"
 
+"@reduxjs/toolkit@^1.7.1":
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.7.1.tgz#994962aeb7df3c77be343dd2ad1aa48221dbaa0c"
+  integrity sha512-wXwXYjBVz/ItxB7SMzEAMmEE/FBiY1ze18N+VVVX7NtVbRUrdOGKhpQMHivIJfkbJvSdLUU923a/yAagJQzY0Q==
+  dependencies:
+    immer "^9.0.7"
+    redux "^4.1.2"
+    redux-thunk "^2.4.1"
+    reselect "^4.1.5"
+
 "@rjsf/core@^2.4.0":
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/@rjsf/core/-/core-2.5.1.tgz#95a842d22bab5f83929662fcd73739108e9f5cbb"
@@ -2171,6 +2181,16 @@
     hoist-non-react-statics "^3.3.0"
     redux "^4.0.0"
 
+"@types/react-redux@^7.1.21":
+  version "7.1.21"
+  resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.21.tgz#f32bbaf7cbc4b93f51e10d340aa54035c084b186"
+  integrity sha512-bLdglUiBSQNzWVVbmNPKGYYjrzp3/YDPwfOH3nLEz99I4awLlaRAPWjo6bZ2POpxztFWtDDXIPxBLVykXqBt+w==
+  dependencies:
+    "@types/hoist-non-react-statics" "^3.3.0"
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+    redux "^4.0.0"
+
 "@types/react-select@5.0.0":
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/@types/react-select/-/react-select-5.0.0.tgz#22285f0f7aa3819076c276eb3d417c79c6601b2b"
@@ -6301,6 +6321,11 @@ immediate@~3.0.5:
   resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
   integrity sha1-nbHb0Pr43m++D13V5Wu2BigN5ps=
 
+immer@^9.0.7:
+  version "9.0.7"
+  resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.7.tgz#b6156bd7db55db7abc73fd2fdadf4e579a701075"
+  integrity sha512-KGllzpbamZDvOIxnmJ0jI840g7Oikx58lBPWV0hUh7dtAyZpFqqrBZdKka5GlTwMTZ1Tjc/bKKW4VSFAt6BqMA==
+
 immutable@^4.0.0-rc.12:
   version "4.0.0-rc.14"
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.0.0-rc.14.tgz#29ba96631ec10867d1348515ac4e6bdba462f071"
@@ -9145,6 +9170,11 @@ redux-thunk@2.3.0:
   resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622"
   integrity sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw==
 
+redux-thunk@^2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.4.1.tgz#0dd8042cf47868f4b29699941de03c9301a75714"
+  integrity sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q==
+
 redux@4.1.1, redux@^4.0.0, redux@^4.0.5:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.1.1.tgz#76f1c439bb42043f985fbd9bf21990e60bd67f47"
@@ -9152,6 +9182,13 @@ redux@4.1.1, redux@^4.0.0, redux@^4.0.5:
   dependencies:
     "@babel/runtime" "^7.9.2"
 
+redux@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-4.1.2.tgz#140f35426d99bb4729af760afcf79eaaac407104"
+  integrity sha512-SH8PglcebESbd/shgf6mii6EIoRM0zrQyjcuQ+ojmfxjTtE0z9Y8pa62iA/OJ58qjP6j27uyW4kUF4jl/jd6sw==
+  dependencies:
+    "@babel/runtime" "^7.9.2"
+
 regenerate-unicode-properties@^8.2.0:
   version "8.2.0"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz#e5de7111d655e7ba60c057dbe9ff37c87e65cdec"
@@ -9321,6 +9358,11 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
 
+reselect@^4.1.5:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.1.5.tgz#852c361247198da6756d07d9296c2b51eddb79f6"
+  integrity sha512-uVdlz8J7OO+ASpBYoz1Zypgx0KasCY20H+N8JD13oUMtPvSHQuscrHop4KbXrbsBcdB9Ds7lVK7eRkBIfO43vQ==
+
 resolve-cwd@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"