NGRX 效果看不到商店中的完整状态

Posted

技术标签:

【中文标题】NGRX 效果看不到商店中的完整状态【英文标题】:NGRX effect does not see the full state as it is in the store 【发布时间】:2022-01-09 04:09:10 【问题描述】:

我有一个表单,它分为几个子表单,每个子表单都有自己的提交按钮,用于分派一个动作,调用我的减速器。 我店里的formdata是这样的(例子)

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

在我的 devtools 中,我看到了商店中的数据。到目前为止,一切都很好。 接下来我要做的是创建一个效果,它也监听 FormActions.setData,这样我就可以在 formdata 完成时调用一个 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 一起使用

【问题讨论】:

【参考方案1】:

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

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

【讨论】:

以上是关于NGRX 效果看不到商店中的完整状态的主要内容,如果未能解决你的问题,请参考以下文章

如何清除#ngrx 中的状态?

ngrx 和 ngxs 之间的性能差异? [关闭]

状态更改时未调用 ngrx 商店订阅

ngrx 中的 reducer 和不变性

[Bug]:版本更新后找不到模块“@ngrx/effects/testing”

ngrx 商店选择仅订阅特定操作