如何调整基于Router的NgRx Effect使其依赖loadAllForms的API数据

针对刷新或外部导航进入时，Effect因表单数据未加载完成导致不触发loadForm的问题，可通过让Effect等待loadAllForms完成后的状态来修复，以下是具体调整方案：

调整后的Effect代码 #

pickForm$ = createEffect(() =>
  this.actions$.pipe(
    ofType(routerNavigatedAction),
    filter((navigation) => navigation.payload.routerState.url.startsWith('/requetes/faire-une-requete/')),
    switchMap((navigation) => 
      combineLatest([
        of(navigation),
        this.store.select(selectIsFormSelected).pipe(
          // 若当前未选中表单，等待loadAllForms成功后再获取最新状态
          switchMap(isSelected => 
            isSelected ? of(isSelected) : this.actions$.pipe(
              ofType(RequestsActions.loadAllFormsSuccess),
              take(1),
              switchMap(() => this.store.select(selectIsFormSelected))
            )
          )
        )
      ])
    ),
    filter(([navigation, isFormSelected]) => isFormSelected),
    map(([navigation]) => RequestsActions.loadForm({ 
      formId: getAllRouteParameters(navigation.payload.routerState).get('id') 
    }))
  )
);

逻辑说明 #

1. 路由过滤：保留原有的路由路径判断，只处理目标页面的导航事件
2. 状态等待逻辑：
   • 触发导航后先获取当前selectIsFormSelected状态
   • 若状态为true，直接进入后续判断
   • 若状态为false，则等待loadAllFormsSuccess动作（该动作需在后端数据加载完成后正确dispatch），待数据加载完成后重新获取最新的selectIsFormSelected状态
3. 触发加载：确认isFormSelected为true后，再触发loadForm动作

额外提示 #

需确保loadAllFormsSuccess动作与后端数据加载的完成时机完全绑定，且selectIsFormSelected选择器能正确基于加载后的表单数据计算状态。

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