redux thunk 中的 debounce 方法

【问题标题】：debounce method inside redux thunkredux thunk 中的 debounce 方法
【发布时间】：2018-11-02 18:09:51
【问题描述】：

我在里面有异步方法的动作，我想去抖动它

export const onSearchChange = query => dispach => {
    if (query === "") {
        dispach({ type: SOME_TYPE, payload: query })
    } else {
        dispach({ type: SOME_TYPE, payload: query })
        searchProductsCall(query).then(payload => {
            dispach({ type: SOME_OTHER_TYPE, payload })
        })
    }
}

我怎样才能使用lodash 或其他东西来消除searchProductsCall 的抖动？

【问题讨论】：

标签： javascript redux redux-thunk

【解决方案1】：

您需要先创建去抖函数并调用该函数而不是您的searchProductsCall。

以下代码应确保在所有情况下都立即调用第一个调度（它可能会更改 UI？），并且它仅在去抖之后和有非空查询时调用 searchProductsCall。

export const debouncedSearchProductsCall = _.debounce((query, dispatch) => {
    if (query !== "") {
        searchProductsCall(query).then(payload => {
            dispatch({ type: SOME_OTHER_TYPE, payload })
        });
    }
}, 200);

export const onSearchChange = query => dispatch => {
    dispatch({ type: SOME_TYPE, payload: query });
    debouncedSearchProductsCall(query, dispatch);
}

【讨论】：