Zustand fetch with API 调用 useEffect 最佳实践答案

【问题标题】：Zustand fetch with API call useEffect best practiceZustand fetch with API 调用 useEffect 最佳实践
【发布时间】：2023-02-19 07:15:00
【问题描述】：

在 useEffect 函数中使用 Zustand 从 API 获取状态时，最佳做法是什么？现在我非常简单地使用它：

export interface ModeState{
  modes: Mode[];
  fetchModes: () => void;
}

export const useModeStore = create<ModeState>((set) => ({
  modes: [],
  fetchModes: async () => {
    const modes: AcquisitionMode[] = await API.get(`/acquisition-modes`);
    await set({ modes });
  },
}));

在组件渲染函数中：

  const modeStore = useModeStore()
  const modes = modeStore.modes
  
  useEffect(() => {
    modeStore.fetchModes()
  }, [])

然而，文档似乎暗示有多种方法可以编写它以在性能方面更有效，特别是如果我的商店变得越来越复杂，具有更多的值和获取功能。每次 API 调用创建一个商店是最佳做法吗？使用切片在每个组件中只获取您需要的商店部分？我应该在 useEffect 中以不同的方式使用商店吗？我在网上找不到关于如何使用 useEffect 商店的明确示例。 subscribe 文档似乎不适用于您使用商店通过异步函数获取值的用例。

【问题讨论】：

我个人会使用react-query 来获取数据，然后在需要时将结果设置为客户端状态。

标签： reactjs typescript react-hooks zustand

【解决方案1】：

我过去以类似的方式使用过 zustand。我经常在商店上有一个 sync 方法，我在 useEffect 中调用它，并将组件可用的任何状态传递给它，而不是商店。另一种可能性是让为获取而优化的库获取数据，并在获取后将其提供给商店。

文档在性能方面提到的是，您确实可以使用提供的选择器选择商店的一部分。在这些情况下，重新渲染只会发生在

前一个和当前选择的值相等或
自定义提供的相等函数声明先前值和当前值相等。

如果您想了解有关性能的更多细节，我可以推荐这个this article here（免责声明，我写的）

即便如此，这些性能考虑因素对您如何触发从 useEffect 挂钩中获取数据的方式影响不大。

【讨论】：