在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
文档似乎不适用于使用存储通过异步函数获取值的用例。
1条答案
按热度按时间axzmvihb1#
我过去也用过类似的方式使用zustand,我经常在存储上有一个
sync
方法,我在useEffect
中调用它,并传递给它任何对组件而不是存储可用的状态,另一种可能性是让一个为获取而优化的库获取数据,并在获取后使其对存储可用。文档中提到的关于性能的内容是,您确实可以使用提供的选择器选择存储的某些部分。
如果你想更详细地了解性能,我可以推荐这个this article here(免责声明,我写的)
即便如此,这些性能考虑因素对如何触发从
useEffect
钩子的获取也没有太大影响。