Angular6 AuthModule从NgRX迁移到NGXS时异步Action异常问题

我来帮你分析下这个问题，你遇到的核心问题是NGXS中异步Action的流处理方式不正确，导致Redux DevTools无法正确追踪Action执行顺序，同时状态更新没有被正确同步。

问题根源 #

你当前的代码在处理Login Action时，存在两个关键问题：

1. RxJS流处理错误：在map操作符中直接调用dispatch，但没有将dispatch返回的Observable作为流的一部分返回。NGXS依赖Action处理函数返回的Observable来追踪Action的生命周期，当你没有正确返回这个流时，NGXS会认为Login Action已经完成，而后续的LoginSuccess/LoginFailure会被当作独立的Action触发，导致DevTools中顺序颠倒。

2. 状态更新的时机追踪问题：虽然你同步调用了setState更新pending为true，但由于Login Action的Observable提前完成，DevTools没有正确捕获到这个中间状态的变化，导致切换状态时看不到pending的变化。

而添加setTimeout能“解决”问题，只是因为它把dispatch的触发延迟到了Login Action的Observable完成之后，让DevTools的顺序看起来正常，但这完全是巧合，不是正确的异步处理方式。

正确的解决方案 #

我们可以通过两种方式来修正这个问题，都是遵循NGXS的异步Action处理规范：

方案1：让NGXS自动处理Action派发（推荐）

NGXS允许Action处理函数直接返回要派发的Action对象（或包含Action的Observable），它会自动帮你完成派发，同时正确追踪整个流的生命周期：

@Action(Login)
login({ patchState }: StateContext<State>, { payload }: Login) {
  // 使用patchState只更新需要变化的字段，比setState更简洁
  patchState({ pending: true });
  
  return this.authService.login(payload).pipe(
    // 直接返回LoginSuccess Action，NGXS会自动派发
    map(user => new LoginSuccess({ user })),
    // catchError需要返回Observable，用of包裹LoginFailure
    catchError(err => of(new LoginFailure(err)))
  );
}

方案2：手动派发但正确返回Observable

如果你需要手动调用dispatch，确保在switchMap（而非map）中调用，并返回dispatch的结果（dispatch返回Observable）：

@Action(Login)
login({ patchState, dispatch }: StateContext<State>, { payload }: Login) {
  patchState({ pending: true });
  
  return this.authService.login(payload).pipe(
    // 使用switchMap处理异步派发，返回dispatch的Observable
    switchMap(user => dispatch(new LoginSuccess({ user }))),
    catchError(err => dispatch(new LoginFailure(err)))
  );
}

为什么这样能解决问题？ #

• 两种方案都会让NGXS等待authService.login的异步操作完成，再处理后续的LoginSuccess/LoginFailure，确保DevTools中Action的顺序是Login → LoginSuccess/LoginFailure。
• patchState会直接更新状态，NGXS会同步将这个状态变化发送给DevTools，你切换状态时就能看到pending的正确变化了。

额外优化建议 #

• 尽量使用patchState替代setState，它只更新你指定的字段，代码更简洁且性能更好。
• 确保catchError中返回的是Observable（比如用of()包裹Action），这是RxJS的规范要求。

内容的提问来源于stack exchange，提问作者foralobo