I have an Angular component that is called runner, and I have three instances of it in the same screen.
It has two linked selects, the first one is called "Models" and the second one is called "Definitions", each model may have multiple definitions.
OnInit I trigger an effect that loads all the models (it is triggered three times, one for each instances of the component, I'm not sure if that's ok) and it stores it in the store (in the same "segment", an array of Models).
ngOnInit() {
this.store.dispatch(new SimulationActions.LoadModels());
this.models = this.store.pipe(select(fromSimulator.getModels));
}
The things is that if I select model A in the first select of the first instance, I'll get A definitions in the selects of the tree instances, because it triggers the same effect and uses the same selector in the success
modelChange() {
this.store.dispatch(new
SimulationActions.LoadDefinitions(this.selectedModel));
this.definitions =
this.store.pipe(select(fromSimulator.getDefinitions));
}
And if I select model B in the second instance I'll have definitions for model B in the tree instances, and in the first one I'll have model A selected but with B children.
The components are exactly the same, except for this thing effect/store issue, they're used to compare, so write a different component for each instances isn't the solution.
Can anyone give me a little light about this.
Thanks in advance.
You'll have to somehow differentiate your selectors and effects.
For your effects you'll have to create different actions or work with the payload.
For the selectors it's the same, you'll have to use different selectors, or selector with props.