redux中的调度操作在一个操作被调度两次时被取消

roejwanj 于 2023-06-23 发布在其他

关注(0)|答案(1)|浏览(149)

我遇到了一个问题，我在useEffect中使用不同的有效负载调度了两次操作。这两个动作都被正确地分派了，但是只有第二个动作执行了我的epic函数。
这是我的useEffect

useEffect (() => {
    dispatch (actions.getDashboardData ({
      viewKey: DASHBOARD_KINDS.PUBLISHER,
      widgetKey: DASHBOARD_WIDGETS.KEY_METRICS,
      isOldData: false,
      data: {
        metrics: query.metrics,
        dimensions: query.dimensions,
        interval: {
          begin: "2023-05-27T00:00:00",
          end: "2023-05-31T00:00:00"
        }
      }
    }))
    dispatch (actions.getDashboardData ({
      viewKey: DASHBOARD_KINDS.PUBLISHER,
      widgetKey: DASHBOARD_WIDGETS.KEY_METRICS,
      isOldData: true,
      data: {
        metrics: query.metrics,
        dimensions: query.dimensions,
        interval: {
          begin: "2023-05-23T00:00:00",
          end: "2023-05-27T23:00:00"
        }
      }
    }))
  }, [])

下面是我的Epic函数

const getDashboardDataEpic = (action$, state$) => action$
  .pipe (
    ofType (types.GET_DASHBOARD_DATA),
    switchMap (({ payload }) => {
      const { api, session } = state$.value

      const { data, widgetKey, viewKey, isOldData } = payload

      console.log ("Processing...", payload)

      const httpPayload = {/**Payload Data**/}

      return pipe ([
        setMethod (HTTP_METHOD.POST),
        setPath (API_ENDPOINTS.DASHBOARD_SEARCH),
        send (httpPayload)
      ]) (api)
        .pipe (
          map ((http) => {

            return actions.getDashboardDataSuccess ({
              data: http.response,
              //..remaining data
            })
          }),
          catchError (http => {
            // Error handling
          }
          )
        )
    })
  )

export default combineEpics (
  getDashboardDataEpic
)

如前所述，两个都被正确地分派，但在最后只有第二个分派执行EPIC函数