React 商店调度节流

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

我不认为在 redux 中保持表单状态是一个好主意，正如 react 文档中提到的那样。 formik 是一个非常棒的库来管理你的表单状态。 无论如何，如果您将状态保存在本地，则不会有任何延迟，因为 react 处理重新渲染和状态更新非常快。

Answer 2

那是错误的签名。 debounce 返回一个函数供您调用。如果您在更改处理程序中定义该函数，则该函数将失去一遍又一遍地调用的上下文。而是将dispatch 包装在去抖动或油门中，然后在没有处理程序的情况下调用 that 函数。你现在的做法就是一遍又一遍地重新制作节流函数。

考虑以下示例：

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
  });
};