0Pricing
React Academy · Lekcja

Loadery i akcje (Data Router API)

Pobieranie danych trasy przed renderowaniem za pomocą loaderów oraz obsługa przesyłania formularzy za pomocą akcji.

Loadery i akcje (Data Router API) to bezpłatna lekcja React Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 4 lekcji w sumie.

Czym są loadery

W Data Router w React Router v6.4+ loader jest asynchroniczną funkcją przypisaną do trasy, która pobiera dane przed renderowaniem trasy, zastępując wzorzec pobierania danych za pomocą useEffect.

Definiowanie loadera

Dodaj właściwość loader do obiektu trasy. Otrzymuje on { params, request } i zwraca dane (lub 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 },
]);

Odczytywanie danych loadera za pomocą useLoaderData

useLoaderData() zwraca wszystko, co zwrócił loader. Komponent jest renderowany dopiero po zakończeniu działania loadera.

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

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

Czym są akcje

action jest asynchroniczną funkcją obsługującą modyfikacje danych (wysyłanie formularzy i usuwanie danych). Jest wykonywana przed ponownym renderowaniem trasy po wysłaniu formularza metodą POST.

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

Wywoływanie akcji za pomocą Form

Zastąp <form> elementem <Form> z React Router. Podczas wysyłania serializuje on pola jako FormData i wywołuje action trasy.

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

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

Zwracanie danych z akcji

Akcje mogą zwracać dane, a nie tylko przekierowywać. Odczytaj je w komponencie za pomocą useActionData() — jest to przydatne do zwracania błędów walidacji.

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

Stany ładowania za pomocą useNavigation

useNavigation() informuje, czy loader lub action jest w trakcie wykonywania, dzięki czemu można wyświetlić wskaźniki ładowania lub wyłączyć przyciski wysyłania.

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

Odroczone dane za pomocą defer()

Użyj defer(), aby zwrócić z loadera obietnice dotyczące wolno pobieranych danych bez blokowania renderowania, a następnie rozpakuj je za pomocą <Await> i 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>
    </>
  );
}

Ponowna walidacja po wykonaniu akcji

Po zakończeniu akcji React Router automatycznie ponownie uruchamia wszystkie aktywne loadery, aby odświeżyć dane — nie trzeba ręcznie ponownie ich pobierać.

Obsługa błędów w loaderach

Rzuć z loadera obiekt Response lub dowolny błąd. React Router go przechwyci i wyrenderuje element errorElement trasy, dostępny za pomocą useRouteError().

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

Fetchery do modyfikacji bez nawigacji

useFetcher() umożliwia wywoływanie loaderów lub akcji bez nawigowania. Jest przydatny w formularzach wbudowanych na stronie, na przykład do polubienia posta bez opuszczania bieżącej strony.

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

Szybki sprawdzian

Jaki hook odczytuje dane zwrócone przez funkcję loadera trasy?

Podsumowanie

Data API React Router używa loaderów do pobierania danych przed renderowaniem oraz akcji do obsługi modyfikacji. Komponenty odczytują dane loadera za pomocą useLoaderData(), wyniki akcji za pomocą useActionData(), a stan nawigacji za pomocą useNavigation().

Często zadawane pytania

Czy lekcja „Loadery i akcje (Data Router API)” jest bezpłatna?

Tak — pełny tekst „Loadery i akcje (Data Router API)” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Loadery i akcje (Data Router API)”?

Pobieranie danych trasy przed renderowaniem za pomocą loaderów oraz obsługa przesyłania formularzy za pomocą akcji. Ćwiczysz React Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć React Academy?

Nie wymagamy żadnego doświadczenia. React Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Loadery i akcje (Data Router API)”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji React Academy?

Tak. Każda lekcja React Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Zagnieżdżone trasy i układy Outlet
  2. Loadery i akcje (Data Router API)
  3. Chronione trasy i strażnicy uwierzytelniania
  4. Zarządzanie stanem w parametrach wyszukiwania URL
← Powrót do React Academy