Why use the spread operator when returning a state object in React

Viewed 27

I am composing a reducer function as follows, following a textbook:

const appStateReducer = (state: AppState, action: Action): AppState => {
   switch (action.type) {
       case "ADD_LIST": {
           // Placeholder
           return {
               ...state,
               lists: [
                   ...state.lists,
                   {id: randomUUID(), text: action.payload, tasks: []}
               ]
           }
       }
       case "ADD_TASK": {
           const targetLaneIndex = findItemById(
               state.lists,
               action.payload.taskId
           )
           state.lists[targetLaneIndex].tasks.push({
               id: randomUUID(), text: action.payload.text
           })
           return {...state}
       }
          default:
           return state
   }
}

The textbook suggests that I return {...state} for my "ADD_TASK" case instead of simply returning state but does not elaborate. Why is this? I would presume that after I push the new task to the array within the state object, I could just return it directly

0 Answers
Related