NGRX 调度的无限循环

Question

我写了一个简单的 ngrx 项目来测试商店，但是我遇到了无限循环但是我尝试在没有循环的情况下复制其他示例。首先，我定义 2 class 模型如下：

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

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

为了action.ts，我这样写

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

为了effect.ts，我这样写

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

为了reducer.ts，我这样写

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

为了selector.ts，我写这个

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

然后，当我写 this.store.dispatch(appActions.requestSingleRecord()); 在 ngOnInit() 函数下的 appcomponent 上，它将无限循环

谁能指点一下？

谢谢

Answer 1

因为您对 requestSingleRecord 和 requestSingleRecordSuccess 的操作类型相同。它得到无限循环，尝试改变像

这样的动作类型

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

NGRX 调度的无限循环

Infinity loop on NGRX dispatch

typescript

redux

ngrx

angular