useContext封装使用示例

1.封装，封装一个account账户功能的上下文

import { createContext, useContext } from 'react'

import type { UserFollowersRes, UserInfoRes } from '@/api/user/types'
import { CONTEXT_ERR } from '@/errors/context'

interface Value {
  userInfo: UserInfoRes | null
  useUserInfo: () => any
  isPending: boolean
  isOtherUser: boolean
  isAgent: boolean
  refetchUserInfo: VoidFunction
  followers?: UserFollowersRes
  followingResults: ReturnType<any>
  refetchFollow: () => void
}

const AccountContext = createContext<Value | null>(null)

export const AccountProvider = AccountContext.Provider

export const useAccountContext = () => {
  const context = useContext(AccountContext)
  if (!context) {
    throw CONTEXT_ERR.notFound('AccountProvider')
  }

  return context
}

2.使用

import { AccountProvider } from '@/contexts/account'

export const AccountPage = () => {
return (
    <AccountProvider
      value={{
        userInfo: otherUserInfo,
        useUserInfo: useUserInfo,
        isPending: false,
        isOtherUser: userInfo?.user_id !== userId,
        isAgent: query.t === UserCategory.Agent,
        followingResults: () => {},
        refetchFollow: () => {},
        refetchUserInfo: () => {},
      }}
    </AccountProvider>
  )
}