亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

使用 ngrx 效果時避免多個請求

使用 ngrx 效果時避免多個請求

RISEBY 2022-01-01 20:50:08
我想對同一個 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 調用,然后對數據進行處理 1ApiCallsService :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 請求的數據進行兩次處理
查看完整描述

2 回答

?
楊__羊羊

TA貢獻1943條經驗 獲得超7個贊

我認為你也可以調度一個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,

      }

    })

  )

);

這將是更清潔的 IMO,理論上也將并行運行。


查看完整回答
反對 回復 2022-01-01
?
慕無忌1623718

TA貢獻1744條經驗 獲得超4個贊

僅使用一種效果從 API 獲取原始數據并將其放入您的商店,然后創建兩個不同的選擇器來應用您的 groupByDirections 和 groupByDate 邏輯。


或者提取 groupByDirections 和 groupByDate 邏輯來實現。在你的效果中制作一個管道,應用兩種邏輯并以相同的效果分派兩個動作


更新:


如果你想執行兩個動作試試這個:


  loadSchedulings$ = createEffect(() =>

    this.actions$.pipe(

      ofType(ESchedulesActions.getRawData),

      mergeMap(action => this.apiCallsService.getRawData()),

      map(rawApiData => {

        const groupByDate = {}; // do your logic with rawApiData

        const groupByDirections = {}; // do your logic with rawApiData

        return { groupByDate, groupByDirections };

      }),

      mergeMap(groupedData => [

        {

          type: ESchedulesActions.GetDirectionsByDateSuccess,

          payload: groupedData.groupByDirections,

        },

        {

          type: ESchedulesActions.GetSchedulesByDateSuccess,

          payload: groupedData.groupByDate,

        },

      ]),

    ),

  );


查看完整回答
反對 回復 2022-01-01
  • 2 回答
  • 0 關注
  • 158 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號