Action Design 动作设计
最后更新：2026-10-28
Action Design 动作设计
action 是「发生了什么」的描述对象：type 是唯一标识（常用大写常量），payload 携带数据。好的 action 设计让 reducer 像 switch 目录一样可读，也让状态流转在 DevTools 里可追踪、可回放。
| 分组 | 副作用与性能 |
|---|---|
| 类型 | 模式 |
ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。
📝 语法
// { type: 'todo/added', payload: '买牛奶' }
const addTodo = text => ({ type: 'todo/added', payload: text })
const toggleTodo = id => ({ type: 'todo/toggled', payload: id })
dispatch(addTodo('买牛奶')) // action creator 统一生成返回值：无返回值，作为编码模式使用。
▶ 示例
示例可直接运行：展开后自动渲染，编辑代码即时生效。
输出结果：
输入文字点「添加」新增待办；点击条目切换完成态（带删除线）——所有变更都由 added/toggled 两种 action 驱动。💡 要点
💡 提示 action creator（如 addTodo(text)）把 action 结构收口在一处，调用方不必手拼对象。
ℹ️ 说明 type 用「领域/动作」命名（todo/added），在 DevTools 里一眼可读，也方便按前缀过滤。
⚠️ 注意 action 里只放可序列化数据（payload），不要放回调函数或组件实例。
🏷️ 副作用与性能相关
💡 相关案例
更多案例整理中，敬请期待。
📚 相关教程
❓ 常见问题
Q action creator 是必须的吗？
A 不是，直接 dispatch 对象也行；但 action 多、结构复杂时，creator 能统一结构、减少拼写错误。
Q payload 里能放函数吗？
A 不要。action 应是纯数据描述，放函数会破坏可序列化与调试回放能力。
Q action type 要集中定义吗？
A 中小项目可在 reducer 文件顶部集中导出常量；模块化项目按领域就近定义，加前缀防冲突。
