Context

用于管理全局数据，包括用户信息、权限信息等, 一般配合useGlobalData使用。

GlobalContext 代码实现

将下列代码复制到src/context/GlobalContext.tsx文件中。

import { GlobalContextType, initGlobalData } from '@/context/globalData'
import React, { createContext, useReducer } from 'react'
import { Action, GlobalReducer } from './GlobalReducer'

export const GlobalContext = createContext<{
  globalData: GlobalContextType
  dispatch: React.Dispatch<Action>
} | null>(null)

export const GlobalProvider = ({ children }: { children: React.ReactNode }) => {
  const [globalData, dispatch] = useReducer(GlobalReducer, initGlobalData)

  return (
    <GlobalContext.Provider value={{ globalData, dispatch }}>
      {children}
    </GlobalContext.Provider>
  )
}

GlobalReducer 代码实现

将下列代码复制到src/context/GlobalReducer.tsx文件中。

import { GlobalContextType } from './globalData'

export type Action = {
  type: 'get' | 'set' | 'del'
  key: keyof GlobalContextType
  value?: any
}

export const GlobalReducer = (state: GlobalContextType, action: Action) => {
  switch (action.type) {
    case 'get':
      return state
    case 'set':
      return { ...state, [action.key]: action.value }
    case 'del':
      delete state[action.key]
      return state

    default:
      return state
  }
}

globalData 代码实现

将下列代码复制到src/context/globalData.tsx文件中。

export const initGlobalData = {
  // 此处可以根据实际情况初始化全局数据
  // user: {
  //   name: 'admin',
  //   roles: ['admin'],
  // },
  // version: '0.0.0',
}

export type GlobalContextType = typeof initGlobalData

导出context里的工具函数

将下列代码复制到src/context/index.ts文件中。

export * from './GlobalContext'
export * from './GlobalReducer'
export * from './globalData'

useGlobalData 代码实现

将下列代码复制到src/hooks/useGlobalData.tsx文件中。

import { GlobalContext } from '@/context/GlobalContext'
import { useContext } from 'react'

export default () => {
  const context = useContext(GlobalContext)
  if (!context) throw new Error('Global data is not initialized')
  return context
}

在src/hooks/index.ts写入以下代码

export * from './useGlobalData';

使用方法

请前往useGlobalData中查看具体用法。