Action Design
Last updated: 2026-11-02
Action Design Action Design
An action is a plain object describing what happened: its type is the identity, usually an upper-case constant, and its payload carries the data. Good action design turns the reducer into something as readable as a switch directory, and it makes the flow of state traceable and replayable in the DevTools. Because actions are plain data, they survive serialization, which is exactly what makes logging, debugging and time-travel possible.
| Group | Effects & Performance |
|---|---|
| Kind | Pattern |
ℹ️ Info The editor transpiles JSX to JavaScript and renders the real UI in a sandbox; components mount automatically — no manual render call needed.
📝 Syntax
// { type: 'todo/added', payload: 'buy milk' }
const addTodo = text => ({ type: 'todo/added', payload: text })
const toggleTodo = id => ({ type: 'todo/toggled', payload: id })
dispatch(addTodo('buy milk')) // the action creator builds the objectReturns：No return value; this entry describes an encoding pattern rather than a function.
▶ Example
The example runs out of the box: it auto-renders when expanded, and edits take effect instantly.
Output：
Type some text and click "Add" to create a todo; clicking an item toggles its done state (with a line through it) — every change is driven by one of the two actions, added and toggled.💡 Key Points
🏷️ More Effects & Performance
💡 Related Cases
📚 Related Tutorials
❓ FAQ
