I tried creating a simple ngrx project to test the store, but I encountered an infinite loop issue. Even after attempting to mimic other examples that do not have this problem. To begin with, I defined 2 class models as shown below:
export interface IBookRecords {
id? : number;
bookNumber?: string;
guestID ? : number;
guestName ? :string;
bookdetails? : IBookDetail[];
}
export interface IBookDetail {
id? : number;
roomName?: string;
noOfGuest?:number;
}
In action.ts, I wrote the following:
requestSingleRecord : createAction('[Booking] Load booking record'),
requestSingleRecordSuccess : createAction('[Booking] Load booking record', props<{booker: IBookRecords}>())
In effect.ts, I implemented the following:
loadBookRecords1$ = createEffect(() => this.action$.pipe
(
ofType(appActions.requestSingleRecord),
mergeMap(() =>
this.rmservice.SingleBookRecord()
.pipe(
switchMap(booker => [
appActions.requestSingleRecordSuccess({ booker })])
)
)
)
);
In reducer.ts, I defined the state and reducers like so:
export interface IAppState {
booker : IBookRecords
}
export const initialState: IAppState = {
booker:{}
}
export const appReducer = createReducer(
initialState,
on(appActions.requestSingleRecordSuccess, (state, action) => ({
...state, booker :action.booker
})),
on(appActions.updaterecord, (state, action) => ({
...state, booker :action.booker
}))
);
In selector.ts, I created the following selectors:
const selectBookRecordFeature = createFeatureSelector<IAppState>('booker');
export const selectBookRecordCs = createSelector (
selectBookRecordFeature,
(state : IAppState) => state.booker
);
However, when I call
this.store.dispatch(appActions.requestSingleRecord());Any advice would be appreciated.
Thank you