在Reducer中使用传播语法

Question

I am trying to use the spread syntax to update the state inside the reducer

The state consists of an object, and the object has an array,

I would like to update all properties in the object, except for the array, which I would like to add the next state elements at the end. For example,

For example, if the state is

{
  id: 4,
  amount: 10,
  arr: [
    name: "peter",
    name: "john"
  ]
}

and the action

{
  id: 7,
  amount: 7,
  arr: [
    name: "sally",
    name: "maria"
  ]
}

I would like to get as a result of using the spread syntax

{
  id: 7,
  amount: 7,
  arr: [
    name: "peter",
    name: "john",
    name: "sally",
    name: "maria"
  ]
}

taking the id and amount of the action, and concatenating the array

Thank you

Answer 1

Simply keep spreading props.

1. spread your current state
2. spread action's payload
3. change properties as needed

 const INITIAL_STATE = { id: 4, amount: 10, arr: [ { name: "peter" }, { name: "john" }, ], } function reducer(state = INITIAL_STATE, action) { switch (action.type) { default: return state case 'ANY_ACTION': return { ...state, ...action.payload, arr: [ ...(state.arr || []), ...action.payload.arr, ] } } } const action = { type: 'ANY_ACTION', payload: { id: 7, amount: 7, arr: [ { name: "sally" }, { name: "maria" }, ] } } const state = reducer(undefined, action) console.log(state) 

Answer 2

First of all your structure is invalid, the correct structure would look like

{
  id: 4,
  amount: 10
  data: [
    {name: "peter"},
    {name: "john"}
  ]
}

and then you could use spread operator to update state assuming action.payload to be

{
  id: 7,
  amount: 7
  data: [
    {name: "sally"},
    {name: "maria"}
  ]
}

like

case 'WHATEVER_ACTION': 
   return {
        ...state,
        id: action.payload.id,
        amount: action.payload.amount,
        data: [...state.data, ...action.payload.data]
   }

Check the documentation of Spread syntax to understand its usage more