lodash throttle redux dispatch Uncaught TypeError: Ожидается функция

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 указывает на строку 56 в lodash и проверяет, мы видим, что значение объекта, возвращенное из 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
person Urasquirrel    schedule 02.02.2018    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Во-первых, вы можете заставить работать дроссель, заключив вызов в анонимную функцию:

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);
person Luke    schedule 02.02.2018