En un esfuerzo por aprender mejor React, TypeScript y Context / Hooks, estoy creando una aplicación Todo simple. Sin embargo, el código necesario para que el contexto se sintiera engorroso.
Por ejemplo, si quiero cambiar lo que tiene Todo, tengo que cambiarlo en tres lugares (interfaz ITodo, valor de contexto predeterminado, valor de estado predeterminado). Si quiero transmitir algo nuevo, tengo que hacerlo en tres lugares (TodoContext, el valor predeterminado de TodoContext y value=). ¿Hay una mejor manera de no tener que escribir tanto código?
import React from 'react' export interface ITodo { title: string, body?: string, id: number, completed: boolean } interface TodoContext { todos: ITodo[], setTodos: React.Dispatch<React.SetStateAction<ITodo[]>> } export const TodoContext = React.createContext<TodoContext>({ todos: [{title: 'loading', body: 'loading', id: 0, completed: false}], setTodos: () => {} }) export const TodoContextProvider: React.FC<{}> = (props) => { const [todos, setTodos] = React.useState<ITodo[]>([{title: 'loading', body: 'loading', id: 0, completed: false}]) return ( <TodoContext.Provider value={{todos, setTodos}}> {props.children} </TodoContext.Provider> ) }No hay forma de evitar declarar la interfaz y los valores de tiempo de ejecución, porque los tipos de TS desaparecen en tiempo de ejecución, por lo que solo le quedan los valores de tiempo de ejecución. No se puede generar uno a partir del otro.
Sin embargo, si sabe que solo accederá al contexto dentro del componente TodoContextProvider , puede evitar inicializar TodoContext haciendo un poco de trampa y simplemente diciéndole a TS que lo que está pasando está bien.
const TodoContext = React.createContext<TodoContext>({} as TodoContext) Si siempre se asegura de acceder solo al contexto dentro de TodoContextProvider donde todos y setTodos se crean con useState , entonces puede omitir con seguridad la inicialización de TodoContext dentro de createContext porque nunca se accederá a ese valor inicial.
Nota de la documentación de reacción :
El argumento defaultValue solo se usa cuando un componente no tiene un proveedor coincidente arriba en el árbol.
La forma en que prefiero hacerlo es especificando que el valor predeterminado puede ser undefined
const TodoContext = React.createContext<ITodoContext | undefined>(undefined)Y luego, para usar el contexto, creo un gancho que hace la verificación por mí:
function useTodoContext() { const context = useContext(TodoContext) if (context === undefined) { throw new Error("useTodoContext must be within TodoProvider") } return context } ¿Por qué me gusta este enfoque? Inmediatamente me está dando retroalimentación sobre por qué mi valor de contexto no está undefined .
Para obtener más información, consulte esta publicación de blog de Kent C. Dodds
Después de un tiempo, creo que he encontrado la mejor manera de hacerlo.
import React from 'react' export interface ITodo { title: string, body?: string, id: number, completed: boolean } const useValue = () => { const [todos, setTodos] = React.useState<ITodo[]>([]) return { todos, setTodos } } export const TodoContext = React.createContext({} as ReturnType<typeof useValue>) export const TodoContextProvider: React.FC<{}> = (props) => { return ( <TodoContext.Provider value={useValue()}> {props.children} </TodoContext.Provider> ) }De esta manera, hay un punto de cambio único al agregar algo nuevo a su contexto, en lugar de un punto de cambio triple originalmente. ¡Disfrutar!
Mi situación puede ser un poco diferente a la tuya (y me doy cuenta de que ya hay una respuesta aceptada), pero parece funcionar para mí por ahora. Modificado de la respuesta anterior de Aron porque usar esa técnica en realidad no funcionó en mi caso.
El nombre de mi contexto real es diferente, por supuesto.
export const TodoContext = createContext<any>({} as any)