Question

当我使用Vuex或Redux之类的助焊剂时。我有一个有关列表状态更新的问题。

我的列表数据处于流通状态。

// 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？

Answer 1

您的代码有一个问题，就是您有两个相同数据的副本：一个处于状态，一个在data的{{1}}中。假设listComponent的数据是从状态的数据中初始化的，那么对于状态中的每个更新，您都需要捕获并更新本地组件的数据以使其匹配。销毁和重新创建组件不会直接更新本地数据，并且不建议仅为本地数据重新创建整个组件，因为它超过了组件生命周期的目的。

撇开通量，人们使用状态管理工具（例如redux或vuex）的原因之一是由于单一的事实来源-应该有一个全局状态的副本，任何组件都可以从中读取。要修复您的代码，一种解决方案是将listComponent和itemIds从items移到data并直接使其脱离状态。

computed

Answer 2

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

react-redux

更新类状态的数组状态

2 个答案: