Ftyjtk

I send request to server everytime user types something. I use debounce for the 400ms delay:

type = debounce((text) => {          

      this.props.actions.loadInfo(text) 

  }, 400);

When I type something, stop and start again and repeat it, several requests are send and I receive irrelevant data. I use promises:

export const loadInfo = (text) => dispatch => {

  loadData(text).then(result => {

    dispatch(showUserData(result));

  });

};



export const loadData = async (text) => {

  const tabData = await axios.get(`url&query=${text}`);

  return tabData;

}

I need somehow cancel previous request if user sends the new one(when he typed something), what is the best way to do that? I expected debounce will help me but not. I use axios. This is not duplicate of questions here, I checked provided solutions but thet don't help me

The problem is similar to this one. Axios cancellation API can be used to cancel old requests. This should be done in a function that does a request (loadData) and has direct access to Axios, it may be also debounced:

let cancelObj;



export const loadData = debounce((text) => {

  if (cancelObj) {

      this.cancelObj.cancel();

    }



  cancelObj = CancelToken.source();



  return axios.get(`url&query=${text}`, {

    cancelToken: this._fetchDataCancellation.token

  }).catch(err => {

    // request wasn't cancelled

    if (!axios.isCancel(err))

      throw err;

  });

}, 200);

Since Redux is used, other solutions may involve it, they depend on how Redux is used.