Zustand Store 状态同步问题分析与解决方案
问题背景 在使用 Zustand 构建复杂状态管理时,经常会遇到需要组合多个子 store 的场景。本文通过一个实际案例,分析了在组合 store 时遇到的状态同步问题,并提供了相应的解决方案。 问题描述 原始代码结构 const useDeviceStore = create((set, get) => ({ // 问题:这种方式只获取初始状态,不会响应子store的变化 ...useDeviceIdentityStore.getState(), ...useNetworkStatusStore.getState(), ...useOperationStatusStore.getState(), ...useDeviceInfoStore.getState(), _initialized: false, init: async () => { // 初始化逻辑 await useDeviceIdentityStore.getState().init(); set({ _initialized: true }); } })); // src/pages/mainTab/index.jsx - 组件使用 const MainTab = () => { const deviceId = useDeviceStore((state) => state.deviceId); // 始终为空 const accessCode = useDeviceStore((state) => state.accessCode); // 始终为空 // ... }; 问题现象 设备初始化成功(控制台显示 deviceId: 'E00E40', accessCode: 'CJRA88') 但组件中获取到的 deviceId 和 accessCode 始终为空字符串 子 store 状态正常,主 store 状态不同步 问题根源 状态组合方式错误:使用 ...useDeviceIdentityStore.getState() 只会在 store 创建时获取一次初始状态,不会建立响应式连接。当子 store 状态更新时,主 store 不会自动同步。 ...