fix: 全局store优化,增加getters

src/store/GlobalStateProvider.tsx

@@ -1,19 +1,26 @@
-import { PropsWithChildren} from 'react'
+import { PropsWithChildren } from 'react'
 import loadingState from './globalStates/loadingState'
 import userState from './globalStates/userState'
 import userAuthState from './globalStates/userAuthState'
 import adTypeState from './globalStates/adTypeState'
 
 export default function GlobalStateProvider({children}: PropsWithChildren) {
-  return (
-    <userAuthState.GlobalStateProvider>
-      <loadingState.GlobalStateProvider>
-        <userState.GlobalStateProvider>
-          <adTypeState.GlobalStateProvider>
-            {children}
-          </adTypeState.GlobalStateProvider>
-        </userState.GlobalStateProvider>
-      </loadingState.GlobalStateProvider>
-    </userAuthState.GlobalStateProvider>
-  )
+  const globalStates = [
+    // 需要设置为全局的state的加到这里
+    adTypeState,
+    userState,
+    loadingState,
+    userAuthState
+  ] 
+
+  let provider = children
+  for (const state of globalStates) {
+    provider = (
+      <state.GlobalStateProvider>
+        {provider}
+      </state.GlobalStateProvider>
+    )
+  }
+  
+  return provider 
 }

src/store/globalStates/adTypeState.ts

@@ -1,8 +1,22 @@
 import createGlobalStateHook from '../stateCreater'
 import type { AdTypesMapType } from '@src/pages/Manage/components/AdManage/types'
 
-const {useGlobalState,useGlobalStateUpdate,GlobalStateProvider} = createGlobalStateHook<AdTypesMapType>({} as AdTypesMapType)
+const {
+  useGlobalState,
+  useGlobalStateUpdate,
+  GlobalStateProvider
+} = createGlobalStateHook<AdTypesMapType>(
+    {} as AdTypesMapType
+)
 
-export default { useGlobalState, useGlobalStateUpdate, GlobalStateProvider }
-export { useGlobalState, useGlobalStateUpdate, GlobalStateProvider }
+export default { 
+  useGlobalState, 
+  useGlobalStateUpdate, 
+  GlobalStateProvider 
+}
+export { 
+  useGlobalState, 
+  useGlobalStateUpdate, 
+  GlobalStateProvider 
+}
 

src/store/globalStates/loadingState.ts

@@ -1,7 +1,19 @@
 import createGlobalStateHook from '../stateCreater'
 
-const {useGlobalState,useGlobalStateUpdate,GlobalStateProvider} = createGlobalStateHook(false)
+const {
+  useGlobalState,
+  useGlobalStateUpdate,
+  GlobalStateProvider
+} = createGlobalStateHook(false)
 
-export default { useGlobalState, useGlobalStateUpdate, GlobalStateProvider }
-export { useGlobalState, useGlobalStateUpdate, GlobalStateProvider }
+export default { 
+  useGlobalState, 
+  useGlobalStateUpdate, 
+  GlobalStateProvider 
+}
+export { 
+  useGlobalState, 
+  useGlobalStateUpdate, 
+  GlobalStateProvider 
+}
 

src/store/globalStates/userAuthState.ts

@@ -4,9 +4,24 @@ export interface UserAuthType {
     isAdmin: boolean
 }
 
+const {
+  useGlobalState,
+  useGlobalStateUpdate,
+  GlobalStateProvider
+} = createGlobalStateHook<UserAuthType>(
+  {
+    isAdmin: false
+  }
+)
 
-const {useGlobalState,useGlobalStateUpdate,GlobalStateProvider} = createGlobalStateHook<UserAuthType>({isAdmin:false})
-
-export default { useGlobalState, useGlobalStateUpdate, GlobalStateProvider }
-export { useGlobalState, useGlobalStateUpdate, GlobalStateProvider }
+export default { 
+  useGlobalState, 
+  useGlobalStateUpdate, 
+  GlobalStateProvider 
+}
+export { 
+  useGlobalState, 
+  useGlobalStateUpdate, 
+  GlobalStateProvider 
+}
 

src/store/globalStates/userState.ts

@@ -1,7 +1,19 @@
 import createGlobalStateHook from '../stateCreater'
 
-const { useGlobalState, useGlobalStateUpdate, GlobalStateProvider } = createGlobalStateHook<UserInfoType>()
+const { 
+  useGlobalState, 
+  useGlobalStateUpdate, 
+  GlobalStateProvider 
+} = createGlobalStateHook<UserInfoType>()
 
-export default { useGlobalState, useGlobalStateUpdate, GlobalStateProvider }
-export { useGlobalState, useGlobalStateUpdate, GlobalStateProvider }
+export default { 
+  useGlobalState, 
+  useGlobalStateUpdate, 
+  GlobalStateProvider 
+}
+export { 
+  useGlobalState, 
+  useGlobalStateUpdate, 
+  GlobalStateProvider 
+}
 

src/store/stateCreater.tsx

@@ -1,9 +1,10 @@
 import React, { useState, createContext, useContext, PropsWithChildren } from 'react'
 
 // 构造器函数，用于创建全局状态管理钩子
-function createGlobalStateHook<T>(initialState?: T) {
+function createGlobalStateHook<T,G=undefined>(initialState?: T, getterSetter?: (state?: T)=>G) {
   const GlobalStateContext = createContext<T|undefined>(initialState)
   const GlobalStateUpdateContext = createContext<React.Dispatch<React.SetStateAction<T|undefined>>>(() => {})
+  const GlobalStateGetterContext = createContext<G|undefined>(undefined)
 
 
   function useGlobalState() {
@@ -14,13 +15,20 @@ function createGlobalStateHook<T>(initialState?: T) {
     return useContext(GlobalStateUpdateContext)
   }
 
+  function useGlobalStateGetter() {
+    return useContext(GlobalStateGetterContext)
+  }
+
   function GlobalStateProvider({ children }: PropsWithChildren) {
     const [globalState, setGlobalState] = useState(initialState)
+    const getters = getterSetter?.(globalState)
 
     return (
       <GlobalStateContext.Provider value={globalState}>
         <GlobalStateUpdateContext.Provider value={setGlobalState}>
-          {children}
+          <GlobalStateGetterContext.Provider value={getters}>
+            {children}
+          </GlobalStateGetterContext.Provider>
         </GlobalStateUpdateContext.Provider>
       </GlobalStateContext.Provider>
     )
@@ -30,6 +38,7 @@ function createGlobalStateHook<T>(initialState?: T) {
     useGlobalState,
     useGlobalStateUpdate,
     GlobalStateProvider,
+    useGlobalStateGetter
   }
 }