useReducer不是复杂，而是更清晰、更可预测、更适合中大型项目！
本文通过一个简单的计数器示例，带你从零开始实现 useReducer，并用 TypeScript 实现类型安全，让你彻底理解它的核心思想。
一、为什么不用 useState？
我们先看一个常见的场景：计数器。
这没问题，但如果：
- 需要多个状态（如 count、step、max）
- 需要复杂的逻辑（如限制最大值）
- 需要日志记录或撤销功能
你会发现 useState 很快变得混乱！
二、引入 useReducer：状态管理的“函数式思维”
useReducer 是 React 提供的一个 Hook，用于处理复杂的状态逻辑。
它接收两个参数：
reducer：一个函数，定义状态如何变化initialState：初始状态
返回一个数组：[state, dispatch]
✅ 核心思想：
状态变化 = 函数调用
每次调用dispatch(action)，都会触发reducer计算新状态
三、动手实现：一个完整的计数器
1. 定义类型（TypeScript）
✅ 使用联合类型（Union Types）确保类型安全
2. 编写 reducer 函数
✅ 注意：
reducer必须返回新对象，不能修改原 state
3. 使用 useReducer
四、为什么 useReducer 更好？
表格
| 特性 | useState | useReducer |
|---|---|---|
| 状态更新逻辑 | 分散在组件中 | 集中在 reducer 中 |
| 类型安全 | 弱 | 强（配合 TS） |
| 可测试性 | 差 | 好（reducer 是纯函数） |
| 可组合性 | 差 | 好（可复用） |
✨ useReducer 的优势在于：把“状态变化”变成“函数”，更容易测试和维护。
五、进阶技巧：自定义 Hook 封装
你可以将 useReducer 封装成一个自定义 Hook：
然后在组件中使用：
✅ 更简洁，更易复用！
六、总结
useReducer不是为简单状态设计的，而是为复杂逻辑服务的- 它让状态变化集中、可预测、可测试
- 配合 TypeScript，可以实现极致的类型安全
- 别再用
useState写复杂逻辑了，试试useReducer吧！
