Angular 13中如何在组件store.pipe内分发ngRx Store Action

要在ngRx Store的数据流中基于返回数据分发Action，你需要使用**tap操作符**处理副作用逻辑（比如store.dispatch）——因为map仅用于转换数据流，不适合执行这类副作用操作。具体实现如下：

1. 修正组件代码 #

import { tap, filter } from 'rxjs/operators';

// 优化类型定义，无需|null，store的Observable不会返回null
productState$: Observable<ProductsState>;

constructor(private store: Store<any>) { }

ngOnInit(): void {
  this.productState$ = this.store.pipe(
    map(state => state.appProductState),
    // 过滤currentProduct为null的情况，避免空指针错误
    filter(state => state.currentProduct !== null),
    // 用tap执行分发Action的副作用操作
    tap(state => {
      this.store.dispatch(MyAction({ id: state.currentProduct.id }));
    })
  );
}

2. 关键细节说明 #

• tap操作符的作用：专门用于执行不改变数据流的副作用（如分发Action、打印日志），不会影响后续的数据流传递，完全适配你的需求。
• filter过滤的必要性：必须先判断currentProduct不为null，否则调用state.currentProduct.id会触发空指针异常。
• 可选优化：单次触发：如果只需要在组件初始化时触发一次Action（而非每次状态变化都触发），可以添加take(1)操作符防止内存泄漏：

  import { tap, filter, take } from 'rxjs/operators';
  
  this.productState$ = this.store.pipe(
    map(state => state.appProductState),
    filter(state => state.currentProduct !== null),
    take(1), // 仅订阅一次后自动取消订阅
    tap(state => {
      this.store.dispatch(MyAction({ id: state.currentProduct.id }));
    })
  );
  

3. 类型安全性优化建议 #

将Store<any>改为具体的根状态类型，提升代码的类型安全性：

// 先定义根状态类型
export interface AppState {
  appProductState: ProductsState;
}

// 组件中注入时指定类型
constructor(private store: Store<AppState>) { }

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