An action describes an event or requested state transition. In React's useReducer pattern, dispatch sends an action object to a reducer, which combines it with the current state and returns new state. section 10.2 section 7.1.2
Counter actions
A counter can dispatch { type: "INCREMENT" } or { type: "DECREMENT" }. The reducer matches the type and returns the incremented or decremented state; unknown types leave state unchanged. section 10.2
Use actions to describe distinct updates when state needs controlled, fine-grained changes:
- Represent each task-manager operation with an action such as addTask, editTask, deleteTask, addStep, editStep, or deleteStep. section 13.3
- Keep the update logic in a reducer instead of changing complex state directly through several unrelated setters. section 7.1.2
Listing 10.5 Counter component with reducer
import { useReducer } from "react";
function reducer(state, { type }) { #1
switch (type) {
case "INCREMENT": #2
return state + 1; #2
case "DECREMENT": #2
return state - 1; #2
default:
return state;
}
}
function Counter() {
const [counter, dispatch] = useReducer(reducer, 0); #3
return (
<section>
<h1>Counter: {counter}</h1>
<div>
<button onClick={
() => dispatch({ type: "INCREMENT" }) #4
}>
Increment
</button>
<button onClick={
() => dispatch({ type: "DECREMENT" }) #4
}>
Decrement
</button>
</div>
</section>
);
}
function App() {
return <Counter />;
}
export default App;
The counter listing shows the complete path from button clicks to dispatched action objects, reducer cases, and updated state. section 10.2
