当另一个状态改变时更新状态

Question

假设我有一个列表，当用户从下拉列表中选择其他type时，这些列表可以由type进行过滤（用户也可以设置其他过滤条件，但它们不相关这个例子）。

我的状态A持有当前已过滤的产品。状态B拥有当前选择的类型。

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

执行此操作的正确方法是什么？

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

Answer 1

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

在状态A：

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

每当stateB更改时（或在当前NGXS版本中默认为状态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);
}

这样，当状态更改并且您无需添加其他操作时，选择器就会触发。