0Pricing
React Academy · Lección

Loaders y actions (API de Data Router)

Obtenga los datos de la ruta antes del renderizado con loaders y gestione los envíos de formularios con actions.

Loaders y actions (API de Data Router) es una lección gratuita de React Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.

¿Qué son los loaders?

En el Data Router de React Router v6.4+, un loader es una función asíncrona asociada a una ruta que obtiene datos antes de que la ruta se renderice, sustituyendo el patrón de obtención mediante useEffect.

Definir un loader

Añada una propiedad loader a un objeto de ruta. Recibe { params, request } y devuelve datos (o una Response).

import { createBrowserRouter } from 'react-router-dom';

async function userLoader({ params }) {
  const res = await fetch(`/api/users/${params.id}`);
  if (!res.ok) throw new Response('Not Found', { status: 404 });
  return res.json();
}

const router = createBrowserRouter([
  { path: '/users/:id', element: <UserDetail />, loader: userLoader },
]);

Leer datos de un loader con useLoaderData

useLoaderData() devuelve lo que haya devuelto el loader. El componente solo se renderiza después de que el loader se resuelva.

import { useLoaderData } from 'react-router-dom';

function UserDetail() {
  const user = useLoaderData();
  return <h1>{user.name}</h1>;
}

¿Qué son las actions?

Una action es una función asíncrona que gestiona modificaciones de datos (envíos de formularios y eliminaciones). Se ejecuta antes de que la ruta vuelva a renderizarse después de un POST de formulario.

async function createUserAction({ request }) {
  const formData = await request.formData();
  const name = formData.get('name');
  await fetch('/api/users', {
    method: 'POST',
    body: JSON.stringify({ name }),
    headers: { 'Content-Type': 'application/json' },
  });
  return redirect('/users');
}

Usar Form para activar actions

Sustituya <form> por <Form> de React Router. Al enviarlo, serializa los campos como FormData y llama a la action de la ruta.

import { Form } from 'react-router-dom';

function NewUser() {
  return (
    <Form method="post">
      <input name="name" />
      <button type="submit">Create</button>
    </Form>
  );
}

Devolver datos desde las actions

Las actions pueden devolver datos, no solo redirigir. Léalos en el componente con useActionData() — resulta útil para devolver errores de validación.

async function loginAction({ request }) {
  const data = await request.formData();
  const errors = validate(data);
  if (errors) return errors; // returned to useActionData
  await login(data);
  return redirect('/dashboard');
}

function Login() {
  const errors = useActionData();
  return (
    <Form method="post">
      {errors?.email && <p>{errors.email}</p>}
      <input name="email" />
    </Form>
  );
}

Estados de carga con useNavigation

useNavigation() le indica cuándo hay un loader o una action en curso para que pueda mostrar indicadores de carga o desactivar botones de envío.

function SubmitButton() {
  const navigation = useNavigation();
  const isSubmitting = navigation.state === 'submitting';
  return (
    <button type="submit" disabled={isSubmitting}>
      {isSubmitting ? 'Saving...' : 'Save'}
    </button>
  );
}

Datos diferidos con defer()

Use defer() para devolver promesas de datos lentos desde un loader sin bloquear el renderizado y, después, desenvolverlas con <Await> y Suspense.

import { defer, Await } from 'react-router-dom';

async function slowLoader() {
  return defer({ fast: await getFast(), slow: getSlow() });
}

function Page() {
  const { fast, slow } = useLoaderData();
  return (
    <>
      <h1>{fast.title}</h1>
      <Suspense fallback={<p>Loading...</p>}>
        <Await resolve={slow}>{data => <Chart data={data} />}</Await>
      </Suspense>
    </>
  );
}

Revalidación después de las actions

Después de que una action termina, React Router vuelve a ejecutar automáticamente todos los loaders activos para actualizar los datos; no es necesario volver a obtenerlos manualmente.

Gestión de errores en los loaders

Lance una Response o cualquier error desde un loader; React Router lo captura y renderiza el errorElement de la ruta, al que se puede acceder mediante useRouteError().

function ErrorPage() {
  const error = useRouteError();
  return (
    <div>
      <h1>{error.status} {error.statusText}</h1>
    </div>
  );
}

Fetchers para modificaciones sin navegación

useFetcher() le permite llamar a loaders o actions sin navegar. Es útil para formularios integrados, como indicar que le gusta una publicación sin abandonar la página.

function LikeButton({ postId }) {
  const fetcher = useFetcher();
  return (
    <fetcher.Form method="post" action={`/posts/${postId}/like`}>
      <button type="submit">Like</button>
    </fetcher.Form>
  );
}

Comprobación rápida

¿Qué hook lee los datos devueltos por la función loader de una ruta?

Resumen

La API de datos de React Router usa loaders para obtener datos antes del renderizado y actions para gestionar modificaciones. Los componentes leen los datos de los loaders mediante useLoaderData(), los resultados de las actions mediante useActionData() y el estado de navegación mediante useNavigation().

Preguntas frecuentes

¿La lección «Loaders y actions (API de Data Router)» es gratis?

Sí — el texto completo de «Loaders y actions (API de Data Router)» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Loaders y actions (API de Data Router)»?

Obtenga los datos de la ruta antes del renderizado con loaders y gestione los envíos de formularios con actions. Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar React Academy?

No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «Loaders y actions (API de Data Router)»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de React Academy?

Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Rutas anidadas y layouts con Outlet
  2. Loaders y actions (API de Data Router)
  3. Rutas protegidas y guards de autenticación
  4. Gestionar el estado en los parámetros de búsqueda de la URL
← Volver a React Academy