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());
}

Answer 1

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, eg load users, load messages, load banner, and load footer.

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