How can I update only part of the state

Question

Here is the State object:

const initialState = {
  data: {
    user: '',
    token: '',
  }
}

Reducer:

case 'DO_SOMETHING':
return {...state, data: action.payload }

If I soft copy the state as shown above, I will overwrite the entire data part of the state. How can I update only the user with the given payload without overwriting the token ?

Answer 1

If the payload is just the user , then simply use the same destructuring pattern you used for the state object in general:

return {
  ...state,
  data: {
    ...state.data,
    user: action.payload
  }
}

This pattern can be nested as much as you like, so you can have large structured state objects and just pass around the fields you want in the payloads.

Answer 2

Try this, (considering action.payload is the entire data object)

case 'DO_SOMETHING':
return {...state, data: { ...state.data, user: action.payload.user } }

Answer 3

Spread the nested object too:

return {...state, data: {...state.data, user: action.payload} }