diff --git a/src/App.tsx b/src/App.tsx index aae1cac..f9d3a7d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -7,13 +7,13 @@ import { default as AppHeader } from "./components/Header"; import { default as AppFooter } from "./components/Footer"; import SideMenu from "./components/SideMenu"; import { createWebSocket, sharedWsUrl } from "./services/socket"; -import { useDispatch } from "react-redux"; import { updateUser } from "./store/features/contextSlice"; +import { useAppDispatch } from "./utils/hooks"; const { Header, Footer, Sider, Content } = Layout; function App() { const navigate = useNavigate(); - const dispatch = useDispatch(); + const dispatch = useAppDispatch(); useEffect(() => { //连接websocket diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 419fa52..a5e172e 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -10,6 +10,7 @@ import { useState } from "react"; import { Dropdown, MenuProps, message, Button, Popover } from "antd"; import { logout } from "../services/user/user"; import "./bluetooth.scss"; +import { useAppSelector } from "../utils/hooks"; export default function Header() { //获取当前websocet的状态 let wsReadyState = localStorage.getItem('wsReadyState') @@ -28,8 +29,7 @@ export default function Header() { } } - //@ts-ignore - const context = useSelector(store => store.context); + const context = useAppSelector(store => store.context); const [messageApi, contextHolder] = message.useMessage(); const items: MenuProps["items"] = [ diff --git a/src/pages/measure/components/MeasureAction.tsx b/src/pages/measure/components/MeasureAction.tsx index 50a7619..1c34ede 100644 --- a/src/pages/measure/components/MeasureAction.tsx +++ b/src/pages/measure/components/MeasureAction.tsx @@ -1,4 +1,4 @@ -import { Button, Checkbox, CheckboxProps, Switch, RadioChangeEvent, message } from "antd"; +import { Button, Checkbox, CheckboxProps, Switch, message } from "antd"; import { useState, useEffect } from "react"; import { useNavigate } from "react-router"; import { analyzeMeasurement, saveMeasurement, startMeasurement } from "../../../services/measure/analysis"; @@ -7,23 +7,22 @@ import GridLayer from "./graph/GridLayer"; import StandardLayer from "./graph/StandardLayer"; import ResultLayer from "./graph/ResultLayer"; import MarkLayer from "./graph/MarkLayer"; -import { useDispatch, useSelector } from "react-redux"; import { switchMeasureAfterSave } from "../../../store/features/contextSlice"; import { AnalyzeAngle } from "../../../services/measure/type"; import { MeasureState, taskStatusDescMap } from "../../../services/wsTypes"; +import { useAppDispatch, useAppSelector } from "../../../utils/hooks"; const wsClient = createWebSocket(sharedWsUrl); export default function MeasureAction() { - const dispatch = useDispatch(); + const dispatch = useAppDispatch(); const [showGrid, setShowGrid] = useState(true); const [showStandard, setShowStandard] = useState(true); const [showResult, setShowResult] = useState(true); const [showMark, setShowMark] = useState(true); - // @ts-ignore - const afterSave = useSelector(store => store.context.newMeasureAfterSave); + const afterSave = useAppSelector(store => store.context.newMeasureAfterSave); const navigate = useNavigate(); diff --git a/src/pages/measure/components/MeasureConfig.tsx b/src/pages/measure/components/MeasureConfig.tsx index 97ea7d7..d5e55b4 100644 --- a/src/pages/measure/components/MeasureConfig.tsx +++ b/src/pages/measure/components/MeasureConfig.tsx @@ -1,14 +1,14 @@ import { Button, Form, Input, message } from "antd"; import { useEffect } from "react"; -import { useSelector } from "react-redux"; import { useNavigate } from "react-router"; import { createMeasure } from "../../../services/measure/analysis"; +import { useAppSelector } from "../../../utils/hooks"; export default function MeasureConfig() { const navigate = useNavigate(); const [messageApi, contextHolder] = message.useMessage(); - //@ts-ignore - const context = useSelector(store => store.context); + + const context = useAppSelector(store => store.context); const onFinish = (values: any) => { console.log("Received values of form: ", values); createMeasure({ diff --git a/src/pages/measure/components/MeasureDetail.tsx b/src/pages/measure/components/MeasureDetail.tsx index 23797e5..5a4da84 100644 --- a/src/pages/measure/components/MeasureDetail.tsx +++ b/src/pages/measure/components/MeasureDetail.tsx @@ -1,6 +1,3 @@ -// 引入相关的hooks -import { useSelector, useDispatch } from "react-redux"; -// 引入对应的方法 import {getDetailList, delDetail} from '../../../services/measure/analysis' import { useState, useEffect } from 'react' import {message, Button, type TableColumnsType, type TableProps, Modal, Table } from 'antd'; @@ -10,11 +7,6 @@ import type { DetailTable } from "../../../services/measure/type"; import { ExclamationCircleFilled } from '@ant-design/icons'; export default function MeasureDetail() { - // 通过useSelector直接拿到store中定义的value - //@ts-ignore - const { value } = useSelector(store => store.counter); - // 通过useDispatch 派发事件 - const dispatch = useDispatch(); const navigate = useNavigate(); function onToMeasure(){ navigate('/measure/config') diff --git a/src/pages/measure/components/graph/ResultLayer.tsx b/src/pages/measure/components/graph/ResultLayer.tsx index b38cdac..0b523b8 100644 --- a/src/pages/measure/components/graph/ResultLayer.tsx +++ b/src/pages/measure/components/graph/ResultLayer.tsx @@ -1,5 +1,4 @@ -import { useCallback, useEffect, useRef, useState } from "react"; -import points from "../../../../utils/measure.json"; +import { useEffect, useRef } from "react"; import { createWebSocket, sharedWsUrl } from "../../../../services/socket"; const wsClient = createWebSocket(sharedWsUrl); @@ -25,11 +24,11 @@ export default function ResultLayer(props: { const yStepPx = (props.height - props.topPadding - props.bottomPadding) / props.rows; const unitPx = xStepPx / 10; - const pointsPx = points.map(p => ({ x: p.x * unitPx, y: p.y * unitPx + 4 })); // 特意偏移 + // const pointsPx = points.map(p => ({ x: p.x * unitPx, y: p.y * unitPx + 4 })); // 特意偏移 const canvasRef = useRef(null); - const [rtPoints, setRtPoints] = useState<{ x: number; y: number }[]>([]); + // const [rtPoints, setRtPoints] = useState<{ x: number; y: number }[]>([]); // const draw = useCallback( // (ctx: CanvasRenderingContext2D) => { @@ -94,7 +93,7 @@ export default function ResultLayer(props: { }); wsClient.connect(); return () => subscription.unsubscribe(); - }, [rtPoints, unitPx, xEndPx, xStartPx, yStartPx, yStepPx]); + }, [unitPx, xEndPx, xStartPx, yStartPx, yStepPx]); return (
diff --git a/src/store/features/contextSlice.ts b/src/store/features/contextSlice.ts index 62234b6..e3c3d5c 100644 --- a/src/store/features/contextSlice.ts +++ b/src/store/features/contextSlice.ts @@ -1,32 +1,29 @@ // counterSlice.ts 文件 -import { createSlice } from "@reduxjs/toolkit"; +import { createSlice, PayloadAction } from "@reduxjs/toolkit"; import { ContextMessage } from "../../services/wsTypes"; const initialState: ContextMessage["data"] = { loginFlag: false, loginUser: {}, - newMeasureAfterSave: false, }; -// 创建一个 Slice export const contextSlice = createSlice({ name: "context", initialState, - // 定义 reducers 并生成关联的操作 + reducers: { - // 定义一个加的方法 - updateUser: (state, { payload }) => { - state.loginFlag = payload.loginFlag; - state.loginUser = payload.loginUser; + updateUser: (state, action: PayloadAction) => { + state.loginFlag = action.payload.loginFlag; + state.loginUser = action.payload.loginUser; }, - switchMeasureAfterSave: (state, { payload }) => { - state.newMeasureAfterSave = payload; + switchMeasureAfterSave: (state, action: PayloadAction) => { + state.newMeasureAfterSave = action.payload; }, }, }); -// 导出加减的方法 + export const { updateUser, switchMeasureAfterSave } = contextSlice.actions; // 默认导出 diff --git a/src/store/index.ts b/src/store/index.ts index b1bf104..81fcf23 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -14,3 +14,6 @@ const store = configureStore({ }); export default store; + +export type RootState = ReturnType +export type AppDispatch = typeof store.dispatch \ No newline at end of file diff --git a/src/utils/hooks.ts b/src/utils/hooks.ts new file mode 100644 index 0000000..965a9be --- /dev/null +++ b/src/utils/hooks.ts @@ -0,0 +1,6 @@ +import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux' +import type { RootState, AppDispatch } from '../store' + +// 在整个应用程序中使用，而不是简单的 `useDispatch` 和 `useSelector` +export const useAppDispatch: () => AppDispatch = useDispatch +export const useAppSelector: TypedUseSelectorHook = useSelector \ No newline at end of file