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 的效果监听时)？