NGRX Effects中如何结合Action响应与多个Selector值

你遇到的报错本质是连续使用withLatestFrom后的数据结构层级错误：
第一次withLatestFrom会将原action和selectData1的结果组合成数组[action, data1]，第二次withLatestFrom会把这个数组再和selectData2的结果组合成[[action, data1], data2]。你在switchMap里解构的[payload, data1, data2]实际对应的值是[action, data1]、data2、undefined，此时payload是数组而非原action，自然payload.name就会出现未定义的错误。

方案一：合并两个Selector到单个withLatestFrom中 #

使用combineLatest同时获取两个Selector的值，避免多层嵌套：

loadSuccess$ = createEffect(() => this.actions$.pipe(
  ofType(MyActions.loadDataSuccess),
  withLatestFrom(
    combineLatest([
      this.store$.select(selectData1),
      this.store$.select(selectData2)
    ])
  ),
  switchMap(([action, [data1, data2]]) => [
    FileActions.setSelectedName({ fileName: action.name[0] }),
    PFDataActions.loadPFData({ data1, data2 }),
    OtherDataActions.loadOtherData({ data1, data2, otherName: '' }),
    MainDataActions.loadMainData({ data1, data2, otherName: '' })
  ])
));

方案二：修正解构层级适配嵌套数组 #

如果坚持使用两次withLatestFrom，需要调整解构逻辑匹配实际的数据结构：

loadSuccess$ = createEffect(() => this.actions$.pipe(
  ofType(MyActions.loadDataSuccess),
  concatMap((action) => of(action).pipe(
    withLatestFrom(this.store$.select(selectData1)),
    withLatestFrom(this.store$.select(selectData2))
  )),
  switchMap(([[action, data1], data2]) => [
    FileActions.setSelectedName({ fileName: action.name[0] }),
    PFDataActions.loadPFData({ data1, data2 }),
    OtherDataActions.loadOtherData({ data1, data2, otherName: '' }),
    MainDataActions.loadMainData({ data1, data2, otherName: '' })
  ])
));

尽量避免使用any类型，明确指定action和数据的类型（比如action类型定义为ReturnType<typeof MyActions.loadDataSuccess>），这样能在编译阶段提前发现类似的结构错误，提升代码健壮性。

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