NGXS

Question

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

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

但是每个异步动作都是两个块，我想知道是否有办法将几个动作组合成一个管道？类似于 ofActionDispatched([VerifyEmail, ChangePassword]) ?

Answer 1

您可以像这样组合多个操作符：

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

希望对您有所帮助。

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

NGXS - how to use one action handler on multiple streams