zhangjiming
5 months ago
6 changed files with 183 additions and 3 deletions
-
95package-lock.json
-
2package.json
-
6src/index.tsx
-
31src/pages/measure/components/MeasureDetail.tsx
-
34src/store/features/counterSlice.ts
-
14src/store/index.ts
@ -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> |
|||
); |
|||
} |
|||
@ -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; |
|||
@ -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; |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue