在 Reducer 中使用扩展语法

Question

我正在尝试使用扩展语法来更新 reducer 中的状态

状态由一个对象组成，对象有一个数组，

我想更新对象中的所有属性，数组除外，我想在末尾添加下一个状态元素。例如，

例如，如果状态是

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

和操作

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

我想得到使用传播语法的结果

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

获取动作的 id 和数量，并连接数组

谢谢

Answer 1

首先你的结构是无效的，正确的结构应该是这样的

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

然后你可以使用扩展运算符来更新状态，假设 action.payload 为

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

喜欢

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

查看 Spread syntax 的文档以进一步了解其用法

Answer 2

继续传播道具

传播你现在的状态
传播动作的负载
根据需要更改属性

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)

在 Reducer 中使用扩展语法

Using spread syntax in Reducer

javascript

reactjs

spread-syntax

redux