0

假设我有一个产品列表，type当用户type从下拉列表中选择不同时可以过滤这些产品（用户也可以设置其他过滤器，但它们与此示例无关）。

我的状态 A 包含当前过滤的产品。状态 B 保存当前选择的类型。

当用户更改类型时，我希望它也更新当前过滤的产品。

这样做的正确方法是什么？

  • 每当设置状态 B 时，我都可以从状态 B 调用对状态 A 的“设置”操作
  • 当用户设置状态 B 时，我可以在状态 A 和状态 B 上调用“设置”操作
  • 我可以在状态 A 中收听状态 B 并在状态 B 更改时更新状态 A
  • 我也可以在状态 A 中使用类型，但我也将类型用于其他单独的状态以用于其他功能
4

1 回答 1

1

假设您不想/不能type在状态 A 上选择值，我建议Selector在状态 A 上选择取决于状态 B 值的值。

在状态 A：

@Selector([StateB])
static filterProducts(stateA: StateAModel, stateB: StateBModel) { 
  return stateA.products.filter(p => p.type === stateB.type);
}

每当 stateB 更改（或当前 NGXS 版本中默认为 state A）时，都会重新评估这点。进一步改进的方法是在状态 B 上使用类型选择器。

在状态 B：

static @Selector()
selectedType(state: StateBModel) { 
  return state.type;
}

然后在状态 A 中使用该选择器：

@Selector([StateB.selectedType])
static filterProducts(stateA: StateAModel, selectedType: any) { 
  return stateA.products.filter(p => p.type === selectedType);
}

这样，选择器将在状态更改时触发，您无需添加进一步的操作。

于 2020-08-04T06:02:55.403 回答