如何在 Redux 中向数组中添加项目？答案

【问题标题】：How to add items to an array in Redux?如何在 Redux 中向数组中添加项目？
【发布时间】：2017-10-28 23:27:36
【问题描述】：

我正在构建一个 Electron 应用程序，并尝试在每个页面上保留一组图像，因此如果删除该页面，我可以轻松地从文件系统中删除所有关联的图像。

我现在拥有的：

const initialState = [{
  uuid: '65ec81f5-a783-4abd-bd0d-1451adda58c6',
  imageUUIDs: []
}];

const actionsMap = {
   [ActionTypes.ADD_IMAGE_TO_PAGE](state, action) {
        const pageUUID = action.pageUUID;
        const imgUUID = action.imgUUID;
        return state.map(page =>
          (page.uuid === pageUUID ?
            Object.assign({}, page, {
              imageUUIDs: page.imageUUIDs.splice(0, 0, imgUUID),
            }) : page)
        );
  },

};

这最初似乎在运行时查看时有效，但完成后我最终得到一个空数组。维护这样的列表的正确方法是什么？

【问题讨论】：

您想将元素添加到imageUUIDs 数组吗？你试过push方法吗？
如果您尝试将项目添加到数组中，您可能希望使用Array.prototype.concat 而不是Array.prototype.splice。 concat 将返回一个新数组，而 splice 修改原始数组。意思是，page.imageUUIDs.splice(0, 0, imgUUID) 正在修改原始数组，但不返回数组，这是您所期望的。如果您使用Array.prototype.push，您将再次修改原始数组。这意味着您需要创建对该新数组的引用并将其传递给Object.assign。
亚当这就是答案。非常感谢！如果您将此作为答案而不是评论提供，我会将其标记为答案。

标签： javascript arrays ecmascript-6 redux

【解决方案1】：

使用Array.prototype.concat 代替Array.prototype.splice。 Array.prototype.concat 返回一个新数组，而 Array.prototype.splice 修改原始数组但不返回新数组，这不是您所期望的。

【讨论】：