JS Built-ins
← redux-legacy7 / 22
redux-legacyreducerintermediate

Nested Object State

📖 Usage Example
function reducer(state = { user: { name: '', age: 0 } }, action) {
  switch (action.type) {
    case 'SET_NAME':
      return { ...state, user: { ...state.user, name: action.payload } }
    default: return state
  }
}
reducer(undefined, { type: 'SET_NAME', payload: 'Alice' })
// → { user: { name: 'Alice', age: 0 } }

Spread each level of nesting to produce a completely new object tree without mutating any existing reference.

Nested Object State

Updating nested state immutably requires spreading each level of the object:

case 'SET_NAME':
  return { ...state, user: { ...state.user, name: action.payload } }

First spread the root state to preserve other top-level keys, then spread the nested object to preserve its other keys, finally override only the changed property.

Challenge: Implement reducer with default state { user: { name: '', age: 0 } } that handles 'SET_NAME' and 'SET_AGE'.

💡 Hints (2)
  • • You must spread at every level: `{ ...state, user: { ...state.user, name: ... } }`.
  • • Forgetting to spread an inner object will mutate the original — always create a new object at each level you change.