在Redux中推送新项目之前，请先更新对象数组中的布尔属性

Question

我有一个名为ADD_USER_PICTURE的动作，只要调用该动作，我就只需向数组添加新图片。 但是，有一个小技巧，我添加的这些图片对象具有一些布尔属性，该属性指示Enabled的图片是配置文件的化身。这意味着我需要将最新的picture.isEnabled从true修改为false，以便新的头像成为化身。

这是我的动作

case ADD_USER_PICTURE:
    return {
       ...state,
       userInfo: {
         ...state.userInfo,
         userPictures: [...state.userInfo.userPictures, action.picture]
       }
}

我想我必须添加一个地图并进行迭代，但是通过这样的userPictures进行，但是由于不确定性，我不确定如何使用Redux进行迭代。

我正在考虑这样的事情：

userPictures.map((picture) => {
    if (picture.isAvatar) {
       picture.isEnabled = false;
    }
});

将所有内容置于错误状态会更快，仅此而已，而不是进行搜索。我不想为此创建第二个动作。

有关如何使其适应Redux的帮助吗？

谢谢。

Answer 1

如果您不想创建另一个处理该逻辑的动作，则可以在化简器中简单地执行此操作，尽管我不建议这样做。

但是您的ADD_USER_PICTURE的减速器动作类型案例看起来像这样。

case ADD_USER_PICTURE:

  const { userPictures } = state.userInfo;

  // Map through and set isEnabled to false for other pictures
  let updatedUserPictures = userPictures.map(picture => ({
    ...picture,
    isEnabled: false,
  }));

  // Insert the new profile picture within array, and set isEnabled to true
  updatedUserPictures = [
    ...updatedUserPictures,
    { ...action.pictures, isEnabled: true },
  ];

  return {
    ...state,
    userInfo: {
      ...state.userInfo,
      userPictures: updatedUserPictures,
    },
  };

更新：如果您选择按照我在下面提到的方式来实现它，这就是您的操作的样子：

这是您的组件的外观：