Electrolux_blog类型系统设计
Redux 5 在 TypeScript 上补齐 Store、Dispatch、Middleware、Reducer 的泛型关系，使 thunk、slice 与 dispatch 类型可推断。核心仍运行时在 JS；类型在编译期约束用法。
1. Redux 5 相对 4.x
| 改进 | 收益 |
|---|---|
UnknownAction / 更严 action | 减少 any dispatch |
| Middleware 泛型链 | dispatch 知悉 thunk 返回 |
Tuple 等工具类型 | configureStore 推断中间件组合 |
| 与 RTK 2 对齐 | 应用层几乎只写 RTK |
2. 核心类型（概念）
| 类型 | 含义 |
|---|---|
State | 根 state 形状 |
Action / PayloadAction<P> | 最小 { type } 与带 payload |
Reducer<S, A> | 纯函数签名 |
Store<S, A, StateExt> | getState/dispatch/subscribe |
Dispatch<A> | 可 dispatch 的 action 联合 |
Middleware | 三层柯里化签名 |
3. 推断从哪来
- 手写：根 reducer
combineReducers推断State。 - RTK：
configureStore({ reducer })一次推断RootState、AppDispatch。 - 类型导出：
export type RootState = ReturnType<typeof store.getState>模式仍常用。
4. Middleware 类型
目标：dispatch 除普通 action 外，还可 dispatch(thunk)。
实现思路：中间件数组的 Middleware 泛型折叠进 Dispatch，由 RTK 的 configureStore 完成；手写 store 需自行声明 ThunkDispatch 交叉类型。
5. 实践建议
| Do | Don't |
|---|---|
用 RTK createSlice 推断 action | 全库 dispatch<any> |
导出 RootState、AppDispatch | 每个文件重复 infer |
prepare 回调标注 payload | 可序列化 action 里塞 class 实例 |
6. 与 RTK 分工
| 层 | 负责 |
|---|---|
redux | 核心类型、Store API |
@reduxjs/toolkit | createSlice、configureStore、Query 类型 |
读类型源码优先 RTK 的 index.d.ts，再回落 redux。
7. 总结
Redux 5 类型系统服务 「dispatch 与 state 可推断」；工程上几乎总通过 RTK 享受，但理解底层有助于自定义 middleware 与库封装。