diff --git a/Dashboard/package.json b/Dashboard/package.json index 3f7b359..62ac2f7 100644 --- a/Dashboard/package.json +++ b/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", diff --git a/Dashboard/src/redux/hooks/index.ts b/Dashboard/src/redux/hooks/index.ts new file mode 100644 index 0000000..0e41ad1 --- /dev/null +++ b/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(); +export const useAppSelector: TypedUseSelectorHook = useSelector; diff --git a/Dashboard/src/redux/middlewares/logger.ts b/Dashboard/src/redux/middlewares/logger.ts new file mode 100644 index 0000000..1156b86 --- /dev/null +++ b/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; diff --git a/Dashboard/src/redux/store/index.ts b/Dashboard/src/redux/store/index.ts index b787b2f..0a83a21 100644 --- a/Dashboard/src/redux/store/index.ts +++ b/Dashboard/src/redux/store/index.ts @@ -1,19 +1,15 @@ import thunk from "redux-thunk"; -import { createStore, applyMiddleware } from "redux"; -import { RootAction, RootState } from "typesafe-actions"; -import composeEnhancers from "./utils"; +import { configureStore } from "@reduxjs/toolkit"; import rootReducer from "./root-reducer"; +import logger from "../middlewares/logger"; -const middlewares = [thunk]; +const middlewares = [thunk, logger]; -const enhancer = composeEnhancers(applyMiddleware(...middlewares)); - -const initialState = {}; - -const store = createStore( - rootReducer, - initialState, - enhancer, +const store = configureStore( + { + reducer: rootReducer, + middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(middlewares), + }, ); export default store; diff --git a/Dashboard/src/redux/store/root-action.ts b/Dashboard/src/redux/store/root-action.ts deleted file mode 100644 index 61cfb21..0000000 --- a/Dashboard/src/redux/store/root-action.ts +++ /dev/null @@ -1,7 +0,0 @@ -import * as serialConnectionActions from "../actions/serialConnectionActions"; - -const rootAction = { - serialConnection: serialConnectionActions, -}; - -export default rootAction; diff --git a/Dashboard/src/redux/store/types.d.ts b/Dashboard/src/redux/store/types.d.ts index 7b39a16..77699da 100644 --- a/Dashboard/src/redux/store/types.d.ts +++ b/Dashboard/src/redux/store/types.d.ts @@ -1,19 +1,5 @@ -import { StateType, ActionType } from "typesafe-actions"; -import { ThunkAction } from "redux-thunk"; +import store from "."; import rootReducer from "./root-reducer"; -import rootAction from "./root-action"; -import store from "./index"; -declare module "typesafe-actions" { - export type Store = StateType; - - export type RootState = StateType; - - export type RootAction = ActionType; - - export type ThunkResult = ThunkAction; - - interface Types { - RootAction: RootAction; - } -} +export type RootState = ReturnType; +export type AppDispatch = typeof store.dispatch; diff --git a/Dashboard/src/redux/store/utils.ts b/Dashboard/src/redux/store/utils.ts deleted file mode 100644 index e135785..0000000 --- a/Dashboard/src/redux/store/utils.ts +++ /dev/null @@ -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; diff --git a/Dashboard/tsconfig.json b/Dashboard/tsconfig.json index 86bf925..1a7c46c 100644 --- a/Dashboard/tsconfig.json +++ b/Dashboard/tsconfig.json @@ -3,8 +3,7 @@ "target": "ES2018", "module": "CommonJS", "lib": ["dom", "esnext"], - "declaration": true, - "declarationMap": true, + "declaration": false, "noEmit": false, "jsx": "react", "strict": true, diff --git a/Dashboard/yarn.lock b/Dashboard/yarn.lock index d56d6bc..7617432 100644 --- a/Dashboard/yarn.lock +++ b/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"