React Immutability-helper - 更新数组中的许多相似对象答案

【问题标题】：React Immutability-helper - update many similar objects in arrayReact Immutability-helper - 更新数组中的许多相似对象
【发布时间】：2018-12-12 19:37:34
【问题描述】：

我在 Redux Store 中有状态，我想将所有 isPlaying 更改为 false。我不知道如何以更好的方式做到这一点。这是我到目前为止所做的。

const INITIAL_STATE = {
  isPlaying: true,
  allLangs: [
        {
          shortName: 'es',
          fullName: "spanish",
          order: 0,
          isPlaying: false
        }, {
          shortName: 'pt',
          fullName: "portuguese",
          order: 0,
          isPlaying: false
        },
        {
          shortName: 'gb',
          fullName: "english",
          order: 0,
          isPlaying: true
        }
      ]
  }

return update(state,
      {
        $merge: {isPlaying: false},
        allLangs: {
          [0]: {
            $merge: {isPlaying: false}
          },
          [1]: {
            $merge: {isPlaying: false}
          },
          [2]: {
            $merge: {isPlaying: false}
          }
        }
      });

所以我的问题是：有什么比单独调用所有索引更好的方法吗？

【问题讨论】：

标签： javascript arrays reactjs redux store

【解决方案1】：

鉴于您当前的数据结构，如果您想将isPlaying 的每个实例都设置为 false，那么您所拥有的是正确的。根据您的用例，以下是一些其他建议：

重置为默认值

假设每当您将 isPlaying 设置为 false 时，游戏就结束了，您将开始新游戏。那么，最简单的做法可能就是直接将状态设置为initialState。

改变数据结构

这取决于您的用例，但我的第一直觉是您的数据结构有重复。你真的可以同时玩英语和西班牙语的游戏吗？如果没有，请考虑执行以下操作：常量 allLangs = { es：{ 全名：“西班牙语”，订单：0， } }

然后，在您的状态下，您将指向活动语言：

const state = {
  isPlaying: false,
  activeLanguage: "es"
}

以这种方式重构为您提供了一个单一的事实来源。

【讨论】：

【解决方案2】：

我建议您将“allLangs”数组放在单独的数组变量中，比如说“newAllLangs”并使用 map() 更改“isPlaying”，并在最后设置这个“newAllLangs”状态。像这样。

我正在考虑您正在 userAction.js 中进行此操作。因此，假设您通过 mapStateToProps 获得了 allLangs，并使用 mapDispatchToProps 将此数据发送到 userAction.js。在 userAction.js 中，您可以操纵 allLangs 并将它们发送回减速器。 reducer 将根据您从 userAction 发送的内容更新存储。

如果您想要更多曝光，这是理论上的部分。你可以做一个小提琴，可以在这里分享。

【讨论】：