NGRX项目调用dispatch触发无限循环问题排查求助

问题根因 #

触发无限循环的核心原因是你定义的两个Action使用了完全相同的type标识字符串：

// 两个Action的type值完全一致，导致类型匹配逻辑混乱
requestSingleRecord : createAction('[Booking] Load booking record'),
requestSingleRecordSuccess : createAction('[Booking] Load booking record', props<{booker: IBookRecords}>() )

NGRX的ofType运算符依靠Action的type字符串做匹配过滤，你现在的执行流程会形成死循环：

1. 组件dispatch requestSingleRecord，Effect匹配到该Action发起后端请求
2. 请求返回后dispatch requestSingleRecordSuccess，但它的type和requestSingleRecord完全相同
3. Effect会把success的Action误判为requestSingleRecord，再次触发请求逻辑，无限重复

修复方案 #

修改success Action的type值，保证所有Action的type全局唯一即可解决问题：

requestSingleRecord : createAction('[Booking] Load booking record'),
// 给success Action的type加上唯一后缀
requestSingleRecordSuccess : createAction('[Booking] Load booking record Success', props<{booker: IBookRecords}>() )

额外优化建议 #

1. Effect中不需要用switchMap返回Action数组，直接用map返回单个Action即可，简化代码：

// 原写法
switchMap(booker => [appActions.requestSingleRecordSuccess({ booker })])
// 优化后写法
map(booker => appActions.requestSingleRecordSuccess({ booker }))

2. 检查FeatureSelector的配置是否正确：createFeatureSelector<IAppState>('booker')的入参'booker'必须和你在StoreModule.forRoot/forFeature中注册的reducer key完全一致，否则会无法正常读取状态。

内容的提问来源于stack exchange，提问作者Emily