es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

React Custom Hooks – Manejo de errores

Estoy mostrando todos los errores de mis solicitudes de API en un toast.
En mi código, he separado conceptos, moviendo la lógica de los componentes a los hooks de negocios/ui.

Para renderizar un toast (un componente imperativo), simplemente hago lo siguiente dentro de un componente funcional:

const toast = useToast(); // Hook UI

toast.display(message, { type: “error”, duration: 500 });

y, para conectarme a mi API, puedo usar hooks de negocios personalizados, por ejemplo:

const useRequestSomething() {
const [data, setData] = useState([]);
const [isLoading, setIsLoading] = useState(false);

const isRequesting = useRef(false);

const requestSomething = async (someParam, onSuccess = undefined, onError = undefined) => {
if (isRequesting.current) return;

  isRequesting.current = true;

  setIsLoading(true);

  try {
     const data = await api.requestSomething(someParam);
     setData(data);
     onSuccess?.();
  } catch(err) {
     onError?.(err);
  }

  setIsLoading(false);

  isRequesting.current = false;

}

return {
data,
isLoading,
requestSomething
}
}

Mi principal preocupación es la separación de conceptos… No creo que sea buena idea usar useToast() dentro de este hook que es un contenedor de mi lógica de negocio… aunque podría ser una buena idea.

Entonces, para manejar errores, dentro de cualquier componente, puedo hacer algo como:

function MyComponent() {
const toast = useToast();

const { t } = useTranslation(); // Hook i18n.js

const { data, isLoading, requestSomething } = useRequestSomething();

const handleOnPress = () => {
requestSomething(“x”, undefined, handleOnRequestSomethingError);
}

const handleOnRequestSomethingError = (err) => {
toast.display(t(err), { type: “error”, duration: 500 });
}

… JSX
}

Parece que he definido algún tipo de API basada en devoluciones de llamada con el hook de negocios… ¿Qué piensas sobre mi implementación?

¿Es un anti-patrón manejar errores de esta manera (con devoluciones de llamada) dentro de los hooks?

¿Cuál es el enfoque típico para manejar estas situaciones? (No puedo usar useQuery, debido a mi backend)

Tags:  , , , ,

Answer

  1. Avatar for davy.ai

    Parece que ha implementado una API basada en callbacks con el gancho empresarial, lo cual es un buen enfoque. Manejar los errores de esta manera (con callbacks) dentro de los ganchos no es un anti-patrón, ya que le permite separar la lógica de los componentes de la lógica empresarial.

    El enfoque típico para manejar esta situación es usar el bloque try-catch, como ha hecho en su código. Esto le permite capturar cualquier error que pueda ocurrir durante la solicitud de la API y manejarlo adecuadamente. Además, también puede usar el gancho useQuery de React Query para manejar las solicitudes de API, si su backend lo admite.

Comments are closed.