Реагирование дросселирования магазина

Question

Так что моя проблема, вероятно, распространена, но я не видел объяснения, как это сделать с помощью хуков / функциональных компонентов.

У меня есть контролируемый вход, к которому просто присоединено простое состояние , Когда эти входные данные изменяются, он имеет обработчик, который сначала обновляет упомянутое состояние, а затем отправляет состояние в хранилище. То, что я пытаюсь сделать, это немедленно обновить состояние (чтобы пользователь мог печатать без особых задержек при наборе), а затем ограничить отправку, чтобы она происходила только один раз каждые 300 мс, например, потому что указанная отправка является дорогой и является причиной задержка при наборе.

Итак, вот так:

const handleChange = (event) => {
    const { value } = event.target;

    setName(value);
    dispatch(actions.editCheckpointPeriod({ id, name }));
};
.
.
.
 <S.Input value={name} onChange={handleChange} />

, но пакет https://www.npmjs.com/package/throttle-debounce не работает, как я ожидал, когда я сделайте что-нибудь для этого:

 const handleChange = (event) => {
        const { value } = event.target;

        setName(value);
        throttle(300, false, () => {
             dispatch(actions.nameAction({ id, value }));
        });
    };

В этом случае функция газа просто не срабатывает.

Answer 1

Я не думаю, что сохранение формы в редуксе - это хорошая идея, как упоминалось и в реактивной документации. formik - отличная библиотека для управления состоянием формы. В любом случае, если вы сохраняете состояние локально, то не будет никакой задержки, так как реагирует на повторные рендеры и обновления состояния действительно очень быстро.

Answer 2

Это неверная подпись. debounce возвращает функцию для вызова. Функция теряет контекст вызова снова и снова, если вы определяете его в обработчике изменений. Вместо этого оберните dispatch в debounce или throttle, а затем вызовите эту функцию без обработчика. То, как вы делаете это сейчас, вы просто переделываете функцию дросселирования снова и снова.

Рассмотрим следующий пример:

import {throttle} from "https://unpkg.com/throttle-debounce@2.1.0/dist/index.esm.js";

function sayWords(word) {
  console.log(word);
}

const throttledSayWords = throttle(1000, sayWords);

setInterval(() => {
  throttledSayWords("Hello");
}, 100);

Если вы запустите этот пример, он попытается сказать "привет" каждые 100 миллисекунд, но будет фактически вызываться каждую секунду.

---

Так что для вас это будет выглядеть примерно так:

import {throttle} from "https://unpkg.com/throttle-debounce@2.1.0/dist/index.esm.js";

const throttledDebounce = throttle(300, false, dispatch);

const handleChange = (event) => {
  const {value} = event.target;

  setName(value);
  throttledDebounce({
    id,
    value
  });
};