Angular9+NgRx9下Effect调用withLatestFrom无法获取Store完整表单数据

问题根源 #

你代码的问题出在switchMap的参数解构逻辑上：
withLatestFrom(this.store.select(formSelector.getData)) 会给下游返回一个二元数组：

• 数组第1位：ofType(FormActions.setData) 匹配到的action对象
• 数组第2位：你从Store中查询到的完整表单数据

你现在只解构了数组第1位的action的data字段（也就是当前子表单提交的部分数据），完全没有取用第2位的完整Store数据，所以打印出来的永远是子表单的局部数据。

修正代码 #

把switchMap的解构逻辑调整，取出Store返回的完整数据即可：

readonly getCalculation$ = createEffect(() =>
    this.actions$.pipe(
      ofType(FormActions.setData),
      withLatestFrom(this.store.select(formSelector.getData)),
      // 第二个参数就是完整的Store表单数据，不需要用到action时第一位可以用下划线占位
      switchMap(([_, fullFormData]) => {
        console.log(fullFormData);  // 此处输出的就是完整的myData数据
        // 可选优化：先判断必填字段是否完整再调用接口，避免无效请求
        if (!fullFormData.propA1 || !fullFormData.propA2 || !fullFormData.propB1 || !fullFormData.propB2) {
          return EMPTY;
        }
        return this.service.getCalculation(fullFormData).pipe(
          map((response) => calculationActions.getCalculationSuccess({ response: response })),
          catchError((error) => {
            console.warn('error in getcalculation', error);
            return EMPTY;
          })
        );
      })
    )
  );

兼容写法 #

如果部分场景下仍出现数据不同步的问题，可将withLatestFrom换成concatMap+store.select().pipe(take(1))的写法，确保是在action触发reducer更新完成后再取Store数据：

readonly getCalculation$ = createEffect(() =>
    this.actions$.pipe(
      ofType(FormActions.setData),
      concatMap(() => this.store.select(formSelector.getData).pipe(take(1))),
      switchMap((fullFormData) => {
        // 后续业务逻辑和上文一致
      })
    )
  );

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