0Pricing
React Academy · Aula

Carregadores e ações (API de roteador de dados)

Busque os dados da rota antes da renderização com carregadores e trate envios de formulários com ações.

Carregadores e ações (API de roteador de dados) é uma aula grátis de React Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.

O que são carregadores?

No React Router v6.4+ Data Router, um carregador é uma função assíncrona em uma rota que busca dados antes de a rota ser renderizada, substituindo o padrão de busca com useEffect.

Definindo um carregador

Adicione a propriedade loader a um objeto de rota. Ela recebe { params, request } e retorna dados (ou uma 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 },
]);

Lendo dados do carregador com useLoaderData

useLoaderData() retorna o que quer que o carregador tenha retornado. O componente só é renderizado depois que o carregador é concluído.

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

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

O que são ações?

Uma ação é uma função assíncrona que lida com alterações de dados (envios de formulários, exclusões). Ela é executada antes que a rota seja renderizada novamente após um POST de formulário.

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

Usando um formulário para acionar ações

Substitua <form> pelo <Form> do React Router. No envio, ele serializa os campos como FormData e chama a ação da rota.

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

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

Retornando dados das ações

As ações podem retornar dados (não apenas redirecionar). Leia-os no componente com useActionData() — isso é útil para retornar erros de validação.

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 carregamento com useNavigation

useNavigation() informa quando um carregador ou uma ação está em andamento, para que você possa mostrar indicadores de carregamento ou desativar botões de envio.

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

Dados adiados com defer()

Use defer() para retornar promessas de dados lentos de um carregador sem bloquear a renderização e, depois, desembrulhe-as com <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>
    </>
  );
}

Revalidação após ações

Depois que uma ação é concluída, o React Router executa novamente todos os carregadores ativos para atualizar os dados — não é necessário fazer uma nova busca manualmente.

Tratamento de erros nos carregadores

Lance uma Response ou qualquer erro a partir de um carregador; o React Router o captura e renderiza o errorElement da rota, acessível por meio de useRouteError().

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

Fetchers para alterações sem navegação

useFetcher() permite chamar carregadores ou ações sem navegar. É útil para formulários embutidos, como indicar que uma publicação recebeu uma curtida sem sair da página.

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

Verificação rápida

Qual gancho lê os dados retornados pela função de carregamento de uma rota?

Recapitulação

A API de dados do React Router usa carregadores para buscar dados antes da renderização e ações para lidar com alterações. Os componentes leem os dados do carregador por meio de useLoaderData(), os resultados das ações por meio de useActionData() e o estado da navegação por meio de useNavigation().

Perguntas Frequentes

A aula “Carregadores e ações (API de roteador de dados)” é grátis?

Sim — o texto completo de “Carregadores e ações (API de roteador de dados)” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.

O que vou aprender em “Carregadores e ações (API de roteador de dados)”?

Busque os dados da rota antes da renderização com carregadores e trate envios de formulários com ações. Você pratica React Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar React Academy?

Nenhuma experiência prévia é necessária. React Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Carregadores e ações (API de roteador de dados)”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de React Academy?

Sim. Cada aula de React Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Rotas aninhadas e layouts com Outlet
  2. Carregadores e ações (API de roteador de dados)
  3. Rotas protegidas e guardas de autenticação
  4. Gerenciando estado nos parâmetros de busca da URL
← Voltar para React Academy