javascript - 使用ngrx效果时避免多次请求

Question

我想对同一个api调用数据进行两次处理。

我有第一个效果:

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

我调用 getSchedulings 服务方法，该方法进行 api 调用，然后完成对数据的处理 1

ApiCalls服务:

getSchedulings() {
  return this.http.get<ISchedules>(this.SchedulingByDateLocal2).pipe(
      ...
      return groupByDate;
    })
  );
}

我想对同一数据源进行第二次处理。 (从 api 获取的原始数据)但与第一个并行，因为它们是独立的

所以按照逻辑，我创建了第二个效果

loadDirections$ = createEffect(() =>
  this.actions$.pipe(
    ofType(ESchedulesActions.GetSchedulesByDate),
    mergeMap(() =>
      this.apiCallsService.getDirections().pipe(
        map(trips => ({ type: ESchedulesActions.GetDirectionsByDateSuccess, payload: directions})),
        catchError(() => EMPTY)
      )
    )
  )
);

然后在 apiCallService 中我应该有一个方法

getDirections() {
  return this.http.get<ISchedules>(this.SchedulingByDateLocal2).pipe(
      ...
      return groupByDirections;
    })
  );
}

这里的问题是我将对相同的数据有两个请求。

总结实际工作流程:

LoadSchedulings(效果)==>loadSchedulings(服务)==>API调用==>处理1LoadDirections (effect)==>loadDirections(service)==>(同)API调用==>处理2

所以我只想使用第一个 api 请求的数据进行两次处理

更新:根据 Manuel Panizzo 的回复，我应该有这样的东西？

getRawData() {
  return this.http.get<ISchedules>(this.SchedulingByDateLocal2)
}

效果.ts

loadSchedulings$ = createEffect(() =>
  this.actions$.pipe(
    ofType(ESchedulesActions.getRawData),
    pipe((data) =>
      this.apiCallsService.getSchedulings(data).pipe(
        map(trips => ({ type: ESchedulesActions.GetSchedulesByDateSuccess, payload: trips })),
        catchError(() => EMPTY)
      )
    ),
    pipe((data) =>
      this.apiCallsService.getDirections(data).pipe(
        map(directions=> ({ type: ESchedulesActions.GetDirectionsByDateSuccess, payload: directions})),
        catchError(() => EMPTY)
      )
    ),
  )
);

Answer 1

我认为您还可以调度 getRawDataSuccess 操作(执行 1 个 api 调用)

getRawData$ = createEffect(() =>
  this.actions$.pipe(
    ofType(ESchedulesActions.getRawData),
    mergeMap(() =>
      this.apiCallsService.getRawData().pipe(
        map(data => ({ type: ESchedulesActions.GetRawDataSuccess, payload: data })),
        catchError(err => ({ type: ESchedulesActions.GetRawDataError, payload: err }))
      )
    )
  )
);

然后为每个治疗创建一个效果，监听 getRawDataSuccess 操作:

getSchedulesByDate$ = createEffect(() =>
  this.actions$.pipe(
    ofType(ESchedulesActions.getRawDataSuccess),
    map((action) => {
      return {
        type: ESchedulesActions.GetSchedulesByDateSuccess,
        payload: action.payload.schedulesByDate,
      }
    })
  )
);

getDirectionsByDate$ = createEffect(() =>
  this.actions$.pipe(
    ofType(ESchedulesActions.getRawDataSuccess),
    map((action) => {
      return {
        type: ESchedulesActions.GetDirectionsByDateSuccess,
        payload: action.payload.directionsByDate,
      }
    })
  )
);

在我看来，这会更干净，理论上也可以并行运行。