redux thunk內部的反跳方法

Question

我在內部使用異步方法進行操作，我想對其進行反跳

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

我該怎么抖searchProductsCall使用lodash或其他什么東西？

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