为何NgRx Effect中的autoAuth$无法触发loginSuccess reducer？

问题描述 #

login$ Effect返回loginSuccess action时，能正常触发对应的reducer更新状态；但autoAuth$ Effect中返回完全相同的loginSuccess action，却无法触发reducer。已确认autoAuth$函数正常执行，且监听loginSuccess的loginRedirect$ Effect在两种场景下都能正常触发页面跳转，即使更换为无参数的loginSuccess action，reducer依然无响应。

相关代码片段 #

login$ Effect（正常触发reducer）

login$ = createEffect(() => {
    return this.action$.pipe(
      ofType(fromActions.loginStart),
      exhaustMap(action => {
        return this.authService
          .login({
            username: action.username,
            password: action.password,
          })
          .pipe(
            map(data => {
              const user = this.authService.handleLogin(data);
              return fromActions.loginSuccess({
                roles: user._roles,
                token: user._token,
                expiration: user._expiration.toString(),
              });
            }),
            catchError(error => {
              return of(fromActions.loginFailure({ error: error.message }));
            })
          );
      })
    );
  });

autoAuth$ Effect（无法触发reducer）

autoAuth$ = createEffect(() => {
    return this.action$.pipe(
      ofType(fromActions.autoAuthenticate),
      map(() => {
        const user = this.authService.getAuthDataFromLocalStorage();
        if (user && user._expiration && user._expiration > new Date()) {
          this.authService.onSuccessfulAuthentication(user._expiration);
          return fromActions.loginSuccess({
            roles: user._roles,
            token: user._token,
            expiration: user._expiration.toString(),
          });
        } else {
          return fromActions.loginFailure({ error: 'Login Failed' });
        }
      })
    );
  });

loginRedirect$ Effect（两种场景均正常触发）

loginRedirect$ = createEffect(
    () => {
      return this.action$.pipe(
        ofType(loginSuccess),
        map(() => {
          this.router.navigate(['home']);
        })
      );
    },
    { dispatch: false }
  );

排查方向 #

• 检查reducer中loginSuccess的处理逻辑：确认reducer里的ofType(fromActions.loginSuccess)是否和Effect中返回的action是同一个引用，有没有导入错误（比如从不同文件导入了同名action）。另外看reducer处理时有没有额外的条件判断，比如只在token为空时才更新状态，或者payload字段不匹配（比如autoAuth返回的roles是undefined或结构和login场景不同）。
• 验证loginSuccess的payload数据合法性：对比两种场景下loginSuccess的payload内容，特别是expiration字段。autoAuth中从localStorage取出的user._expiration如果是字符串，有没有先转成Date对象？如果直接对字符串调用toString()，可能导致格式异常，reducer处理时认为数据无效而不更新状态。
• 查看NgRx DevTools的action流：打开DevTools查看autoAuth流程中loginSuccess action是否被正确分发，以及reducer处理该action前后的状态变化。如果action存在但状态没变化，说明reducer逻辑有问题；如果action没出现在历史中，要检查autoAuth$的Effect是否正确配置了dispatch: true（默认是true，但如果手动设为false会导致action不进入全局流，不过这里loginRedirect$能触发，所以这个可能性较低）。
• 检查autoAuth$的执行时机：确认autoAuthenticate action是否在reducer完全初始化后才触发。如果应用启动时过早触发autoAuthenticate，可能reducer还没注册到store，导致action无法被处理。可以尝试延迟autoAuthenticate的触发时机（比如在AppComponent的ngOnInit中延迟100ms触发）来验证。
• 排查NgRx中间件拦截：如果项目中自定义了NgRx中间件，检查是否有中间件拦截了loginSuccess action，导致它无法到达reducer。

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