以类似通量的方式更新数组状态答案

【问题标题】：update array state in flux-like以类似通量的方式更新数组状态
【发布时间】：2019-08-03 15:24:25
【问题描述】：

当我使用像 Vuex 或 Redux 这样的 Flux-like 时。我有一个关于列表状态更新的问题。

我的列表数据处于不断变化的状态。

// state.js 

{
  itemById: {},
}

我在列表组件中有项目的 id 数组。

// listComponent.js

{
  data: {
    itemIds: [],
    items: data.itemIds.map(id => state.itemById[id]),
  };
}

现在我在其他组件中添加一个项目。

// otherComponent.js

  addItem(newItem) {
    store.dispatch(newItem);
  }

那么itemById 状态有newItem，但itemIds 没有newItem 的id。

如果将itemIds 移动到状态。当listComponent 销毁并重新创建时，itemIds 仍然存在，但我不想要这个。

我应该怎么做才能简单地更新itemIds？

【问题讨论】：

标签： javascript redux vuex flux

【解决方案1】：

您的代码的一个问题是您有 2 个相同数据的副本：一个处于状态，一个处于 data 的 listComponent 中。假设listComponent 的数据是从 state 的数据发起的，对于 state 中的每一次更新，你都需要捕获并更新本地组件的数据以匹配它们。销毁和重新创建组件并不会直接更新本地数据，也不建议只为本地数据重新创建整个组件，因为这超出了组件生命周期的目的。

除了 Flux，人们使用像 redux 或 vuex 这样的状态管理工具的原因之一是因为单一的事实来源 - 应该有一个全局状态副本，任何组件都可以从中读取。要修复您的代码，一种解决方案是将 itemIds 和 items 从 data 移动到 computed 并直接从状态中取出它们。

computed: {
    itemIds() {
        return Object.keys(state.itemByIds);
    },
    items() {
        return Object.values(state.itemByIds);
    }
}

【讨论】：

对不起，我没有很好地描述我的问题。我有 2 个副本的原因是我在两个组件中使用了相同项目的不同部分，例如 listComponent1 listComponent2，但我不能自己过滤项目。所以我在不同的组件中创建了不同的itemIds。
@Senasiko 即便如此，这并不意味着您应该创建原始状态的副本 - 您必须观察全局状态，例如在添加新状态items 之后，让listComponent 检测全局状态的更新并相应地更新自己的itemIds，并且使用itemIds，您仍然可以正确计算items，从而减少一部分副本。但话又说回来，你应该争取的是一种过滤和计算正确itemIds和items的方法。
@Senasiko 如果您仍然坚持过滤逻辑，您可以更新您的问题或创建一个新问题 - 我会看看。

【解决方案2】：

补充@blaz 答案，如果您使用的是redux，则在您的listComponent.js 中，您必须使用react-redux 库中的connect 函数。它将提供从您的状态加载数据并将其作为道具注入组件中的可能性。

const mapStateToProps = (state) => {
  const itemIds = Object.keys(state.itemById);
  const items = Object.values(state.itemById);
  return { itemIds, items };
};

export default connect(mapStateToProps)(ListComponent);

【讨论】：