A dispatch function is returned by useReducer alongside the current state. Call it with an action when an event occurs; React passes that action and the current state to the reducer, then uses the returned state for the next render. section 3.2.3 section 3.4
Use dispatch to:
- Replace separate state updates with named actions when several state values are interrelated. section 3.5
- Send ordinary JavaScript objects such as { type: "SET_NAME", payload: "Jamal" } to a reducer. section 3.5
- Pass state and dispatch to child components through props when a parent owns the reducer. section 6.3.3 section 6.6
- Include dispatch in an effect dependency array when it arrives as a prop. section 6.3.3
Toggling details in BookablesList
Initialize the reducer with const [state, dispatch] = useReducer(reducer, initialState). A checkbox can dispatch({ type: "TOGGLE_HAS_DETAILS" }); the reducer handles the action, returns updated state, and React calls the component again with the latest state. section 3.2.3
const [state, dispatch] = useReducer(reducer, initialState);
The compact useReducer pattern shows dispatch paired with state and a reducer. section 3.2.3
