lodash throttle redux dispatch Uncaught TypeError: Expected a function答案

【问题标题】：lodash throttle redux dispatch Uncaught TypeError: Expected a functionlodash throttle redux dispatch Uncaught TypeError: Expected a function
【发布时间】：2018-07-13 10:00:09
【问题描述】：

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

传递给油门的函数：

注意：这些是 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 调度方法手动包装我的动作创建器时，一切都开始按预期工作。：

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

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

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

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

【问题讨论】：

标签： redux lodash dispatch throttling

【解决方案1】：

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

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

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

您的第二个返回 (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);

【讨论】：