In a similar scenario (assuming the usage of NgRx 10 or newer), I have a unique viewpoint on how to approach effects. Firing off multiple actions sequentially in one location, especially within a single effect, is considered an anti-pattern. It is crucial to maintain a coherent overall flow of application state in NgRx based on actions and potential state modifications, as envisioned by the NgRx architecture.
Adhering to the 3 rules for effects can help prevent complex scenarios:
- Name effects according to their purpose
- Ensure each effect has a single responsibility
- Only emit a single action per effect
Following these guidelines not only promotes the separation of concerns design pattern but also enhances the testability of NgRx effects.
In your specific case, you can separate the desired additional actions by using an intermediary proxy action.
It appears that the original effect dispathMultipleActions$ may not be necessary in your scenario, unless it contains specific logic that could be better suited in a state Reducer, further improving testability.
If ActionTypes.UpdateSomething already includes an array payload object, you could break down your dispathMultipleActions$ into individual actions, like so:
@Effect()
deleteAction$ = this.actions$.pipe(
ofType(ActionTypes.UpdateSomething),
concatMap(from(new Promise((array) => {
array.forEach(item => {
if (item > 3) {
// perform desired action
}
});
}))),
{dispatch: false}
);
@Effect()
changeAction$ = this.actions$.pipe(
ofType(ActionTypes.UpdateSomething),
concatMap(from(new Promise((array) => {
array.forEach(item => {
if (item <= 3) {
// perform desired action
}
});
}))),
{dispatch: false}
);