react-easy-state - 一个商店通过去抖动触发另一个商店的变化答案

【问题标题】：react-easy-state - one store triggering change in other with debouncereact-easy-state - 一个商店通过去抖动触发另一个商店的变化
【发布时间】：2020-05-05 05:05:55
【问题描述】：

我正在尝试使用 react-easy-state 库解决以下模式：例如，我有两个包含一个字符串的商店：

filter = store({
    search : ""
})

backendFilter = store({
   search : ""
})

我希望当我在过滤器中调用对搜索的更改时，它会更改后端过滤器中的值但会去抖动。

我的想法是：

filter = store({
   search : "",
   setFilter(value) {
      filter.search=value;
      backendFilter.setBackendSearchString(value);
   })
}

backendFilter = store({
   search : "",
   setBackendSearchString(string) {
        debounce(
            () => {
                backendFilter.search = string;
            },
            600,
            true
        )();
   },
})

但不幸的是，这不起作用，只是延迟了更改，但是当我在输入上使用 onChange 处理程序来触发 filter.setFilter 时，后端过滤器的更改时间与过滤器一样多，只是有一点延迟。我知道在 React 组件中，问题通常是使用 useCallback ，因为您必须确保您在 denounce 中调用的函数始终相同，但找不到让它在那里工作的解决方案。提前致谢。

【问题讨论】：

标签： javascript reactjs react-easy-state

【解决方案1】：

因为您使用的是debounce(() => {...})()，所以您基本上每次调用setBackendSearchString 时都会创建一个新函数。

我会改为将 setBackendSearchString 包装在 debounce 中：

backendFilter = store({
  search: "",
  setBackendSearchString: debounce(
    (string) => {
      backendFilter.search = string;
    },
    600,
    true
  ),
});

另一种选择是制作/使用一个钩子，为您创建一个去抖动的值，例如：https://github.com/xnimorz/use-debounce

【讨论】：

【解决方案2】：

tudor.gergely 的回答是正确的，我只有一些简单的具体额外想法。

您可以使用autoEffect 为您的用例创建“类似钩子”的自动派生。

import { store, autoEffect } from "@risingstack/react-easy-state";
import { debounce } from "lodash";

export const frontend = store({
  search: "",
  setSearch: ev => (frontend.search = ev.target.value)
});

export const backend = store({
  search: frontend.search,
  setSearch: debounce(search => (backend.search = search), 600)
});

autoEffect(() => backend.setSearch(frontend.search));

这样，任何时候您设置frontend.search backend.search 也会通过去抖动更新。不过要小心。 autoEffect 主要用于链尾效果（如渲染），如果您过多地使用它来从数据中获取数据，您将很快迷失在复杂的自动数据流中。（这是我对香草 React 钩子的问题之一）。

【讨论】：