Question

GET_CHART_DATA是一种操作，该操作调用api并基于chartId获取图表数据。假设GET_CHART_DATA被chartId='123'调用，并且api使用该chartId向服务器发送请求。该请求处于待处理状态。我再次用相同的chartId调度相同的动作GET_CHART_DATA，即123，在这种情况下，该相同chartId的先前请求应被取消。（注意：使用chartId时，其他参数将继续使用，但是这些参数不同，这就是为什么我要取消具有旧参数的旧请求）

要注意的是，可能还有其他对GET_CHART_DATA的请求，它们具有不同的chartId。现在，我不想取消这些请求。我只想取消具有相同图表ID的先前请求。

这是我的action.js和sagas.js文件。（样本）

   // action.js
    export function getChartData(params) {
      return {
        type: 'GET_CHART_DATA',
        params, // { chartid: '123' }
      };
    }

export function cancelPreviousDataCall(chartId) {
  return {
    type: 'CANCEL_PREVIOUS_DATA_CALL',
    chartId,
  };
}

// sagas.js
export function* getChartData(params) {
  try {
    const { result } = yield race({
      result: call(Api.getChartData, params.chartid),
      cancel: take('CANCEL_PREVIOUS_DATA_CALL'),
    });
  } catch (error) {}
}

   function* watchGetChartData() {
      while (true) {
        const { params } = yield take('GET_CHART_DATA');
        yield fork(getChartData, params);
      }
    }

Answer 1

您可以跟踪每个特定chartId的分叉任务。然后，如果任务仍在运行，则可以取消它。例如，您的watchGetCharData可能是这样的：

function* watchGetChartData() {
    let tasksByChartId = {}
    while (true) {
        const { params } = yield take('GET_CHART_DATA')
        if (tasksByChartId[params.chartId] && tasksByChartId[params.chartId].isRunning()) {
            tasksByChartId[params.chartId].cancel()
        }
        tasksByChartId[params.chartId] = yield fork(getChartData, params)
    }
}

有了这个，您就不再需要CANCEL_PREVIOUS_DATA_CALL操作

如果特定参数相同，则取消先前的redux-saga任务

1 个答案: