lodash throttle redux dispatch Uncaught TypeError: Expected a function

lodash throttle redux dispatch Uncaught TypeError: Expected a function

TL;DR 我 运行 对创建节流函数感到陌生，我需要在创建节流函数时手动将参数传递给此方法。我可以通过更改我的原始功能来做到这一点，但我不想为我所有的旧遗产 functions/action 创作者这样做。

传递给throttle的函数：

注意：这些是 redux 动作创建者。

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

节流函数的创建： 

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

这通常需要传递一个函数而不是调用， 但是除非我正在调用，否则我怎么能传递参数呢？我不想在这种情况下咖喱。

产生的错误：

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 动作创建器中做一些相对肮脏的手动工作来让它工作。我称之为肮脏的，因为我不想为了我正在做的这个新事物而改变我所有旧的遗留动作创作者。

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

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

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

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

也许这是我可能会问作者的问题，但首先我想尝试 "userland"。

首先，您可以通过将调用包装在一个匿名函数中来让节流器工作：

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

但是，调用 throttledMethod() 只会调用 throttle，其中 returns 是 changeValue 的节流版本。它不会调用生成的节流函数。此外，changeValue 只是一个动作创建器——它实际上 不做 任何事情。

returns (dispatch) => {} 使用的第二个动作创建器 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);