0Pricing
React Academy · Lezione

Loader e action (API Data Router)

Recuperi i dati della route prima del render con i loader e gestisca l'invio dei form con le action.

Loader e action (API Data Router) è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.

Che cosa sono i loader?

Nel Data Router di React Router v6.4+, un loader è una funzione asincrona associata a una route che recupera i dati prima del rendering della route, sostituendo il pattern di recupero tramite useEffect.

Definizione di un loader

Aggiunga una proprietà loader a un oggetto route. Riceve { params, request } e restituisce dati (oppure 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 },
]);

Lettura dei dati del loader con useLoaderData

useLoaderData() restituisce ciò che ha restituito il loader. Il componente esegue il rendering solo dopo la risoluzione del loader.

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

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

Che cosa sono le action?

Una action è una funzione asincrona che gestisce le modifiche ai dati (invio di moduli, eliminazioni). Viene eseguita prima che la route esegua nuovamente il rendering dopo un POST del modulo.

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');
}

Uso di Form per attivare le action

Sostituisca <form> con <Form> di React Router. Al momento dell'invio, serializza i campi come FormData e chiama la action della route.

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

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

Restituzione di dati dalle action

Le action possono restituire dati (non solo un reindirizzamento). Li legga nel componente con useActionData() — utile per restituire errori di convalida.

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>
  );
}

Stati di caricamento con useNavigation

useNavigation() indica quando un loader o una action è in esecuzione, permettendo di mostrare indicatori di caricamento o disabilitare i pulsanti di invio.

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

Dati differiti con defer()

Usi defer() per restituire da un loader promise relative a dati lenti senza bloccare il rendering, quindi le risolva con <Await> e 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>
    </>
  );
}

Riverifica dopo le action

Al termine di una action, React Router esegue nuovamente automaticamente tutti i loader attivi per aggiornare i dati: non è necessario alcun recupero manuale.

Gestione degli errori nei loader

Lanci una Response o un qualsiasi errore da un loader; React Router lo intercetta ed esegue il rendering dell'errorElement della route, accessibile tramite useRouteError().

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

Fetcher per modifiche senza navigazione

useFetcher() consente di chiamare loader o action senza navigare. È utile per i moduli incorporati, ad esempio per mettere «Mi piace» a un post senza lasciare la pagina.

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

Verifica rapida

Quale hook legge i dati restituiti dalla funzione loader di una route?

Riepilogo

La Data API di React Router usa i loader per recuperare i dati prima del rendering e le action per gestire le modifiche. I componenti leggono i dati dei loader tramite useLoaderData(), i risultati delle action tramite useActionData() e lo stato della navigazione tramite useNavigation().

Domande Frequenti

La lezione «Loader e action (API Data Router)» è gratuita?

Sì — il testo completo di «Loader e action (API Data Router)» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.

Cosa imparerò in «Loader e action (API Data Router)»?

Recuperi i dati della route prima del render con i loader e gestisca l'invio dei form con le action. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare React Academy?

Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Loader e action (API Data Router)»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione React Academy?

Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Route annidate e layout con Outlet
  2. Loader e action (API Data Router)
  3. Route protette e guard di autenticazione
  4. Gestione dello stato nei parametri di ricerca dell'URL
← Torna a React Academy