How to resolve the "Avoid dispatching many actions in a row" lint warning in NgRx?

Question

I am getting this warning when I have a lot of actions in a component function: Avoid dispatching many actions in a row to accomplish a larger conceptual "transaction", I want to resolve this warning, but I don't have a good approach to revolve, I was thinking on effects but What happen when I am reusing the action in serveral parts of the project and I don't want to dispatch the other actions.

public initialize(users: Users) {
    this.store.dispatch(loadUsers(users));
    this.store.dispatch(loadMessage('Initialized'));
    this.store.dispatch(loadBanner());
    this.store.dispatch(loadFooter());
}

You can dispatch one action and create multiple effects or reducers on this action. — Fatih Ersoy, Jul 27 '22 at 16:42

score 2 · Accepted Answer · answered Jul 28 '22 at 06:23

You can write your actions as events, which makes it easier.

public initialize(users: Users) {
    this.store.dispatch(iAmInitialized());
}

Multiple parts of your application can then listen to this action to do their thing, e.g. load users, load messages, load banner, and load footer.

https://ngrx.io/guide/eslint-plugin/rules/avoid-dispatching-multiple-actions-sequentially

How to resolve the "Avoid dispatching many actions in a row" lint warning in NgRx?

1 Answers1