NGRX Effect如何重新抛出错误并在组件中捕获？

问题根源 #

你当前写法无法捕获错误的核心原因：

• store.dispatch()是同步操作，组件中的try/catch只能捕获当前同步调用的异常，而Effect里的HTTP请求是异步的，错误发生在后续异步流中，完全不会被组件的同步try/catch捕获。
• 你的Effect代码存在逻辑漏洞：catchError中调用UserActions.createUserFailure(err)后没有返回该action的Observable，导致failure action根本不会被分发，这部分逻辑是无效的。

先修正Effect代码 #

先修复Effect的错误，确保failure action能正常触发：

createUser$ = createEffect(() =>
  this.actions$.pipe(
    ofType(UserActions.createUser),
    mergeMap((user) =>
      this.http.post<User>('/api/users', user).pipe(
        map((newUser) => UserActions.createUserSuccess(newUser)),
        catchError((err: HttpErrorResponse) => {
          // 返回包含failure action的Observable，确保action被正确分发
          return of(UserActions.createUserFailure(err.error));
        }),
      ),
    ),
  ),
);

两种组件层捕获错误的方案 #

方案一：Facade返回Observable，组件订阅处理

修改Facade的addUser方法，返回一个Observable用于监听操作结果，组件通过订阅处理成功/错误：

// Facade代码
addUser(user: User): Observable<User> {
  this.store.dispatch(UserActions.createUser(user));
  return this.store.pipe(
    // 监听success和failure两种action
    ofType(UserActions.createUserSuccess, UserActions.createUserFailure),
    first(), // 操作完成后立即停止监听，避免内存泄漏
    map(action => {
      // 判断action类型，失败则抛出错误供组件捕获
      if (action.type === UserActions.createUserFailure.type) {
        throw action.payload;
      }
      return action.payload;
    })
  );
}

组件中通过订阅处理：

// 组件代码
this.userFacade.addUser(user).subscribe({
  next: (newUser) => {
    // 处理用户创建成功的逻辑
  },
  error: (error) => {
    this.messageService.showError(error.message);
  }
});

方案二：通过Store状态监听错误

在Store状态中添加错误字段，通过Reducer更新错误状态，组件订阅该状态处理错误：

1. 更新State定义

// user.state.ts
export interface UserState {
  // 其他状态字段...
  createUserError: any | null; // 存储创建用户的错误信息
}

export const initialUserState: UserState = {
  // 其他初始值...
  createUserError: null
};

2. 更新Reducer

// user.reducer.ts
export const userReducer = createReducer(
  initialUserState,
  // 其他reducer逻辑...
  on(UserActions.createUserFailure, (state, { payload }) => ({
    ...state,
    createUserError: payload
  })),
  // 添加清除错误的action，避免重复显示旧错误
  on(UserActions.clearCreateUserError, (state) => ({
    ...state,
    createUserError: null
  }))
);

3. 更新Facade

// user.facade.ts
addUser(user: User) {
  // 先清除之前的错误状态
  this.store.dispatch(UserActions.clearCreateUserError());
  this.store.dispatch(UserActions.createUser(user));
}

// 提供获取错误状态的Observable
getCreateUserError$(): Observable<any | null> {
  return this.store.select(state => state.user.createUserError);
}

4. 组件中订阅错误状态

// 组件代码
ngOnInit(): void {
  this.userFacade.getCreateUserError$().subscribe(error => {
    if (error) {
      this.messageService.showError(error.message);
    }
  });
}

// 调用添加用户方法
handleAddUser(user: User) {
  this.userFacade.addUser(user);
}

总结 #

NGRX的数据流是异步的，组件无法通过同步try/catch捕获Effect中异步操作的错误，必须通过Observable订阅或者监听Store状态的方式处理错误，核心是利用RxJS的异步流特性传递错误信息。

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