NgRx Effects报错：模块@ngrx/effects无导出成员Effect

这个报错是因为NgRx Effects v14及以上版本已经移除了@Effect装饰器，改用函数式的createEffect API实现。以下是具体的修复步骤和修改后的代码：

1. 更新导入语句 #

替换原来的@Effect导入为createEffect，同时补充需要的RxJS操作符：

import { Actions, createEffect, ofType } from "@ngrx/effects";
import { switchMap, map, catchError } from "rxjs/operators";
import { of } from "rxjs";
import { HttpClient } from "@angular/common/http";

import * as AuthActions from './auth.actions';

2. 重构Effect定义 #

不再使用@Effect装饰器，改用createEffect函数创建Effect。同时需要补充处理HTTP请求的结果，分发对应的成功/失败Action（原代码缺少这一步，会导致Effect无法正确触发后续状态更新）：

type loginResponse = { token: string, message: string, loggedIn: boolean, time: number };

export class AuthEffects {
  login$ = createEffect(() => {
    return this.actions$.pipe(
      ofType(AuthActions.LOGIN),
      switchMap((authData: AuthActions.Login) => {
        // 注意：当前请求URL是signup，但触发的Action是LOGIN，建议核对接口地址是否正确
        return this.http.post<loginResponse>(
          'http://localhost:3000/user/signup',
          { 
            email: authData.payload.email, 
            password: authData.payload.password 
          }
        ).pipe(
          map(response => {
            // 分发登录成功的Action
            return AuthActions.loginSuccess({ 
              token: response.token,
              loggedIn: response.loggedIn,
              time: response.time
            });
          }),
          catchError(error => {
            // 分发登录失败的Action
            return of(AuthActions.loginFailure({ error: error.message }));
          })
        );
      })
    );
  });

  constructor(private actions$: Actions, private http: HttpClient) { }
}

关键改动说明 #

• 移除@Effect装饰器，用createEffect函数返回Observable，变量名后缀加$遵循RxJS命名惯例
• 补充map和catchError操作符，将HTTP请求结果转换为对应的Action，确保状态能正确更新
• 导入of操作符用于在错误时返回失败Action的Observable

如果你的项目使用NgRx v13及以下版本，@Effect仍可使用，但建议升级到最新版本并采用createEffect——装饰器方式已被标记为弃用。

内容的提问来源于stack exchange，提问作者Basil Aslam N P