NGXS - how to use one action handler on multiple streams

Question

I have several actions that run asynchronously, let say VerifyEmail and changepassword. I would like to show a loader when the action starts and hide it when the auction ends. I know I can do it for each action this way :

this.actions$
    .pipe( ofActionDispatched(VerifyEmail) )
    .subscribe( () => {
        this.showLoader();
    });
this.actions$
    .pipe( ofActionSuccessful(VerifyEmail) )
    .subscribe( () => {
        this.hideLoader();
    });

But it is two blocks for each async actions, I was wondering if there is a way to combine several actions into a single pipe? something like ofActionDispatched([VerifyEmail, ChangePassword]) ?

Answer 1

You can combine the operator for multiple actions like this:

ofActionDispatched(VerifyEmail, ChangePassword)

Note that it is just addition arguments to the method not an array.

As an alternative you could bind this loader to a loading prop somewhere in your state and update that from your respective @Action handlers before and after doing the async work:

@Action(VerifyEmail)
async verifyEmail(ctx, action){
    ctx.patchState({ loading: true });
    await someasyncWork();
    ctx.patchState({ loading: false });
}

Yet another option is to call this from the UI component before and on completion of the dispatch:

this.showloader();
this.store.dispatch(new VerifyEmail())
    .subscribe(() => this.hideLoader());

Hope this helps.