Tengo una delgada "capa de servicio" en mi aplicación React que utilizo para introducir la mayor cantidad posible de lógica comercial y mantener mis componentes limpios.
Siempre he usado funciones simples para esto: pasar parámetros y realizar todos los pasos (leer/escribir datos, formatear cosas, etc.)
Sin embargo, ahora que me he familiarizado un poco más con los ganchos, me pregunto si es posible tratar estas funciones como ganchos, para hacerme la vida más fácil. Por ejemplo, me gustaría poder acceder al objeto de usuario que está almacenado en contexto, siempre que lo necesite, desde esta capa de servicio.
Al igual que:
import { useContext } from "react"; import { AppContext } from "../component/global/app_context"; const Save = async link => { let { user } = useContext(AppContext); //bombs on this line! //...do stuff... return true; }; export default Save;Entonces lo llamaría así:
const onEditSave = async link => { let updateRes = await Save(link); ...do other things...redirect, etc. };Sigo recibiendo el temido error "Los ganchos solo se pueden llamar dentro del cuerpo de un componente de función", así que, naturalmente, estoy haciendo algo mal. Simplemente no entiendo por qué esta función no se puede convertir en un gancho. ¿Cómo lo usaría? ¿Es esta una idea estúpida? Si es estúpido, estoy bien si tira del usuario y lo pasa a esta función... es solo que lo hago mucho y parece tedioso y sin sentido poner esto en los componentes mismos.
¿Existe una manera más fácil de acceder a los valores de contexto desde una función simple, además de las que se usan para mostrar los componentes de React?
¡Ciertamente puedes hacer lo que estás tratando de hacer! Es solo que necesitas escribir un gancho personalizado. Puede llamar a los ganchos de React en componentes de función y dentro de otros ganchos.
Un patrón común es devolver funciones de su gancho personalizado que usa valores de otros ganchos.
En su caso, creo que lo mejor es escribir un enlace personalizado que le dé acceso al AppContext que ha creado, además de "utilidades" adicionales.
Algo como esto.
// Inside component/global/app_context import React, { useContext } from "react"; const AppContext = React.createContext() const useAppContext = () => { const context = useContext(AppContext); function saveUser() { // ...do stuff with appContext.user ... } return { ...context, saveUser, } } export default useUserContext;Entonces puedes acceder a él como:
const MyComponent = () => { const {user, saveUser} = useAppContext() //...rest of component }Puedes llegar muy lejos con este patrón. ¡Tanto poder!