From 4174659cee670d7ad61a333287be6430738bcc8e Mon Sep 17 00:00:00 2001 From: zhangjiming Date: Wed, 5 Mar 2025 10:19:36 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0redux-toolkit?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 95 ++++++++++++++++++++++++++ package.json | 2 + src/index.tsx | 8 ++- src/pages/measure/components/MeasureDetail.tsx | 33 ++++++++- src/store/features/counterSlice.ts | 34 +++++++++ src/store/index.ts | 14 ++++ 6 files changed, 183 insertions(+), 3 deletions(-) create mode 100644 src/store/features/counterSlice.ts create mode 100644 src/store/index.ts diff --git a/package-lock.json b/package-lock.json index dfde954..50b7c7c 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 04b36b3..6b66f04 100644 --- a/package.json +++ b/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", diff --git a/src/index.tsx b/src/index.tsx index b45b236..a4eb945 100644 --- a/src/index.tsx +++ b/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( // - + + + // ); diff --git a/src/pages/measure/components/MeasureDetail.tsx b/src/pages/measure/components/MeasureDetail.tsx index 2115501..9e6ee2c 100644 --- a/src/pages/measure/components/MeasureDetail.tsx +++ b/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
Detail
-} \ No newline at end of file + // 通过useSelector直接拿到store中定义的value + //@ts-ignore + const { value } = useSelector(store => store.counter); + // 通过useDispatch 派发事件 + const dispatch = useDispatch(); + + return ( +
+

{value}

+ + + + +
+ ); +} diff --git a/src/store/features/counterSlice.ts b/src/store/features/counterSlice.ts new file mode 100644 index 0000000..0ff6067 --- /dev/null +++ b/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; diff --git a/src/store/index.ts b/src/store/index.ts new file mode 100644 index 0000000..9890dcc --- /dev/null +++ b/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;