0Pricing
React Academy · Leçon

Chargeurs et actions (API du routeur de données)

Récupérez les données d’une route avant le rendu avec des chargeurs et gérez les envois de formulaires avec des actions.

Chargeurs et actions (API du routeur de données) est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.

Que sont les chargeurs ?

Dans le routeur de données de React Router v6.4+, un chargeur est une fonction asynchrone associée à une route qui récupère les données avant l’affichage de la route, remplaçant le modèle de récupération avec useEffect.

Définir un chargeur

Ajoutez une propriété loader à un objet de route. Elle reçoit { params, request } et renvoie des données (ou une 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 },
]);

Lire les données d’un chargeur avec useLoaderData

useLoaderData() renvoie tout ce que le chargeur a renvoyé. Le composant ne s’affiche qu’une fois le chargeur résolu.

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

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

Que sont les actions ?

Une action est une fonction asynchrone qui gère les modifications de données (soumissions de formulaires, suppressions). Elle s’exécute avant le nouvel affichage de la route après une requête POST de formulaire.

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

Utiliser Form pour déclencher des actions

Remplacez <form> par le composant <Form> de React Router. Lors de la soumission, il sérialise les champs sous forme de FormData et appelle l’action de la route.

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

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

Renvoyer des données depuis les actions

Les actions peuvent renvoyer des données (et pas seulement effectuer une redirection). Lisez-les dans le composant avec useActionData() — c’est utile pour renvoyer des erreurs de validation.

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

États de chargement avec useNavigation

useNavigation() vous indique lorsqu’un chargeur ou une action est en cours d’exécution, afin que vous puissiez afficher des indicateurs de chargement ou désactiver les boutons de soumission.

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

Données différées avec defer()

Utilisez defer() pour renvoyer depuis un chargeur des promesses de données lentes sans bloquer l’affichage, puis déballer ces promesses avec <Await> et 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>
    </>
  );
}

Revalidation après les actions

Une fois une action terminée, React Router réexécute automatiquement tous les chargeurs actifs pour actualiser les données : aucune nouvelle récupération manuelle n’est nécessaire.

Gestion des erreurs dans les chargeurs

Lancez une Response ou n’importe quelle erreur depuis un chargeur ; React Router l’intercepte et affiche l’errorElement de la route, accessible via useRouteError().

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

Fetchers pour les modifications sans navigation

useFetcher() vous permet d’appeler des chargeurs ou des actions sans naviguer. C’est utile pour les formulaires intégrés, par exemple pour aimer une publication sans quitter la page.

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

Vérification rapide

Quel hook lit les données renvoyées par la fonction de chargement d’une route ?

Récapitulatif

L’API de données de React Router utilise des chargeurs pour récupérer les données avant l’affichage et des actions pour gérer les modifications. Les composants lisent les données des chargeurs avec useLoaderData(), les résultats des actions avec useActionData() et l’état de navigation avec useNavigation().

Questions Fréquemment Posées

La leçon « Chargeurs et actions (API du routeur de données) » est-elle gratuite ?

Oui — le texte complet de « Chargeurs et actions (API du routeur de données) » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Chargeurs et actions (API du routeur de données) » ?

Récupérez les données d’une route avant le rendu avec des chargeurs et gérez les envois de formulaires avec des actions. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer React Academy ?

Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Chargeurs et actions (API du routeur de données) » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon React Academy ?

Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Routes imbriquées et mises en page Outlet
  2. Chargeurs et actions (API du routeur de données)
  3. Routes protégées et gardes d’authentification
  4. Gérer l’état dans les paramètres de recherche de l’URL
← Retour à React Academy