javascript - 消除 redux 调度未按预期工作

问题描述

我试图去抖动一个 api 动作，它是对 reducer 的调度调用。浏览器中的 api 调用应该在作为单个 api 给出的特定延迟后去抖动，但它在延迟后作为多个 api 调用进行，代码如下。

请同时参考截图

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)
    }

这handleSearchChange是在输入输入时从输入框中触发的 onchange 事件。getECByStatus是一个 redux 动作创建者，它使用搜索参数调用 api，

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,
            },
        })
    }
}

提前致谢！

标签： javascriptreactjsapireact-reduxdebounce

javascript - 消除 redux 调度未按预期工作

问题描述

解决方案

推荐阅读