cancel previous request live search reactjs

Question

I need to cancel the previous request with live search axios request- I am using throttle-debounce to make requests, but I am having issues when existing word is erased and new value is updated - results are being shown for previous word in some cases, I think I need to cancel all previous requests for same requestID, read through articles but none of them work for my usecase. any help is appreciated here is my code.

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,
  });
};

service:

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

Answer 1

Try the following:

Pass value as a payload to the GETTING_DATA action. This will store the latest requested value in the state.

Then, in getResults send that same value to the reducer along with the response data. Inside the reducer, check whether the value passed from getResults is the same as the one stored in the state via GETTING_DATA.

If so, this data is coming in response to the latest request, so you want to store it in the state. Otherwise, you can just ignore it.

In other words:

Action:

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
  }

Action:

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,
  });
};