NGXS异步操作

Question

我正在尝试将我的功能AuthModule Angular6从NgRX重构到NGXS。

我是一个州的问题。里面有一个异步操作：

export const initialState: State = {
  error: null,
  pending: false,
};


@State<State>({
  name: 'login',
  defaults: initialState
})
export class LoginPageState {

  @Selector()
  static error(state: State) {
    return state.error;
  }

  @Selector()
  static pending(state: State) {
    return state.pending;
  }

  constructor(private authService: AuthService) {
  }

  @Action(Login)
  login({getState, patchState, setState, dispatch}: StateContext<State>, {payload}: Login) {

    console.log('login da login page', getState());
    setState({...getState(), pending: true});
    console.log('login da login page', getState());

    return this.authService.login(payload)
      .pipe(
        map((user) => {
          // setTimeout(() => {
          return dispatch([new LoginSuccess({user})]);
          // }, 10);
        }),
        catchError(err => dispatch(new LoginFailure(err))));
  }

  @Action(LoginSuccess)
  loginSuccess({setState, getState}: StateContext<State>) {
    console.log('login success');
    setState({...getState(), error: null, pending: false});
  }

  @Action(LoginFailure)
  loginFailure({setState, getState}: StateContext<State>, {payload}: LoginFailure) {
    setState({...getState(), error: payload, pending: false});
  }

​
}

当我发送登录操作时，它可以工作，但在我的redux devtools中，我得到：

登录操作是在LoginSucces操作之后进行的，如果我在两个阶段(@INIT、Auth登录成功和Auth登录)之间切换，sore总是相同的。(挂起的值不应该移动？)

如果我在调用新调度之前添加一个setTimeout函数：

 return this.authService.login(payload)
  .pipe(
     map((user) => {
       setTimeout(() => {
         return dispatch([new LoginSuccess({user})]);
       }, 10);
     }),
     catchError(err => dispatch(new LoginFailure(err))));

我在devtools中得到了我的操作的正确排序，在这种情况下，它移动的是挂起的值：

​

​

​

​

但是…我哪里错了？

你能帮帮忙吗？谢谢

Answer 1

目前，这是由于NGXS的工作方式，即父操作仅在其子操作完成后才完成。动作在完成时被发布到开发工具中，这样它们就可以在完成时包含状态，这就是为什么你会看到它们以这种顺序出现。

这是github上存在的一个问题(即将重新开放)。请参阅本期的评论：https://github.com/ngxs/store/issues/139#issuecomment-390673126