@ngrx中的效果中的连锁动作

时间:2018-08-13 04:56:21

标签: angular redux rxjs ngrx

在进行HTTP请求的效果中,我在将动作链接起来时遇到了一些麻烦。

以下是效果代码:

export class UserEffects {

    @Effect()
    update$: Observable<Action> = this.actions$.ofType(user.USERCHANGE).pipe(
        switchMap(data => this.authService.login(data['payload'])),
        map(userInfo => new UserChangedAction(userInfo)),
        tap(() => this.store.dispatch(
             new LoginStateChangeAction(localStorage.getItem('token')))
        )
    );

    constructor(private authService: AuthService, private actions$: Actions,
        public store: Store<fromRoot.State>) {}
}

问题在于两个动作同时被调用。 LoginStateChange操作取决于要完成的UserChanged操作。

我该如何实现?

谢谢!

2 个答案:

答案 0 :(得分:5)

您可以按照奥斯丁的帖子中的说明返回多个操作:Dispatching Multiple Actions from NGRX Effects

@Effect()
update$ = this.actions$.ofType(user.USERCHANGE).pipe(
  switchMap(data => this.authService.login(data['payload'])),
  switchMap(userInfo => [
    new UserChangedAction(userInfo),
    new LoginStateChangeAction(localStorage.getItem('token')),
  ])
);

答案 1 :(得分:0)

您可以尝试使用这种组合-UserChangedAction.switchMapTo(LoginStateChangeAction).pipe(stuff)。它将等待UserChangedAction发出,然后等待LoginStateChangeAction发出。因此,它将是一个接一个。