javascript - 在 ngrx 中链接两个 Action

Question

我有两个相关的操作，应该依次触发。

我想使用@effects或reducers来做到这一点

在我的 slider.component 中，我触发第一个父操作

valueChange(event: MatSliderChange) {
  this.store.dispatch(
    new SetSelectDateTime({ dateSelect: this.date, timeSelect: event.source.displayValue })
  );
}

然后在 reducer 中

case ESelectDateTimeActionTypes.SetSelectDateTime: {

  return {
    ...state,
    dateTimeSelect: action.payload
  };
}

现在我应该根据所选时间触发第二个操作来获取新数据 所以我创建了一个效果 updateActualTrips

export class SchedulingsEffects {
  constructor(
    private actions$: Actions,
    private apiCallsService: ApiCallsService
  ) {}
  loadSchedulings$ = createEffect(() =>
    this.actions$.pipe(
      ofType(ESchedulesActions.GetSchedulesByDate),
      mergeMap(() =>
        this.apiCallsService.getSchedulings().pipe(
          map(trips => ({ type: ESchedulesActions.GetSchedulesByDateSuccess, payload: trips })),
          catchError(() => EMPTY)
        )
      )
    )
  );

  $LoadKpiMission = createEffect(() =>
    this.actions$.pipe(
      ofType<any>(EKpiActions.GetMissionsByStation),
      mergeMap(action =>
        this.apiCallsService.getKpiMissionByStation(action.payload, '2016-04-18').pipe(
          map(trips => ({ type: EKpiActions.GetMissionsByStationSuccess, payload: trips })),
          catchError(() => EMPTY)
        )
      )
    )
  );
  $updateActualTrips = createEffect(() =>
    this.actions$.pipe(
      ofType<any>(ESelectDateTimeActionTypes.SetSelectDateTime),
      map(action => ({ type: ESchedulesActions.GetNextSchedulesByTime, payload: action.payload }))
    )
  );
}

问题是效果从未触发，但所选时间已更新

更新 我注意到当 SetSelectDateTime 初始化时第一次触发该效果

Answer 1

在您的示例代码中，等待操作 ESchedulesActions.GetNextSchedulesByTime 没有任何效果，您等待的唯一其他操作是 ESchedulesActions.GetSchedulesByDate 和 EKpiActions.GetMissionsByStation。

您是否在这里缺少实际效果，或者我们没有看到完整的代码？调度 SetSelectDateTime 时，代码中的任何内容都不会向 API 请求新数据。

或者您是说 ESchedulesActions.GetNextSchedulesByTime 从未分派(dispatch)到存储(当运行 SetSelectDateTime 的效果监听时)？