NGRX 效果看不到完整状态，因为它在商店里

Question

我有一个分为几个子表单的表单，每个子表单都有自己的提交按钮，用于发送调用我的减速器的操作。我在商店中的表单数据如下所示（示例）

myData {
   propA1?: string,
   propA2?: string,
   propB1?: string,
   propB1?: string,
}

我的减速器看起来像这样

const myDataReducer = createReducer(
  initialState,
  on(FormActions.setData, (state, action) => ({
    ...state,
    ...action.data,
  }))
);

两种形式都派发一个动作

this.dispatch(FormActions.setData({ data}));

在我的开发工具中，我看到了商店中的数据。到目前为止，一切都很好。接下来我要做的是创建一个效果，它也可以监听 FormActions.setData，这样我就可以在表单数据完成时调用 api。我创建了这个效果：

readonly getCalculation$ = createEffect(() =>
    this.actions$.pipe(
      ofType(FormActions.setData),
      withLatestFrom(this.store.select(formSelector.getData)),
      switchMap(([{ data}]) => {
        console.log(data);  // this logs only partial data
        return this.service.getCalculation(data).pipe(
          map((response) => calculationActions.getCalculationSuccess({ response: response })),
          catchError((error) => {
            console.warn('error in getcalculation', error);
            return EMPTY;
          })
        );
      })
    )
  );

我想实现的是这个效果用完整的数据调用我的计算服务。但是当提交子表单A时，效果中的数据只有'A'属性，子表单B也是如此。

我预计 .withLatestFrom(this.store...) 我会得到完整的数据。我在我的 devtools 中看到商店中的完整数据，但不知何故我的效果没有看到所有属性。

我将 Angular9 与 NgRx 9 结合使用

Answer 1

那是因为 myData 是存在于操作上的数据。您必须选择数组中的第二项，这是选择器的结果。

ofType(FormActions.setData),
withLatestFrom(this.store.select(formSelector.getData)),
//          skip the action
//              pluck the data from selector result
switchMap(([_, data])

NGRX 效果看不到完整状态，因为它在商店里

NGRX effect does not see the full state as it is in the store

ngrx

ngrx-effects

angular

ngrx-store