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

I have a form that is divided in several sub-forms, each has its own submit button that dispatches an action, that calls my reducer. My the formdata in the store looks like this (example)

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

and my reducer looks like this

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

Both forms dispatch an action

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

And in my devtools I see the data in the store. So far so good. The next thing I want to do is create an effect that also listens to FormActions.setData so I can call an api when the formdata is complete. I created this effect:

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

What I wanted to achieve is that this effect calls my calculation service with the full data. But when subform A is submitted the data in the effect only has 'A' properties, and the same for subform B.

I expected that .withLatestFrom(this.store...) I would get the complete data. I see the complete data in the store in my devtools, but somehow my effect does not have see all properties.

I use Angular9 with NgRx 9

CodePudding user response：

That's because myData is the data that exists on the action. You have to pick the second item in the array, that's the result of the selector.

ofType(FormActions.setData),
withLatestFrom(this.store.select(formSelector.getData)),
//