完成编辑的界面

package.json

@@ -5,9 +5,11 @@
   "dependencies": {
     "@craco/craco": "^7.1.0",
     "@material-tailwind/react": "2.0.4",
+    "@reduxjs/toolkit": "^1.9.5",
     "data-struct-js": "^0.0.15",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-redux": "^8.1.2",
     "react-router-dom": "^6.15.0",
     "react-scripts": "5.0.1"
   },

src/App.js

@@ -1,6 +1,7 @@
 import React, {useRef, useState, useEffect, useCallback } from 'react';
 
 import Home from "@/page/Home"
+import Exp from "@/page/Exp"
 import { DefaultSpeedDial } from "@/components/DefaultSpeedDial"
 
 import { DialogDefault } from "@/components/DialogDefault"
@@ -11,12 +12,11 @@ export default function App() {
   const NotFound = () => {
     return <div>你来到了没有知识的荒原</div>
   }
-  const homemodule = useRef(null);
   return (
     <BrowserRouter>
       <Routes>
-        <Route  path="/" element={<Home ref={homemodule} />} />
+        <Route  path="/" element={<Home />} />
-        <Route path="/home" element={<Home />} />
+        <Route path="/home" element={<Exp />} />
         <Route path="/NotFound" element={<NotFound />} />
         {/* <Route path="/about" element={<About />} />
     <Route path="/dashboard" element={<Dashboard />} /> */}

src/components/DefaultSpeedDial.js

@@ -26,9 +26,14 @@ import { useNavigate } from "react-router-dom";
 
 import ReactWebsocket from "@/api/websocket"
 
+import { useSelector, useDispatch } from 'react-redux'
+import { decrement, increment,wolupdata,delitem } from '@/store/reducers/wolSlice'
+
 export function DefaultSpeedDial() {
 
     const socket = new ReactWebsocket()
+    
+    const dispatch = useDispatch()
 
     const navigate = useNavigate()
     /**
@@ -39,6 +44,7 @@ export function DefaultSpeedDial() {
         navigate(path)
     });
 
+    
 
     const [open, setOpen] = React.useState(false);
 
@@ -49,7 +55,7 @@ export function DefaultSpeedDial() {
 
     const AddItemClick = useCallback(() => {
         // socket.sendMessage('add', {name:NameValue,mac:MacValue}, function () { updata() })
-        socket.sendMessage('add', {name:NameValue,mac:MacValue}, function () {  })
+        socket.sendMessage('add', {name:NameValue,mac:MacValue}, function () { socket.sendMessage('getall', '', function (eve) { dispatch(wolupdata(eve.data[0])) }) })
         handleOpen()
         setNameValue('')
         setMacValue('')
@@ -65,10 +71,10 @@ export function DefaultSpeedDial() {
                 </SpeedDialHandler>
                 <SpeedDialContent>
                     <SpeedDialAction>
-                        <HomeIcon onClick={() => handleClick("/home")} className="h-5 w-5" />
+                        <HomeIcon onClick={() => handleClick("/")} className="h-5 w-5" />
                     </SpeedDialAction>
                     <SpeedDialAction>
-                        <CogIcon onClick={() => handleClick("/")} className="h-5 w-5" />
+                        <CogIcon onClick={() => handleClick("/home")} className="h-5 w-5" />
                     </SpeedDialAction>
                     <SpeedDialAction>
                         <Square3Stack3DIcon onClick={handleOpen} className="h-5 w-5" />

src/components/WolItem.js

@@ -1,9 +1,23 @@
 import { Typography, Card, CardBody, CardFooter, Button } from "@material-tailwind/react";
 import ReactWebsocket from "@/api/websocket"
-import React, { useCallback } from 'react';
+import React, { useCallback,useState } from 'react';
+
+
+import {
+  Dialog,
+  DialogHeader,
+  DialogBody,
+  DialogFooter,
+  Input,
+} from "@material-tailwind/react";
+
+import { useSelector, useDispatch } from 'react-redux'
+import { decrement, increment,wolupdata,delitem } from '@/store/reducers/wolSlice'
+
 export default function WolItem(props) {
   const { id, mac, name, updata } = props;
   const socket = new ReactWebsocket()
+  const dispatch = useDispatch()
   function isMACAddress(strMac) {
     var reg = /^([0-9a-fA-F]{2})(([/\s:][0-9a-fA-F]{2}){5})$/;
     if (reg.test(strMac)) {
@@ -20,12 +34,27 @@ export default function WolItem(props) {
     socket.sendMessage('start', {mac}, function () { })
   }, []);
   const deleteItem = useCallback(() => {
-    socket.sendMessage('del', {id}, function () { updata() })
+    // socket.sendMessage('del', {id}, function () { updata() })
+    socket.sendMessage('del', {id}, function () { dispatch(delitem(id));socket.sendMessage('getall', '', function (eve) { dispatch(wolupdata(eve.data[0]));handleOpen() }) })
   }, []);
-  const EdiItem = useCallback(() => {
+
-    socket.sendMessage('del', {id}, function () { updata() })
+  const [open, setOpen] = React.useState(false);
+
+  const handleOpen = () => setOpen(!open);
+
+  const [NameValue, setNameValue] = useState(name);
+  const [MacValue, setMacValue] = useState(mac);
+
+  const openEdi = useCallback(() => {
+    
+    
   }, []);
+    const EdiItem = useCallback(() => {
+    socket.sendMessage('edi', {id:id,'name':NameValue,'mac':MacValue}, function () { socket.sendMessage('getall', '', function (eve) { dispatch(wolupdata(eve.data[0]));handleOpen() }) })
+    
+  });
   return (
+    <>
     <div className="p-6">
       <Card className="mt-6 w-96 border border-blue-gray-50 py-4 px-5 shadow-xl shadow-transparent transition-all hover:-translate-y-4 hover:border-blue-gray-100/60 hover:shadow-blue-gray-900/5">
         <CardBody>
@@ -38,10 +67,34 @@ export default function WolItem(props) {
         </CardBody>
         <CardFooter className="pt-0 ">
           <Button className="w-50" onClick={handleClickSendMessage}>发送wol数据</Button>
-          <Button className="w-20 mx-1 " color="amber">编辑</Button>
+          <Button className="w-20 mx-1 " onClick={handleOpen} color="amber">编辑</Button>
           <Button className="w-20" onClick={deleteItem} color="amber">删除</Button>
         </CardFooter>
       </Card>
+
+      <Dialog size="xs" open={open} handler={handleOpen}>
+                <DialogHeader>编辑:{name}</DialogHeader>
+                <DialogBody divider>
+                    <div className="flex w-100 flex-col items-end gap-6">
+                        <Input size="md" label="别名" value={NameValue} onChange={e => {setNameValue(e.target.value);}} />
+                        <Input size="md" label="mac地址" value={MacValue} 	onChange={e => {setMacValue(e.target.value);}} />
+                    </div>
+                </DialogBody>
+                <DialogFooter>
+                    <Button
+                        variant="text"
+                        color="red"
+                        onClick={handleOpen}
+                        className="mr-1"
+                    >
+                        <span>取消</span>
+                    </Button>
+                    <Button variant="gradient" color="green" onClick={EdiItem}>
+                        <span>确认</span>
+                    </Button>
+                </DialogFooter>
+            </Dialog>
     </div>
+    </>
   );
 }

src/index.js

@@ -3,13 +3,18 @@ import ReactDOM from "react-dom/client";
 import "./index.css";
 import App from "./App";
 
+import store from './store/store'
+import { Provider } from 'react-redux'
+
 import { ThemeProvider } from "@material-tailwind/react";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
     <ThemeProvider>
+    <Provider store={store}>
       <App />
+    </Provider>
     </ThemeProvider>
   </React.StrictMode>,
 );

src/page/Exp.js

@@ -0,0 +1,28 @@
+import React from 'react'
+import { useSelector, useDispatch } from 'react-redux'
+import { decrement, increment } from '@/store/reducers/counterSlice'
+ 
+export default function Exp() {
+  const count = useSelector(state => state.counter.value)
+  const dispatch = useDispatch()
+ 
+  return (
+    <div>
+      <div>
+        <button
+          aria-label="Increment value"
+          onClick={() => dispatch(increment())}
+        >
+          Increment
+        </button>
+        <span>{count}</span>
+        <button
+          aria-label="Decrement value"
+          onClick={() => dispatch(decrement())}
+        >
+          Decrement
+        </button>
+      </div>
+    </div>
+  )
+}

src/page/Home.js

@@ -1,22 +1,30 @@
 import WolItem from "@/components/WolItem"
 import ReactWebsocket from "@/api/websocket"
 
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback ,forwardRef} from 'react';
+
+
+import { useSelector, useDispatch } from 'react-redux'
+import { decrement, increment,wolupdata } from '@/store/reducers/wolSlice'
+
 
 
 export default function Home() {
+  const count = useSelector(state => state.wol.value)
+  const dispatch = useDispatch()
   const socket = new ReactWebsocket()
-  const [wolarray, setWolarray] = useState([]);
+  // const [wolarray, setWolarray] = useState([]);
   useEffect(() => {
     updata()
   }, []);
   const updata = useCallback(() => {
-    socket.sendMessage('getall', '', function (eve) { setWolarray(eve.data[0]) })
+    // socket.sendMessage('getall', '', function (eve) { setWolarray(eve.data[0]);dispatch(wolupdata(eve.data[0])) })
+    socket.sendMessage('getall', '', function (eve) { dispatch(wolupdata(eve.data[0])) })
   });
   return (
     <div >
       <div className="flex flex-wrap justify-between">
-        {wolarray.map((item, index) => (
+        {count.map((item, index) => (
           <WolItem key={index} mac={item.Mac} name={item.Name} id={item.ID} updata={updata}></WolItem>
         ))}
       </div>

src/store/reducers/counterSlice.js

@@ -0,0 +1,27 @@
+import { createSlice } from '@reduxjs/toolkit'
+ 
+export const counterSlice = createSlice({
+  name: 'counter',
+  initialState: {
+    value: 0
+  },
+  reducers: {
+    increment: state => {
+      // Redux Toolkit 允许我们在 reducers 写 "可变" 逻辑。它
+      // 并不是真正的改变状态值，因为它使用了 Immer 库
+      // 可以检测到“草稿状态“ 的变化并且基于这些变化生产全新的
+      // 不可变的状态
+      state.value += 1
+    },
+    decrement: state => {
+      state.value -= 1
+    },
+    incrementByAmount: (state, action) => {
+      state.value += action.payload
+    }
+  }
+})
+// 每个 case reducer 函数会生成对应的 Action creators
+export const { increment, decrement, incrementByAmount } = counterSlice.actions
+ 
+export default counterSlice.reducer

src/store/reducers/wolSlice.js

@@ -0,0 +1,36 @@
+import { createSlice } from '@reduxjs/toolkit'
+
+export const wolSlice = createSlice({
+    name: 'wol',
+    initialState: {
+        value: []
+    },
+    reducers: {
+        increment: state => {
+            // Redux Toolkit 允许我们在 reducers 写 "可变" 逻辑。它
+            // 并不是真正的改变状态值，因为它使用了 Immer 库
+            // 可以检测到“草稿状态“ 的变化并且基于这些变化生产全新的
+            // 不可变的状态
+            state.value += 1
+        },
+        
+        decrement: (state, action) => {
+            state.value += action.payload
+        },
+        incrementByAmount: (state, action) => {
+            state.value += action.payload
+        },
+        //更新数据
+        wolupdata: (state, action) => {
+            state.value = JSON.parse(JSON.stringify(action.payload))
+        },
+        //删除id
+        delitem: (state, action) => {
+            state.value = state.value.splice(state.value.findIndex(item => item.id === action), 1)
+        }
+    }
+})
+// 每个 case reducer 函数会生成对应的 Action creators
+export const { increment, decrement, incrementByAmount, wolupdata,delitem } = wolSlice.actions
+
+export default wolSlice.reducer

src/store/store.js

@@ -0,0 +1,11 @@
+import { configureStore } from '@reduxjs/toolkit'
+import counterReducer from './reducers/counterSlice'
+
+import wolReducer from './reducers/wolSlice'
+
+export default configureStore({
+  reducer: {
+    counter: counterReducer,
+    wol:wolReducer
+  }
+})

yarn.lock

@@ -1111,7 +1111,7 @@
   resolved "https://registry.npmmirror.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
   integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
-"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.8.4":
+"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
   version "7.22.15"
   resolved "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.22.15.tgz#38f46494ccf6cf020bd4eed7124b425e83e523b8"
   integrity sha512-T0O+aa+4w0u06iNmapipJXMV4HoUir03hpx3/YqXXhu9xim3w+dVphjFWl1OH8NbZHw5Lbm9k45drDkgq2VNNA==
@@ -1783,6 +1783,16 @@
     schema-utils "^3.0.0"
     source-map "^0.7.3"
 
+"@reduxjs/toolkit@^1.9.5":
+  version "1.9.5"
+  resolved "https://registry.npmmirror.com/@reduxjs/toolkit/-/toolkit-1.9.5.tgz#d3987849c24189ca483baa7aa59386c8e52077c4"
+  integrity sha512-Rt97jHmfTeaxL4swLRNPD/zV4OxTes4la07Xc4hetpUW/vc75t5m1ANyxG6ymnEQ2FsLQsoMlYB2vV1sO3m8tQ==
+  dependencies:
+    immer "^9.0.21"
+    redux "^4.2.1"
+    redux-thunk "^2.4.2"
+    reselect "^4.1.8"
+
 "@remix-run/router@1.8.0":
   version "1.8.0"
   resolved "https://registry.npmmirror.com/@remix-run/router/-/router-1.8.0.tgz#e848d2f669f601544df15ce2a313955e4bf0bafc"
@@ -2108,6 +2118,14 @@
   dependencies:
     "@types/node" "*"
 
+"@types/hoist-non-react-statics@^3.3.1":
+  version "3.3.1"
+  resolved "https://registry.npmmirror.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
+  integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
+  dependencies:
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+
 "@types/html-minifier-terser@^6.0.0":
   version "6.1.0"
   resolved "https://registry.npmmirror.com/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#4fc33a00c1d0c16987b1a20cf92d20614c55ac35"
@@ -2179,6 +2197,11 @@
   resolved "https://registry.npmmirror.com/@types/prettier/-/prettier-2.7.3.tgz#3e51a17e291d01d17d3fc61422015a933af7a08f"
   integrity sha512-+68kP9yzs4LMp7VNh8gdzMSPZFL44MLGqiHWvttYJe+6qnuVr4Ek9wSBQoveqY/r+LwjCcU29kNVkidwim+kYA==
 
+"@types/prop-types@*":
+  version "15.7.5"
+  resolved "https://registry.npmmirror.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
+  integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
+
 "@types/q@^1.5.1":
   version "1.5.6"
   resolved "https://registry.npmmirror.com/@types/q/-/q-1.5.6.tgz#a6edffe8283910e46dc7a573621f928e6b47fa56"
@@ -2194,6 +2217,15 @@
   resolved "https://registry.npmmirror.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc"
   integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==
 
+"@types/react@*":
+  version "18.2.21"
+  resolved "https://registry.npmmirror.com/@types/react/-/react-18.2.21.tgz#774c37fd01b522d0b91aed04811b58e4e0514ed9"
+  integrity sha512-neFKG/sBAwGxHgXiIxnbm3/AAVQ/cMRS93hvBpg8xYRbeQSPVABp9U2bRnPf0iI4+Ucdv3plSxKK+3CW2ENJxA==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
 "@types/resolve@1.17.1":
   version "1.17.1"
   resolved "https://registry.npmmirror.com/@types/resolve/-/resolve-1.17.1.tgz#3afd6ad8967c77e4376c598a82ddd58f46ec45d6"
@@ -2206,6 +2238,11 @@
   resolved "https://registry.npmmirror.com/@types/retry/-/retry-0.12.0.tgz#2b35eccfcee7d38cd72ad99232fbd58bffb3c84d"
   integrity sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==
 
+"@types/scheduler@*":
+  version "0.16.3"
+  resolved "https://registry.npmmirror.com/@types/scheduler/-/scheduler-0.16.3.tgz#cef09e3ec9af1d63d2a6cc5b383a737e24e6dcf5"
+  integrity sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==
+
 "@types/semver@^7.3.12":
   version "7.5.1"
   resolved "https://registry.npmmirror.com/@types/semver/-/semver-7.5.1.tgz#0480eeb7221eb9bc398ad7432c9d7e14b1a5a367"
@@ -2252,6 +2289,11 @@
   resolved "https://registry.npmmirror.com/@types/trusted-types/-/trusted-types-2.0.3.tgz#a136f83b0758698df454e328759dbd3d44555311"
   integrity sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g==
 
+"@types/use-sync-external-store@^0.0.3":
+  version "0.0.3"
+  resolved "https://registry.npmmirror.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz#b6725d5f4af24ace33b36fafd295136e75509f43"
+  integrity sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==
+
 "@types/ws@^8.5.5":
   version "8.5.5"
   resolved "https://registry.npmmirror.com/@types/ws/-/ws-8.5.5.tgz#af587964aa06682702ee6dcbc7be41a80e4b28eb"
@@ -3691,6 +3733,11 @@ cssstyle@^2.3.0:
   dependencies:
     cssom "~0.3.6"
 
+csstype@^3.0.2:
+  version "3.1.2"
+  resolved "https://registry.npmmirror.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
+  integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
+
 damerau-levenshtein@^1.0.8:
   version "1.0.8"
   resolved "https://registry.npmmirror.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
@@ -5015,6 +5062,13 @@ hey-listen@^1.0.8:
   resolved "https://registry.npmmirror.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68"
   integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==
 
+hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.npmmirror.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 hoopy@^0.1.4:
   version "0.1.4"
   resolved "https://registry.npmmirror.com/hoopy/-/hoopy-0.1.4.tgz#609207d661100033a9a9402ad3dea677381c1b1d"
@@ -5190,7 +5244,7 @@ ignore@^5.2.0:
   resolved "https://registry.npmmirror.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324"
   integrity sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==
 
-immer@^9.0.7:
+immer@^9.0.21, immer@^9.0.7:
   version "9.0.21"
   resolved "https://registry.npmmirror.com/immer/-/immer-9.0.21.tgz#1e025ea31a40f24fb064f1fef23e931496330176"
   integrity sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==
@@ -7728,7 +7782,7 @@ react-error-overlay@^6.0.11:
   resolved "https://registry.npmmirror.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
   integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
 
-react-is@^16.13.1:
+react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.npmmirror.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -7743,6 +7797,18 @@ react-is@^18.0.0:
   resolved "https://registry.npmmirror.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
+react-redux@^8.1.2:
+  version "8.1.2"
+  resolved "https://registry.npmmirror.com/react-redux/-/react-redux-8.1.2.tgz#9076bbc6b60f746659ad6d51cb05de9c5e1e9188"
+  integrity sha512-xJKYI189VwfsFc4CJvHqHlDrzyFTY/3vZACbE+rr/zQ34Xx1wQfB4OTOSeOSNrF6BDVe8OOdxIrAnMGXA3ggfw==
+  dependencies:
+    "@babel/runtime" "^7.12.1"
+    "@types/hoist-non-react-statics" "^3.3.1"
+    "@types/use-sync-external-store" "^0.0.3"
+    hoist-non-react-statics "^3.3.2"
+    react-is "^18.0.0"
+    use-sync-external-store "^1.0.0"
+
 react-refresh@^0.11.0:
   version "0.11.0"
   resolved "https://registry.npmmirror.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
@@ -7868,6 +7934,18 @@ recursive-readdir@^2.2.2:
   dependencies:
     minimatch "^3.0.5"
 
+redux-thunk@^2.4.2:
+  version "2.4.2"
+  resolved "https://registry.npmmirror.com/redux-thunk/-/redux-thunk-2.4.2.tgz#b9d05d11994b99f7a91ea223e8b04cf0afa5ef3b"
+  integrity sha512-+P3TjtnP0k/FEjcBL5FZpoovtvrTNT/UXd4/sluaSyrURlSlhLSzEdfsTBW7WsKB6yPvgd7q/iZPICFjW4o57Q==
+
+redux@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.npmmirror.com/redux/-/redux-4.2.1.tgz#c08f4306826c49b5e9dc901dee0452ea8fce6197"
+  integrity sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==
+  dependencies:
+    "@babel/runtime" "^7.9.2"
+
 reflect.getprototypeof@^1.0.3:
   version "1.0.4"
   resolved "https://registry.npmmirror.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.4.tgz#aaccbf41aca3821b87bb71d9dcbc7ad0ba50a3f3"
@@ -7973,6 +8051,11 @@ requires-port@^1.0.0:
   resolved "https://registry.npmmirror.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
 
+reselect@^4.1.8:
+  version "4.1.8"
+  resolved "https://registry.npmmirror.com/reselect/-/reselect-4.1.8.tgz#3f5dc671ea168dccdeb3e141236f69f02eaec524"
+  integrity sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ==
+
 resolve-cwd@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmmirror.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"
@@ -9116,6 +9199,11 @@ url-parse@^1.5.3:
     querystringify "^2.1.1"
     requires-port "^1.0.0"
 
+use-sync-external-store@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.npmmirror.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
+  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
+
 util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.npmmirror.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"