useReducer 的简单用法

2021/12/29

项目里用的太少了,记录个 demo. reducer 中单个的函数可以有多个不同动作. 使用 useReducer 还能给那些会触发深更新的组件做性能优化,因为你可以向子组件传递 dispatch 而不是回调函数.

# 使用步骤

  1. 定义初始值 initialState
  2. 定义 reducer(state, action),其中 state 即是要管理同步的状态,action 接收 type 和 payload
  3. 使用:const [state, dispatch] = useReducer(reducer, initialState); // 通过 dispatch 触发 reducer,可以传参 payload
import { useReducer } from "react";

interface IState {
	count: number;
}

interface IAction {
	type: "add" | "subtract";
	payload: number;
}

const initialState: IState = { count: 0 };

const reducer = (state: IState, action: IAction) => {
	switch (action.type) {
		case "add":
			return { count: state.count + action.payload };
		case "subtract":
			return { count: state.count - action.payload };
		default:
			throw new Error("Illegal operation in reducer.");
	}
};

function Counter() {
	const [state, dispatch] = useReducer(reducer, initialState);
	return (
		<>
			<h1>Hello , My name is 19Qingfeng.</h1>
			<p>Counter: {state.count}</p>
			<p>
				<button onClick={() => dispatch({ type: "add", payload: 1 })}>
					add 1!
				</button>
			</p>
			<p>
				<button
					onClick={() => dispatch({ type: "subtract", payload: 1 })}
				>
					subtract 1!
				</button>
			</p>
		</>
	);
}

export default Counter;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
上次更新: 12/30/2021