添加redux-toolkit

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@babel/core": "^7.16.0",
         "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
+        "@reduxjs/toolkit": "^2.6.0",
         "@svgr/webpack": "^5.5.0",
         "@testing-library/dom": "^10.4.0",
         "@testing-library/jest-dom": "^6.6.3",
@@ -57,6 +58,7 @@
         "react-app-polyfill": "^3.0.0",
         "react-dev-utils": "^12.0.1",
         "react-dom": "^18.3.1",
+        "react-redux": "^9.2.0",
         "react-refresh": "^0.11.0",
         "react-router": "^6.30.0",
         "react-router-dom": "^6.30.0",
@@ -3735,6 +3737,40 @@
         "react-dom": ">=16.9.0"
       }
     },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmmirror.com/@reduxjs/toolkit/-/toolkit-2.6.0.tgz",
+      "integrity": "sha512-mWJCYpewLRyTuuzRSEC/IwIBBkYg2dKtQas8mty5MaV2iXzcmicS3gW554FDeOvLnY3x13NIk8MB1e8wHO7rqQ==",
+      "license": "MIT",
+      "dependencies": {
+        "immer": "^10.0.3",
+        "redux": "^5.0.1",
+        "redux-thunk": "^3.1.0",
+        "reselect": "^5.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
+        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@reduxjs/toolkit/node_modules/immer": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmmirror.com/immer/-/immer-10.1.1.tgz",
+      "integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
     "node_modules/@remix-run/router": {
       "version": "1.23.0",
       "resolved": "https://registry.npmmirror.com/@remix-run/router/-/router-1.23.0.tgz",
@@ -4719,6 +4755,12 @@
       "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
       "license": "MIT"
     },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmmirror.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
+      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
+      "license": "MIT"
+    },
     "node_modules/@types/ws": {
       "version": "8.5.14",
       "resolved": "https://registry.npmmirror.com/@types/ws/-/ws-8.5.14.tgz",
@@ -15490,6 +15532,29 @@
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "license": "MIT"
     },
+    "node_modules/react-redux": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmmirror.com/react-redux/-/react-redux-9.2.0.tgz",
+      "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.6",
+        "use-sync-external-store": "^1.4.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25 || ^19",
+        "react": "^18.0 || ^19",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmmirror.com/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -15591,6 +15656,21 @@
         "node": ">=8"
       }
     },
+    "node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmmirror.com/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
+      "license": "MIT"
+    },
+    "node_modules/redux-thunk": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/redux-thunk/-/redux-thunk-3.1.0.tgz",
+      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "redux": "^5.0.0"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.10",
       "resolved": "https://registry.npmmirror.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
@@ -15765,6 +15845,12 @@
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "license": "MIT"
     },
+    "node_modules/reselect": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmmirror.com/reselect/-/reselect-5.1.1.tgz",
+      "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
+      "license": "MIT"
+    },
     "node_modules/resize-observer-polyfill": {
       "version": "1.5.1",
       "resolved": "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
@@ -18172,6 +18258,15 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/use-sync-external-store/-/use-sync-external-store-1.4.0.tgz",
+      "integrity": "sha512-9WXSPC5fMv61vaupRkCKCxsPxBocVnwakBEkMIHHpkTTg6icbJtg6jzgtLDm4bl3cSHAca52rYWih0k4K3PfHw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/util-deprecate/-/util-deprecate-1.0.2.tgz",

package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@babel/core": "^7.16.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
+    "@reduxjs/toolkit": "^2.6.0",
     "@svgr/webpack": "^5.5.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
@@ -52,6 +53,7 @@
     "react-app-polyfill": "^3.0.0",
     "react-dev-utils": "^12.0.1",
     "react-dom": "^18.3.1",
+    "react-redux": "^9.2.0",
     "react-refresh": "^0.11.0",
     "react-router": "^6.30.0",
     "react-router-dom": "^6.30.0",

src/index.tsx

@@ -10,6 +10,10 @@ import MeasureAction from "./pages/measure/components/MeasureAction";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 
+// redux toolkit
+import { Provider } from "react-redux";
+import store from "./store/index";
+
 const router = createBrowserRouter([
 	{
 		path: "/",
@@ -44,7 +48,9 @@ const router = createBrowserRouter([
 const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
 root.render(
 	// <React.StrictMode>
+	<Provider store={store}>
 		<RouterProvider router={router} />
+	</Provider>
 	// </React.StrictMode>
 );
 

src/pages/measure/components/MeasureDetail.tsx

@@ -1,3 +1,32 @@
+// 引入相关的hooks
+import { useSelector, useDispatch } from "react-redux";
+// 引入对应的方法
+import { increment, decrement } from "../../../store/features/counterSlice";
+
 export default function MeasureDetail() {
-    return <div>Detail</div>
+	// 通过useSelector直接拿到store中定义的value
+    //@ts-ignore
+	const { value } = useSelector(store => store.counter);
+	// 通过useDispatch 派发事件
+	const dispatch = useDispatch();
+
+	return (
+		<div>
+			<p>{value}</p>
+
+			<button className="px-4 py-2 border"
+				onClick={() => {
+					dispatch(increment());
+				}}>
+				加
+			</button>
+
+			<button className="px-4 py-2 border"
+				onClick={() => {
+					dispatch(decrement());
+				}}>
+				减
+			</button>
+		</div>
+	);
 }

src/store/features/counterSlice.ts

@@ -0,0 +1,34 @@
+// counterSlice.ts 文件
+
+import { createSlice } from "@reduxjs/toolkit";
+
+export interface CounterState {
+	value: number;
+	title: string;
+}
+const initialState: CounterState = {
+	value: 0,
+	title: "redux toolkit pre",
+};
+
+// 创建一个 Slice
+export const counterSlice = createSlice({
+	name: "counter",
+	initialState,
+	// 定义 reducers 并生成关联的操作
+	reducers: {
+		// 定义一个加的方法
+		increment: state => {
+			state.value += 1;
+		},
+		// 定义一个减的方法
+		decrement: state => {
+			state.value -= 1;
+		},
+	},
+});
+// 导出加减的方法
+export const { increment, decrement } = counterSlice.actions;
+
+// 默认导出
+export default counterSlice.reducer;

src/store/index.ts

@@ -0,0 +1,14 @@
+// index.ts 文件
+
+import { configureStore } from "@reduxjs/toolkit";
+import counterSlice from "./features/counterSlice";
+
+// configureStore创建一个redux数据
+const store = configureStore({
+	// 合并多个Slice
+	reducer: {
+		counter: counterSlice,
+	},
+});
+
+export default store;