消除 redux 调度未按预期工作

Question

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

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!

Answer 1

这是因为在 dispatch 事件被触发后 UI 重新渲染，因为输入框是一个受控的，我们必须将更新的值传递给输入框组件，所以我们可以传递一个 ref 来不重新渲染用户界面。