Access Latest Store Value Inside NGRX Effect Value Get Undefined

Viewed 148

I have two actions one is called mergeGuestData which is to update the state. after that action fires, I want to fire another action onboardGuest upon the first action finishes. so I used effect when the mergeGuestData call excute GuestActions.onboardGuest() action.

 whenTempCheckComplete$ = createEffect(() => {
    return this.actions$.pipe( 
    ofType(GuestActions.mergeGuestData),
      map((action) => {
          return GuestActions.onboardGuest()
      })
    );
  });

when this GuestActions.onboardGuest() fires I need to access the state which mergeGuestData action modified earlier and make a service call.so I created another effect. the issue here is guestData is undefined.I cant make service all without haveing that data. what am I doing wrong here?

 onboardGuest$ = createEffect(() => {
    return this.actions$.pipe( 
      ofType(GuestActions.onboardGuest),
      withLatestFrom(this.store.pipe(select(selectGuest))),
      //----- guestData getting undefined-------------
      switchMap(([action, guestData]) => {
        return this.httpClient.post(environment.urls.guestOnboard, guestData).pipe(
          map(({payload}:RequestResult<GuestOnboardSuccessResponse>) => {
               return GuestActions.onboardGuestSuccess({resPayload:payload})
          }),
          catchError((err) => {
            return of(GuestActions.onboardGuestFailure({ error: err }))
          })
        )
      })
    );
  });

this the selector implementation

export const selectGuest = createSelector(
  fromGuestStore.SelectGuestManagementState,
  ({ guestOnboardState }) => {
    return guestOnboardState.onBoardGuestInfo;
  }
);

reducer

on(GuestActions.mergeGuestData, (state, { gestRelatedData }) => {
    return {
      ...state,
      onBoardGuestInfo: {
        ...state.onBoardGuestInfo,
        onBoardCheckList: gestRelatedData,
      },
    };
  }),
  on(GuestActions.onboardGuest, (state) => {
    return { ...state, isLoading: true };
  }),
  on(GuestActions.onboardGuestSuccess, (state, { resPayload }) => {
    return { ...state, successResponse: resPayload, isLoading: false };
  }),
  on(GuestActions.onboardGuestFailure, (state, { error }) => {
    return { ...state, isLoading: false, error: error };
  })
0 Answers
Related