Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

188
Views
debouncing a redux dispatch not working as expected

Im trying to debounce a api action which is a dispatch call to reducer.The api call in the browser should debounce after a particular delay given as a single api , but its going as multiple api calls after the delay ,the code is as follows.

please refer the screenshot also enter image description here

const apiCall = (args) => {
        dispatch(getECByStatus({status: 'PENDING_APPROVAL', search: args}))
    }

    const debounce = (apiFunc, delay) => {
        let inDebounce
        return function () {
            const context = this
            const args = arguments
            clearTimeout(inDebounce)
            inDebounce = setTimeout(() => {
                inDebounce = null
                apiFunc.apply(context, args)
            },delay);
        }
    }

    const optimizedVersion = debounce(apiCall, 600)

const handleSearchChange = (value) => {

        optimizedVersion(value)
    }

the handleSearchChange is the onchange event fired from the input box on typing the input.getECByStatus is a redux action creator, which calls api with the search param,

export const getECByStatus = (params) => async (dispatch) => {
    let editCheckType = params?.type ? `/${params.type}` : ''
    let searchParams = params?.search ? `&search=${params.search}` : ''

    try {
        dispatch({
            type: actionType.GET_EC_BY_STATUS_REQUEST,
            payload: {
                load: true,
            },
        })
        let study_id = getItem('study_id')
        const { data } = await DataService.get(
            `/edit-checks${editCheckType}?status=${params.status}&study_id=${study_id}${searchParams}`
        )

        dispatch({
            type: actionType.GET_EC_BY_STATUS_SUCCESS,
            payload: {
                load: false,
                data: data.data,
                }
            },
        })
    } catch (error) {
        console.error('Get EC by status error', error)
        dispatch({
            type: actionType.GET_EC_BY_STATUS_FAIL,
            payload: {
                load: false,
            },
        })
    }
}

Thanks in advance!

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

This is due to the UI re-render after dispatch event get fired, since the input box is a controlled one , we have to pass the updated value to the input box component, so we can make pass a ref for not re-rendering the UI.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!