Reactjs 反应存储调度节流

所以我的问题可能是一个常见的问题，但我还没有看到关于如何使用钩子/功能组件的解释

我有一个受控输入，它只是附加了一个简单的状态。当此输入发生更改时，它有一个处理程序，该处理程序首先更新所述状态，然后再将状态分派给存储。我试图做的是立即更新状态（以便用户可以在键入时没有太多延迟），然后限制分派仅每300毫秒发生一次，例如，因为所述分派是昂贵的，并且是导致键入延迟的原因

因此，情况是这样的：

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

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

---

在这种情况下，节流功能永远不会启动。

我不认为在react文档中提到的在redux中保持表单状态是一个好主意

formik

是一个非常好的管理表单状态的库。

---

无论如何，如果您将状态保留在本地，那么就不会有任何延迟，因为react句柄会很快重新呈现和状态更新。

这是错误的签名

debounce

返回一个函数供您调用。如果在更改处理程序中定义该函数，则该函数将丢失被反复调用的上下文。相反，将

dispatch

包装为去盎司或节流，然后在不使用处理程序的情况下调用该函数。按照现在的方式，您只需一遍又一遍地重新生成节流函数

考虑以下示例：

从导入{throttle}”https://unpkg.com/throttle-debounce@2.1.0/dist/index.esm.js”；
函数sayWords（word）{
console.log（word）；
}
const throttledSayWords=节流（1000，sayWords）；
设置间隔（（）=>{
限制性话语（“你好”）；
}, 100);我想我通常会同意（事实的单一来源）。理想情况下，我要做的是将表单状态保存在本地，然后提交到存储区。在当前的UI中，我没有“提交”按钮，因此所有操作都是异步进行的，这就是为什么在这种情况下，我需要两者都有。我认为，您可以更新全局状态onBlur event，这对您很有用。这实际上是一个更好的解决方案。它没有那么光滑，但它会完成工作（更干净），当我运行它的时候，我仍然会有一个滞后（地方政府的行为好像它也被限制了）。
 const handleChange = (event) => {
        const { value } = event.target;

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