适当的存储/多实例化组件设计

Question

我有一个名为 runner 的 Angular 组件，我在同一个屏幕上有它的三个实例。

它有两个链接的select，第一个叫做"Models"，第二个叫做"Definitions"，每个模型可能有多个定义。

OnInit 我触发了一个加载所有模型的效果（它被触发了三次，一个组件的每个实例一次，我不确定是否可以）并将它存储在商店中（在同一个"segment"，模型数组）。

ngOnInit() {
  this.store.dispatch(new SimulationActions.LoadModels());
  this.models = this.store.pipe(select(fromSimulator.getModels));
}

事情是，如果我 select 在第一个实例的第一个 select 中建模 A，我将在树实例的 select 中获得 A 定义，因为它触发相同的效果并使用相同的 selector 在 success

modelChange() {
  this.store.dispatch(new 
       SimulationActions.LoadDefinitions(this.selectedModel));
  this.definitions = 
       this.store.pipe(select(fromSimulator.getDefinitions));
}

如果我在第二个实例中 select 模型 B，我将在树实例中定义模型 B，而在第一个实例中，我将具有模型 A selected 但是与 B children.

组件完全一样，除了这个effect/store问题，它们是用来比较的，所以为每个实例编写不同的组件不是解决方案。

任何人都可以告诉我一些关于这个的信息。

提前致谢。

Answer 1

您必须以某种方式区分您的选择器和效果器。
对于您的效果，您必须创建不同的动作或使用负载。
对于选择器，它是相同的，您必须使用不同的选择器，或者 selector with props.

适当的存储/多实例化组件设计

Proper store / multi instantiated component design

angular

ngrx

ngrx-store

ngrx-effects