更新阵列状态类似于磁通状态

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

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

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

Answer 2

代码的一个问题是，您有2个相同数据的副本：一个状态中的一个，一个在listComponent的data中。假设listComponent的数据是从州的数据启动的，则对于状态中的每个更新，您需要捕获和更新本地组件的数据以匹配它们。破坏和重新创建组件不会直接更新本地数据，因此不建议仅仅为本地数据重新创建整个组件，因为它超越了组件生命周期的目的。

除了

范围之外，人们使用诸如redux或vuex之类的状态管理工具的原因之一是由于单一的真实来源 - 任何组件都可以从中读取一份全球状态的副本。要修复您的代码，一种解决方案是将itemIds和items从data移动到computed，然后直接从状态带走。

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