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