Angular NgRx dispatch Authentication action时Effect不生效无报错

你的代码存在多个直接导致Effect不触发、逻辑不执行的问题：

• 未正确注入Actions服务：Effect中使用的this.action既没有在构造函数中声明依赖，也不是NgRx提供的可观察动作流服务，Effect实例初始化失败，完全无法监听dispatch的动作。
• Effect流逻辑错误：使用tap操作符处理内部接口请求，既没有将请求流返回给Effect管道，也没有订阅请求，authService.login根本不会实际执行。
• Action调用方式错误：直接调用cuurentUser()不会触发状态更新，必须将Action作为返回值交还给NgRx流，由框架自动触发dispatch。
• 参数结构不匹配：Authentication Action定义要求入参格式为{payload: any}，dispatch时直接传入this.params，如果参数没有包裹payload属性，会导致参数传递异常。
• 拼写错误：用户信息Action命名为cuurentUser，多写了一个u，后续调用会出现引用错误。
• 额外注意：如果是懒加载的特性模块，不要用forRoot注册Store和Effect，要改用forFeature，否则特性模块的状态和Effect不会被正确加载。

修正后完整代码 #

action.ts #

// 修正拼写，明确参数类型
export const currentUser = createAction('[Auth] Load Current User', props<{username: string}>());
export const LOGIN = '[Auth] Login';
export const Authentication = createAction(
    LOGIN, 
    props<{payload: any}>()
);

component.ts #

login() {
  // 按照Action定义的结构传参，包裹payload层
  this.store.dispatch(Authentication({ payload: this.params }))
}

effects.ts #

@Injectable()
export class AuthenticationEffects {
  // 注入正确的Actions流服务，使用switchMap处理请求流，最终返回要触发的Action
  user$ = createEffect(() => this.actions$.pipe(
    ofType(LOGIN),
    switchMap((action) => this.authService.login(action.payload).pipe(
        map((resp) => {
          console.log('登录接口响应：', resp);
          // 返回Action交由NgRx自动dispatch
          return currentUser({ username: action.payload.username });
        }),
        catchError(error => {
          console.log('登录请求错误：', error);
          // 错误场景可返回对应错误Action，这里返回空流兜底
          return of();
        })
      )
    )
  ));

  constructor(
    private actions$: Actions,
    private authService: AuthService
  ) {}
}

module.ts #

@NgModule({
  declarations: [
    LoginComponent
  ],
  imports: [
    CommonModule,
    AuthenticationRoutingModule,
    FormsModule,
    // 根模块用forRoot，懒加载特性模块替换为forFeature
    StoreModule.forRoot({reducerA: AuthenticationReducer}),
    EffectsModule.forRoot([AuthenticationEffects])
  ]
})
export class AuthenticationModule {}

修正后可先在Effect的ofType(LOGIN)后加一句tap(() => console.log('Effect监听到登录动作'))验证监听是否生效，再逐步调试接口和状态更新逻辑。

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