JS Built-ins
← redux-legacy4 / 22
redux-legacyreducerbeginner

Reducer with Payload

📖 Usage Example
function reducer(state = 0, action) {
  switch (action.type) {
    case 'ADD': return state + action.payload
    case 'SUBTRACT': return state - action.payload
    default: return state
  }
}
reducer(10, { type: 'ADD', payload: 5 })      // → 15
reducer(10, { type: 'SUBTRACT', payload: 3 }) // → 7

Using action.payload lets you pass dynamic values without creating a separate action type for every possible amount.

Reducer with Payload

Actions can carry extra data in a payload property. The reducer reads action.payload to perform dynamic updates:

{ type: 'ADD', payload: 5 }

This lets you dispatch one action type with different values rather than hard-coding the delta.

Challenge: Implement reducer(state = 0, action) that handles:

  • 'ADD' → returns state + action.payload
  • 'SUBTRACT' → returns state - action.payload
💡 Hints (2)
  • • Access the payload with `action.payload` inside the case body.
  • • The payload convention is widely adopted in Redux — it keeps action shapes consistent.