Infinity loop on NGRX dispatch-CodePudding

I write a simple to ngrx project to test store, but I got the infinity loop However I try to copy other example without loop. Firstly, I define 2 class model as below:

export interface IBookRecords {
    id? : number;
    bookNumber?: string;
    guestID ? : number;
    guestName ? :string;
    bookdetails? : IBookDetail[];
}

export interface IBookDetail {
    id? : number;
    roomName?: string;
    noOfGuest?:number;
}

For action.ts , I write this

requestSingleRecord : createAction('[Booking] Load booking record'),
requestSingleRecordSuccess : createAction('[Booking] Load booking record', props<{booker: IBookRecords}>() )

For effect.ts , I write this

loadBookRecords1$ = createEffect(() => this.action$.pipe
        (
            ofType(appActions.requestSingleRecord),
            mergeMap(() => 
                this.rmservice.SingleBookRecord()
                    .pipe(
                        switchMap(booker => [
                            appActions.requestSingleRecordSuccess({ booker })])
                    )
            )
        )
    );

For reducer.ts , I write this

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

for selector.ts , I write this

const selectBookRecordFeature = createFeatureSelector<IAppState>('booker');
export const selectBookRecordCs = createSelector (
    selectBookRecordFeature,
    (state : IAppState) => state.booker
);

Then, when I write this.store.dispatch(appActions.requestSingleRecord()); on appcomponent under ngOnInit() function, it will get infinite loop

Can anyone advise ?

Thank you

CodePudding user response：

Since you have same action type for both requestSingleRecord and requestSingleRecordSuccess. It's get infite loop, try to change the action types something like

   requestSingleRecord : createAction('[Booking] Load booking record'),
   requestSingleRecordSuccess : createAction('[Booking] Load booking record sucess', props<{booker: IBookRecords}>() )