Debounce Redux Thunk action creator function

Viewed 27

In my React.js project, I have a form and on input change I am calling an action creator function updateTravellerForm. I am using lodash's debounce method. Also, I am using redux-thunk middleware.

Earlier I tried export const updateTravellerForm = debounce({ tvlr: newTvlr, contactDetails }) => { ... }, 500)

But this didn't work, I was getting errors. Don't know why. I'd appreciate explanation for this case.

then I did this:

export const updateTravellerForm = ({ tvlr: newTvlr, contactDetails }) => {

  return debounce((dispatch, getState) => {

    if (!isEmpty(newTvlr?.traveller?.travellerClientId)) {

      const { travellerClientId } = newTvlr.traveller;

      const { travellerForm } = getState().SimplifiedReviewTraveller;
      const { associatedTravellers } = travellerForm || {};

      const updatedAssocTravellers = associatedTravellers.map((tvlr) => {
        if ( tvlr.traveller.travellerClientId === travellerClientId ) {
          return newTvlr;
        }

        return tvlr;
      });

      dispatch({
        type: actionType.UPDATE_NEW_TRAVELLERS_LIST,
        payload: updatedAssocTravellers,
      });
    }


    if(!isEmpty(contactDetails?.rowFields)) {
      dispatch({
        type: actionType.UPDATE_TRAVELLER_CONTACT_INFO,
        payload: contactDetails.rowFields,
      });
    }

  }, 300)
};

this seems to be working but I am not sure if this is the right way to do this. Please let me know if the above code is fine or not and also what should be the ideal time in milliseconds to debounce?

Thanks

0 Answers
Related