redux - lodash throttle redux dispatch Uncaught TypeError : Expected a function

Question

TL; DR 我在创建一个 throttle 函数时遇到了奇怪的问题，我需要在创建 throttle 函数时手动将参数传递给这个方法。我可以通过更改我的原始函数来做到这一点，但我不想为所有旧的遗留函数/ Action 创建者这样做。

传递给 throttle 的函数:

注:这些是 redux Action 创建者。

const changeValue = (value: string, otherValue?: boolean) => {
    return {
        type: "SOME_TYPE",
        payload: {
            value: value,
            otherValue: otherValue || false
        }
    };
};

throttle 函数的创建:

const throttledMethod = (value: number, otherValue:boolean ) => {
    throttle(changeValue(Number(value),otherValue), 175, { "trailing": false });
};

这通常期望传递一个函数而不是调用，
但是除非我正在调用，否则我如何传递参数？我不想在这种情况下 curry 。

产生的错误:

node_modules\lodash\throttle.js:56 Uncaught TypeError: Expected a function
    at throttle (node_modules\lodash\throttle.js:56)

当 break 指向 lodash 中的第 56 行并检查时，我们看到从 valueChanged 返回的对象的值:

{
    type: "SOME_TYPE",
    payload: {
    value: value,
    otherValue: otherValue || false
}

这很公平。

奇怪的是，我们通过在 Redux Action 创建器中做一些相对肮脏的手动工作来实现它。我称这很脏，因为我不想为了我正在做的新事物而改变我所有旧的遗留 Action 创建者。

当我像这样使用 Redux.js 调度方法手动包装我的 Action 创建者时，一切都开始按预期工作。:

const changeValue = (value: string, otherValue?: boolean) => {
    return function (dispatch) {
        dispatch({
            type: "SOME_TYPE",
            payload: {
                value: value,
                otherValue: otherValue || false
            }
        });
    };
};

所以最后这对于 Lodash 来说并不是什么大问题，但也许我们仍然可以解决如何正确地将参数传递给需要传递给 throttle 的方法，而无需更改我所有的原始方法或柯里化(Currying)。柯里化(Currying)让很多人感到困惑，在某些情况下，我确实有点想迎合文盲。

也许我们可以创建一个包装器，在传递给 lodash throttle 或其他方法时手动包装调度。我认为这样的东西会很理想，但无法想象这个包装器会是什么样子。

也许这是我可能会问作者的问题，但首先我想尝试“用户空间”。

Answer 1

首先，您可以通过将调用包装在匿名函数中来使 throttle 工作:

const throttledMethod = (value: number, otherValue: boolean) => {
    throttle(
        () => changeValue(Number(value), otherValue), 
        175, 
        { "trailing": false }
    );
};

但是，调用 throttledMethod()只会调用 throttle它返回 changeValue 的限制版本.它不会调用生成的 throttle 函数。此外， changeValue只是一个 Action 创建者——它实际上并没有做任何事情。

返回 (dispatch) => {} 的第二个 Action 创建者正在使用 redux-thunk .这很好，因为我们需要它。

您可以通过以下方式获得所需的功能:

// we only want to set up the throttling once
const throttledChangeValue = throttle(
    (dispatch, value, otherValue) => dispatch(changeValue(Number(value), otherValue)), 
    175, 
    { "trailing": false }
);

// this is using thunk to dispatch the throttled action
const throttledPayOff = (value, otherValue) => dispatch => throttledChangeValue(dispatch, value, otherValue);