如何通过ngrx-effect监听SearchActionFailed并调用通知服务？

没问题，我来帮你搞定这个需求！其实在NgRx Effects里监听失败动作并触发通知非常直接，核心就是利用Effects捕获特定动作，然后执行你的通知服务方法。下面是具体步骤和代码示例：

1. 创建/修改你的Search Effects类 #

首先，你需要一个Effects类（如果还没有就新建一个），注入Actions流和你的通知服务，然后定义专门处理搜索失败的effect：

import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { tap } from 'rxjs/operators';
import { SearchActionTypes } from './search.actions';
import { NotificationService } from '../services/notification.service'; // 替换成你实际的通知服务路径

@Injectable()
export class SearchEffects {
  constructor(
    private actions$: Actions,
    private notificationService: NotificationService
  ) {}

  // 监听搜索失败动作并触发警告通知
  handleSearchFailure$ = createEffect(
    () => this.actions$.pipe(
      // 过滤出SearchActionFailed动作
      ofType(SearchActionTypes.SearchActionFailed),
      // 执行通知服务的警告方法（副作用操作）
      tap(() => {
        this.notificationService.showWarning('搜索失败啦，请稍后再试！');
      })
    ),
    { dispatch: false } // 关键：这个effect不需要分发新动作，所以设置为false
  );
}

2. 把Effects注册到模块 #

别忘了把这个Effects类添加到你的根模块（比如AppModule）的EffectsModule里，否则它不会生效：

import { NgModule } from '@angular/core';
import { EffectsModule } from '@ngrx/effects';
import { SearchEffects } from './search.effects';

@NgModule({
  imports: [
    // ...其他模块
    EffectsModule.forRoot([SearchEffects])
  ]
})
export class AppModule {}

3. 进阶：传递错误信息到通知 #

如果你的SearchActionFailed动作携带了具体的错误信息（比如后端返回的错误提示），可以把这个信息也传给通知服务：

假设你的失败动作定义是这样的：

import { Action } from '@ngrx/store';

export class SearchActionFailed implements Action {
  readonly type = SearchActionTypes.SearchActionFailed;
  constructor(public payload: { errorMessage: string }) {}
}

那你可以在effect里获取这个错误信息：

tap((action: SearchActionFailed) => {
  this.notificationService.showWarning(`搜索失败：${action.payload.errorMessage}`);
})

这样用户就能看到更具体的失败原因啦！

原理很简单：NgRx的Actions是一个流，ofType操作符帮我们筛选出特定类型的动作，tap操作符用来执行副作用（这里就是调用通知服务），而{ dispatch: false }告诉NgRx这个effect不需要生成新的动作，只是处理现有动作的副作用。

内容的提问来源于stack exchange，提问作者Haq.H