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个操作。结果是：

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

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

我不确定如何使它们保持同步。我需要保持“将selectedItem”状态的最新当选择ITEMID父的变化。我还需要确保对selectedItem的任何变异都反映在父级的原始数组中。

Answer 1

在您试图表示应用程序状态时，这似乎可能是一个更基本的问题。您是否考虑过将项目清单标准化？还是至少使用键/值查找对象而不是数组？您不需要使用.find（）进行查找，就可以通过您感兴趣的唯一ID访问对象的键。让我知道这是否有帮助！

NGXS：我们可以将对象从数组拆分为子状态吗？

1 个答案: