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

Question

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

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

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

操作：设置项目Selection

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

Select或：Select当前项目

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

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

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

我想: 将数组和选择保持在这个状态，但将 "selected item" 分离到一个新的子状态，子状态的模型可以只是项目类型。这样我就可以将 Item 上的所有操作封装在与 Items[] 数组上的操作不同的位置。

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

Answer 1

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

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

NGXS: Can we split out an object from array into a substate?

redux

ngxs