Electrolux_blogAction 和 Action Creator
Action 是描述「发生了什么」的普通对象；Reducer 根据 action.type 决定如何改 state。Action Creator 只是生成 action 的函数，不进入 Redux 核心特殊处理。
1. Action 形状
| 字段 | 要求 |
|---|---|
type | 必填，字符串（可约定常量） |
| 其它 | 可选 payload、meta、error 等约定 |
必须是 plain object（可序列化、可 DevTools）；函数 action 由 thunk 等 middleware 消化，不是 reducer 能吃的。
2. 设计原则
- 语义化 type：
domain/event风格，避免巨型 switch。 - 最小 payload：只带 reducer 需要的字段。
- 同步事实：「请求已发出」与「数据已到达」分 action（配合异步 middleware）。
3. Action Creator
text
increment() => ({ type: 'counter/increment' })收益：复用、易测、TS 推断（RTK createSlice 自动生成）。
bindActionCreators：批量绑定 dispatch，常用于 class 组件或传回调；Hooks 时代更常直接 dispatch(actionCreator())。
4. 异步 Action
核心 不 支持异步 reducer；异步模式：
| 模式 | 做法 |
|---|---|
| Thunk | dispatch(async (dispatch, getState) => { ... }) |
| Saga | generator 监听 action |
| RTK Query | 缓存请求生命周期 |
典型序列：pending → fulfilled / rejected 三个 type。
5. 组织方式
- 按 slice：与
combineReducers的 key 对齐（RTK 默认）。 - 常量文件：
types.js导出 type 字符串防拼写错误。 - 避免：一个 reducer 处理上百个无关 type。
6. TypeScript
Redux 5 改进 Action、PayloadAction 等；RTK 的 createAction / createSlice 提供类型安全 dispatch。
7. 常见错误
| 错误 | 正确 |
|---|---|
dispatch 非对象 | 保证 plain object 或走 thunk |
| type 拼写不一致 | 常量 / slice.name 前缀 |
| 在 action 里改 state | 只在 reducer 里改 |
8. 总结
Action = 事件信封；数据流方向 UI → dispatch → reducer。Creator 与 bind 都是语法糖，不改变 Store 内核。