Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

190
Vistas
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 Respuestas
Responde la pregunta

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda