使用 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

ApiCallsService :

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 调用==> 处理1 LoadDirections（效果）==> loadDirections（服务）==>（相同）API 调用==> 处理2

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

Answer 1

我认为你也可以调度一个getRawDataSuccess动作（执行 1 个 api 调用）getRawData$ = createEffect(() =>&nbsp; this.actions$.pipe(&nbsp; &nbsp; ofType(ESchedulesActions.getRawData),&nbsp; &nbsp; mergeMap(() =>&nbsp; &nbsp; &nbsp; this.apiCallsService.getRawData().pipe(&nbsp; &nbsp; &nbsp; &nbsp; map(data => ({ type: ESchedulesActions.GetRawDataSuccess, payload: data })),&nbsp; &nbsp; &nbsp; &nbsp; catchError(err => ({ type: ESchedulesActions.GetRawDataError, payload: err }))&nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; )&nbsp; ));然后为每个治疗创造一个效果，倾听getRawDataSuccess行动：getSchedulesByDate$ = createEffect(() =>&nbsp; this.actions$.pipe(&nbsp; &nbsp; ofType(ESchedulesActions.getRawDataSuccess),&nbsp; &nbsp; map((action) => {&nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; type: ESchedulesActions.GetSchedulesByDateSuccess,&nbsp; &nbsp; &nbsp; &nbsp; payload: action.payload.schedulesByDate,&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; })&nbsp; ));getDirectionsByDate$ = createEffect(() =>&nbsp; this.actions$.pipe(&nbsp; &nbsp; ofType(ESchedulesActions.getRawDataSuccess),&nbsp; &nbsp; map((action) => {&nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; type: ESchedulesActions.GetDirectionsByDateSuccess,&nbsp; &nbsp; &nbsp; &nbsp; payload: action.payload.directionsByDate,&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; })&nbsp; ));这将是更清洁的 IMO，理论上也将并行运行。

Answer 2

仅使用一种效果从 API 获取原始数据并将其放入您的商店，然后创建两个不同的选择器来应用您的 groupByDirections 和 groupByDate 逻辑。或者提取 groupByDirections 和 groupByDate 逻辑来实现。在你的效果中制作一个管道，应用两种逻辑并以相同的效果分派两个动作更新：如果你想执行两个动作试试这个：&nbsp; loadSchedulings$ = createEffect(() =>&nbsp; &nbsp; this.actions$.pipe(&nbsp; &nbsp; &nbsp; ofType(ESchedulesActions.getRawData),&nbsp; &nbsp; &nbsp; mergeMap(action => this.apiCallsService.getRawData()),&nbsp; &nbsp; &nbsp; map(rawApiData => {&nbsp; &nbsp; &nbsp; &nbsp; const groupByDate = {}; // do your logic with rawApiData&nbsp; &nbsp; &nbsp; &nbsp; const groupByDirections = {}; // do your logic with rawApiData&nbsp; &nbsp; &nbsp; &nbsp; return { groupByDate, groupByDirections };&nbsp; &nbsp; &nbsp; }),&nbsp; &nbsp; &nbsp; mergeMap(groupedData => [&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: ESchedulesActions.GetDirectionsByDateSuccess,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; payload: groupedData.groupByDirections,&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: ESchedulesActions.GetSchedulesByDateSuccess,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; payload: groupedData.groupByDate,&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; ]),&nbsp; &nbsp; ),&nbsp; );