NGXS-如何在多个流上使用一个动作处理程序

时间:2018-08-03 07:39:34

标签: ngxs

我有几个异步运行的动作,比如说VerifyEmailchangepassword。我想在动作开始时显示加载程序,并在拍卖结束时隐藏它。我知道我可以通过这种方式完成每个操作:

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

但是每个异步动作有两个块,我想知道是否有一种方法可以将多个动作组合到一个管道中? ofActionDispatched([VerifyEmail, ChangePassword])之类的东西?

1 个答案:

答案 0 :(得分:6)

您可以将运算符组合为多种操作,例如:

ofActionDispatched(VerifyEmail, ChangePassword)

请注意,它只是方法的附加参数,而不是数组。

作为替代方案,您可以将此加载器绑定到处于您状态的某个地方的loading道具,并在执​​行异步工作之前和之后从各自的@Action处理程序中对其进行更新:

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

另一种选择是在调度之前和完成时从UI组件调用此方法:

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

希望这会有所帮助。