Javascript 如何在redux reducer中的对象嵌套数组中添加项

以下是我的初始状态示例：

let initialState = {
    data: {
        name: 'john',
          books: [
              {
                  name: 'a',
                  price: 220
              }
          ]
    }
}

如何将新的图书项目添加到图书中

我已经试过了

return {
        ...state,
        data :{
          ...state.data,
          books:{
              ...state.data.books,
              name : state.data.books.concat(action.payload.item.name),
              price : state.data.books.concat(action.payload.item.price)
          }
      }
      };

有什么想法吗

---

重要提示：我不想删除书籍中已经存在的项目，我想添加一个具有操作有效负载的新项目

您遗漏了一些大括号，尤其是，

书籍

是数组，您正在插入新对象

return {
        ...state,
        data: {
          ...state.data,
          books: [
              ...state.data.books,
              {
                  name: action.payload.item.name,
                  price: action.payload.item.price
              }
          ]
      }
};

---

首先，

books

是数组。其次，如果只想向数组中添加一个新项，可以使用数组扩展运算符

books:state.data.books.concat（action.payload.item）

也可以工作

return {
  ...state,
  data: {
    ...state.data,
    books: [
      ...state.data.books,
      action.payload.item
    ]
  }
};

---

让我们发明方便的工具，让我们的工作更轻松-

const update=（key，{[key]：value，…state}，f）=>
（{…状态，[键]：f（值）}）
常量初始状态=
{数据：
{姓名：“约翰”
，书籍：[{名称：“a”，价格：20}]
}
}
常数有效载荷=
{项目：{名称：“b”，价格：30}
康斯特下州=
更新（'data'，initState，x=>
更新（'books'，x，arr=>
[…arr，payload.item]
)
)
console.log（initState）
log（nextState）

答案很简单看看这个

const book = {
            name : action.payload.item.name,
            price : action.payload.item.price
           };
return {
    ...state,
    data :{
      ...state.data,
      books: state.data.books.concat(book)              
      }      
};

您可以在这里找到不可变的更新模式

---

为什么要将书籍从数组切换到对象？你希望名称和价格是

名称：'aaa，aaa'

像这样吗？在这种情况下

name

和

price

将是数组，但它们是字符串。我编辑了它，我想这是作者想要完成的