NGRX效果并没有看到商店中的完整状态

Question

我有一个表单，它被分为几个子表单，每个子表单都有自己的提交按钮，用于调度一个操作，该操作调用我的reducer。我在商店里的表单数据看起来像这样(示例(

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])