Zustand 通过 API 调用 useEffect 获取最佳实践

Question

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

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文档似乎不适用于您使用存储通过异步函数获取值的用例。

Answer 1

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

文档中关于性能的内容是指您确实可以使用提供的选择器选择商店的部分内容。在这些情况下，只有在以下情况下才会发生重新渲染：

• 先前和当前选择的值不同或
• 自定义提供的相等函数指出先前值和当前值不同。

如果您想了解有关性能的更多详细信息，我可以在这里推荐这篇文章（免责声明，我写的）

即便如此，这些性能考虑因素并不会影响您从钩子等方式触发获取的方式useEffect。