react-redux - 取消之前的请求实时搜索 reactjs

Question

我需要使用实时搜索 axios 请求取消上一个请求-我正在使用 throttle 去抖动来发出请求，但是在删除现有单词并更新新值时遇到问题-在某些情况下会显示前一个单词的结果，我想我需要取消所有以前对同一个 requestID 的请求，通读文章，但它们都不适用于我的用例。任何帮助都是我的代码。

reducer :

switch (action.type) {
case GETTING_DATA:
  return {
    ...state,
    results: action.payload,
  };
case SEARCH_DATA:
  return {
    ...state,
    Results: action.payload,
  };



export function getSearch(value) {
  return (dispatch) => {
    dispatch({
      type: GETTING_DATA,
    });
    const arg = {
      search: value,
    };
    apiGet('abc', arg).then(response => 
     getResults(dispatch, response));
  };
}
const getResults = (dispatch, response) => {
  dispatch({
    type: SEARCH_DATA,
    payload: response.data,
  });
};

服务:

export const apiGet = async (path = '', args = {}) => {
  const endpoint = "/aaa/aaa/aaa";
  try {
    return axios.get(endpoint, getConfig());
  } catch (e) {
  }
};

Answer 1

请尝试以下操作:

通行证value作为 GETTING_DATA 的有效载荷行动。这将在状态中存储最新请求的值。

然后，在 getResults将相同的值与响应数据一起发送给 reducer。在reducer内部，检查是否从getResults传递过来的值与通过 GETTING_DATA 存储在状态中的相同.

如果是这样，则此数据将响应最新请求，因此您希望将其存储在状态中。否则，您可以忽略它。

换句话说:

操作:

switch (action.type) {
case GETTING_DATA:
  return {
    ...state,
    lastRequestTime: action.payload,
  };
case SEARCH_DATA:
  if (action.payload.lastRequestTime === state.lastRequestTime) {
    return {
      ...state,
      Results: action.payload.response,
    };
  } else {
    return state
  }

操作:

export function getSearch(value) {
  return (dispatch) => {
    const lastRequestTime = Date.now()
    dispatch({
      type: GETTING_DATA, 
      payload: lastRequestTime
    });
    const arg = {
      search: value,
    };
    apiGet('abc', arg).then(response => 
     getResults(dispatch, { response, lastRequestTime }));
  };
}
const getResults = (dispatch, response) => {
  dispatch({
    type: SEARCH_DATA,
    payload: response.data,
  });
};