NGXS：我们可以将一个对象从数组中拆分成一个子状态吗？

Question

我的顶级状态模型如下所示：

{
    listOfItems: [],    // Item[]
    selections: {
        itemId: 0
    }
}

商品列表可能包含 10 种不同的购物商品。 当用户点击一个项目时，它会更新选择，我的@Selector 将重新运行。

操作：设置项目选择

  @Action(Item.Select)
  setState(
    { setState }: StateContext<ItemsModel>,
    { itemId }: Item.Select
  ) {
    setState(patch({ selections: patch({ itemId }) }));
  }

选择器：选择当前项目

@Selector()
static getSelectedItem(state: ItemModel): Item {
    return state.itemList.find(i => i.itemId === state.selections.itemId);
}

问题是：我要对所选项目执行多达 20 个操作。这导致：

1. 大量 .find() 查找以在原始数组中查找项目（选择器和操作）
2. 在listOfItems 上执行的操作与在特定项目上执行的操作位于同一位置

我想：保持数组和选择在这个状态，但是把“被选中的项”分离成一个新的子状态，其中子状态的模型可以只是项目类型。这样，我可以将 Item 上的所有操作封装在与 Items[] 数组上的操作不同的位置。

我不确定如何使它们保持同步。当父项中的选择 itemId 更改时，我需要保持“selectedItem”状态为最新。我还需要确保对 selectedItem 的任何突变都反映在父级的原始数组中。

Answer 1

这似乎更像是您尝试表示应用程序状态的基本问题。您是否考虑过规范您的项目列表？或者至少使用键/值查找对象而不是数组？您不需要使用 .find() 进行查找，并且可以通过您感兴趣的唯一 ID 访问对象的键。如果有任何帮助，请告诉我！