All 5 useReducer & Complex State Logic questions
More in useReducer & Complex State Logic
When should you choose useReducer over useState for managing a component's state? What is the basic structure of a reducer function used with the useReducer hook? How would you manage a multi step form's state using useReducer instead of several separate useState calls? How would you combine useReducer with the Context API to share complex state across many components?
Advertisement
Back to results for “Design Patterns in React”
React › useReducer & Complex State Logic

How do you pass extra data along with an action when using useReducer?

Intermediate

Answer

An action object can include any additional properties beyond just its type, commonly called a payload, letting the reducer know exactly what data it needs to correctly compute the new state for that specific action.
function reducer(state, action) {
  switch (action.type) {
    case 'addItem':
      return { items: [...state.items, action.payload] };
    default:
      return state;
  }
}

dispatch({ type: 'addItem', payload: { id: 1, name: 'Apple' } });
Real-world example A shopping cart reducer receives the specific item being added as a payload inside the dispatched action, letting it correctly add exactly that item to the existing list of cart items.

Common follow-ups: Is there a required naming convention for the extra data included in an action?;How would you dispatch multiple different pieces of data together in a single action?

State Management;Design Patterns in React
All 5 useReducer & Complex State Logic questions