Пытаться предоставить createContext объект значения по умолчанию, который содержит функции. Есть ли правильный способ сделать это?

Question

Вот мой создатель контекста, в котором я создал начальное состояние для контекста, но мне также нужно передать функции, которые я хочу использовать, с помощью useContext в проекте. Я передал функции таким образом. Может кто-нибудь сказать мне лучше способ сделать это. PS этот метод работает нормально, но я думаю, что он создаст проблемы для больших проектов

import { createContext } from "react"
import { initialState } from "./Initstate"
import { IInitState } from "./alert/IInitState"

export interface IGithubContext {
    State: IInitState,
    searchusers: (login: string) => void,
    clearUsers: () => void,
    getuser: (login: string) => void,
    getuserrepos: (login: string) => void
}

const istate: IGithubContext = {
    State: initialState,
    clearUsers: () => null,
    getuser: () => null,
    getuserrepos: () => null,
    searchusers: () => null
}
const GithubContext = createContext<IGithubContext>(istate)

export default GithubContext

Вот мой провайдер, который содержит функции, которые я пытаюсь передать в значении = {{}}, как вы можете видеть

import GithubReducer, { Action } from "./GithubReducer"
import GithubContext from "./GithubContext"
import { SET_LOADING, CLEAR_USERS, USER_LOADING, GET_USER, SEARCH_USERS, GET_REPOS } from "./Types"
import { IInitState } from "./alert/IInitState"
import { initialState } from "./Initstate"

const GithubState = (props: any) => {


    const [state, dispatch] = useReducer<React.Reducer<IInitState, Action>>(GithubReducer, initialState)

    const searchusers = async (search: string) => {
        setloading()
        const data = await fetch(`https://api.github.com/search/users?q=${search}`)
        const items = await data.json()
        dispatch({ type: SEARCH_USERS, payload: items.items })
    }

    const getuser = async (login: string) => {
        userloading()
        const data = await fetch(`https://api.github.com/users/${login}`)
        const items = await data.json()
        dispatch({ type: GET_USER, payload: items })
    }

    const getuserrepos = async (login: string) => {
        const data = await fetch(`https://api.github.com/users/${login}/repos?per_page=5&sort=created:asc`)
        const items = await data.json()
        dispatch({ type: GET_REPOS, payload: items })
    }

    const clearUsers = () => dispatch({ type: CLEAR_USERS })
    const setloading = () => dispatch({ type: SET_LOADING })
    const userloading = () => dispatch({ type: USER_LOADING })

    return (
        <GithubContext.Provider value={{
            State: {
                users: state.users,
                user: state.user,
                loading: state.loading,
                userloading: state.userloading,
                repos: state.repos,
                alert: state.alert,
            },
            searchusers,
            clearUsers,
            getuser,
            getuserrepos
        }}>
            {props.children}
        </GithubContext.Provider>
    )

}

export default GithubState

Answer 1

Значения для функции в контексте по умолчанию будут равны предоставленному значению, если либо Provider не включает компоненты, которым нужен контекст, либо когда компонент пытается получить доступ к значениям из контекста, не имея к нему доступа. ( не дочерние элементы Provider).

Текущая реализация значений по умолчанию для функций, например, getuser: () => null, просто не срабатывает, когда какой-то компонент вызывает функцию getuser и не имеет доступа к поставщику контекста. Так что да, это вызовет некоторые проблемы.

Альтернативный подход , выдает ошибку внутри значений по умолчанию для функций, так что когда ComponentA не является дочерний элемент Provider вызывает функцию getuser или searchusers, вместо того, чтобы молча терпеть неудачу, функция выдает ошибку. При таком подходе, по крайней мере, вы будете знать, что какой-то компонент, не имеющий доступа к контексту, пытался получить доступ к некоторому его значению.

const istate: IGithubContext = {
    State: initialState,
    clearUsers: () => { throw new Error('GithubContext not avaliable') },
    getuser: () => { throw new Error('GithubContext not avaliable') },
    /*other values*/
}