♻️ refactor: 收敛切换 SideBar 方法为 useSwitchSideBarOnInit

src/pages/chat/[id]/layout.tsx

@@ -4,7 +4,7 @@ import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
 import AppLayout from '@/layout/AppLayout';
-import { useGlobalStore } from '@/store/global';
+import { useSwitchSideBarOnInit } from '@/store/global';
 import { useSessionStore } from '@/store/session';
 
 import { Sessions } from '../SessionList';
@@ -31,12 +31,7 @@ const ChatLayout = memo<PropsWithChildren>(({ children }) => {
     toggleTopic();
   }, [id]);
 
-  useEffect(() => {
-    const hasRehydrated = useGlobalStore.persist.hasHydrated();
-    if (hasRehydrated) {
-      useGlobalStore.setState({ sidebarKey: 'chat' });
-    }
-  }, []);
+  useSwitchSideBarOnInit('chat');
 
   return (
     <AppLayout>

src/pages/settings/layout.tsx

@@ -5,7 +5,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import SideBar from '@/features/SideBar';
 import { createI18nNext } from '@/locales/create';
-import { useGlobalStore } from '@/store/global';
+import { useSwitchSideBarOnInit } from '@/store/global';
 import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
 const initI18n = createI18nNext('setting');
@@ -18,12 +18,7 @@ const SettingLayout = memo<{ children: ReactNode }>(({ children }) => {
     initI18n.finally();
   }, []);
 
-  useEffect(() => {
-    const hasRehydrated = useGlobalStore.persist.hasHydrated();
-    if (hasRehydrated) {
-      useGlobalStore.setState({ sidebarKey: 'settings' });
-    }
-  }, []);
+  useSwitchSideBarOnInit('settings');
 
   return (
     <>

src/store/global/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './useHydrated';
+export * from './useSwitchSideBarOnInit';

src/store/global/hooks/useSwitchSideBarOnInit.ts

@@ -0,0 +1,17 @@
+import { useEffect } from 'react';
+
+import { SidebarTabKey } from '../initialState';
+import { useGlobalStore } from '../store';
+
+/**
+ * 切换侧边栏选项
+ * @desc 只会在应用初始化时（且水合后）执行一次
+ */
+export const useSwitchSideBarOnInit = (key: SidebarTabKey) => {
+  useEffect(() => {
+    const hasRehydrated = useGlobalStore.persist.hasHydrated();
+    if (hasRehydrated) {
+      useGlobalStore.getState().switchSideBar(key);
+    }
+  }, []);
+};

src/store/global/index.ts

@@ -1,2 +1,3 @@
+export * from './hooks';
 export * from './selectors';
 export * from './store';

src/store/global/store.ts

@@ -22,11 +22,14 @@ const createStore: StateCreator<GlobalStore, [['zustand/devtools', never]]> = (.
 });
 
 //  ===============  persist 本地缓存中间件配置 ============ //
-
-const LOBE_SETTINGS = 'LOBE_SETTINGS';
-
-const persistOptions: PersistOptions<GlobalStore> = {
-  name: LOBE_SETTINGS,
+type GlobalPersist = Pick<GlobalStore, 'preference' | 'settings'>;
+
+const persistOptions: PersistOptions<GlobalStore, GlobalPersist> = {
+  name: 'LOBE_SETTINGS',
+  partialize: (s) => ({
+    preference: s.preference,
+    settings: s.settings,
+  }),
   skipHydration: true,
 };