reactjs - 使用 saga debounce 时取消上一个请求

Question

问题是服务器响应时间可能会有所不同，有时前一个请求在最晚之后到达并影响状态。这个问题很容易解决takeLatest，但我想知道是否有办法解决这个问题debounce。

import { SEARCH_ARTICLES } from "../constants";
import { setError, setSearchArticles } from "../actions";
import { put, call, debounce } from "redux-saga/effects";
import fetchAPI from "../../API/fetchAPI";

function* debounceSearch() {
  yield debounce(500, SEARCH_ARTICLES, fetchData);
}

export function* fetchData(action) {
  const { keyword } = action;
  try {
    const response = yield call(
      fetchAPI,
      `https://openlibrary.org/search.json?title=${keyword}&page=1`
    );
    yield put(setSearchArticles(response.data.docs));
  } catch (e) {
    yield put(setError(e.message));
  }
}

export default debounceSearch;

对于取消我使用这种方法：

import axios, { CancelToken } from "axios";
import { CANCEL } from "redux-saga";

export default function fetchAPI(url) {
  const source = CancelToken.source();
  const request = axios.get(url, { cancelToken: source.token });
  request[CANCEL] = () => source.cancel();
  return request;
}

标签： reactjsreduxredux-saga