PricingLoginStart free
React Academy · leksjon

React Actions og useActionState

Definer server- og klient-actions, håndter innsending av skjemaer og følg med på ventetilstander.

Leksjon 3 av 413 trinn

React Actions og useActionState er en gratis leksjon i React Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Academy inneholder totalt 4 leksjoner.

Velkommen

I denne leksjonen skal du definere React 19 Actions, bruke useActionState til å håndtere tilstanden for skjemainnsendinger og håndtere vente- og feiltilstander på en ryddig måte.

Hva er React Actions?

Actions er asynkrone funksjoner som du sender til skjemaets `action`-egenskap (eller knappens `formAction`). React 19 behandler dem spesielt: Det sporer ventetilstand, håndterer feil og integreres automatisk med Transitions.

Server Actions i Next.js

I Next.js med App Router legger du til 'use server' øverst i en funksjon for å gjøre den til en Server Action. React kaller den på serveren når et skjema sendes inn — du trenger ingen API-rute.
'use server';

export async function createPost(formData) {
  const title = formData.get('title');
  await db.insert(posts).values({ title });
  revalidatePath('/posts');
}

Bruke en Action i et skjema

Send server- eller klienthandlingen direkte til skjemaets `action`-egenskap. React kaller den med FormData når skjemaet sendes inn.
import { createPost } from './actions';

export default function NewPostForm() {
  return (
    <form action={createPost}>
      <input name="title" />
      <button type="submit">Create</button>
    </form>
  );
}

useActionState

useActionState pakker inn en handling slik at du får den gjeldende tilstanden (resultatet fra det siste handlingskallet) og en boolsk pending-verdi. Den innpakkede funksjonen sendes til form action.
'use client';
import { useActionState } from 'react';
import { createPost } from './actions';

function NewPostForm() {
  const [state, action, isPending] = useActionState(createPost, null);
  return (
    <form action={action}>
      {state?.error && <p>{state.error}</p>}
      <input name="title" />
      <button disabled={isPending}>Create</button>
    </form>
  );
}

En Action som returnerer tilstand

Serverhandlingen mottar `(prevState, formData)` når den brukes med useActionState. Returner et objekt med informasjon om suksess eller feil — dette blir den nye tilstanden.
'use server';

export async function createPost(prevState, formData) {
  const title = formData.get('title')?.toString();
  if (!title) return { error: 'Title is required' };
  await db.insert(posts).values({ title });
  return { success: true };
}

isPending for deaktivert innsending

Bruk isPending-verdien fra useActionState til å deaktivere send-knappen og vise en innlastingsindikator mens handlingen kjører.
<button type="submit" disabled={isPending}>
  {isPending ? 'Saving...' : 'Save'}
</button>

Klienthandlinger

Handlinger trenger ikke å kjøres på serveren. En klienthandling er en vanlig asynkron funksjon uten 'use server'. Den får fortsatt vente- og tilstandshåndtering fra useActionState.
async function clientAction(prevState, formData) {
  const res = await fetch('/api/post', {
    method: 'POST', body: formData,
  });
  if (!res.ok) return { error: 'Failed' };
  return { success: true };
}

useFormStatus for underordnede komponenter

I en dypt nestet send-knapp kan du bruke `useFormStatus()` til å lese ventetilstanden i det overordnede skjemaet uten å sende egenskaper gjennom alle komponentnivåene.
'use client';
import { useFormStatus } from 'react-dom';

function SubmitButton() {
  const { pending } = useFormStatus();
  return <button disabled={pending}>Submit</button>;
}

Progressiv forbedring

React Actions med Server Actions fungerer også uten JavaScript (progressiv forbedring). Nettleseren sender en vanlig POST-forespørsel for skjemaet til Next.js-behandleren, slik at funksjonen virker før JavaScript er lastet inn.

Hurtigsjekk

Hva returnerer useActionState som gjør at du kan vise en innlastingstilstand mens en skjemahandling kjører?
Besvar den i den interaktive leksjonen

Oppsummering

React Actions er asynkrone funksjoner som sendes til form action. useActionState pakker inn en handling slik at du får tilstanden, en innpakket handlingsfunksjon og isPending. Server Actions legger til 'use server' og kjører på serveren.

Neste

Neste leksjon: **useOptimistic for umiddelbar tilbakemelding** — du skal vise optimistiske UI-oppdateringer mens en servermutasjon pågår.
Gratis å komme i gang

Lær deg React med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs
88
Leksjoner
324
Start læringen gratisSe hele kurset

Ofte stilte spørsmål

Er leksjonen «React Actions og useActionState» gratis?

Ja – hele teksten i «React Actions og useActionState» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av React Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i React Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «React Actions og useActionState»?

Definer server- og klient-actions, håndter innsending av skjemaer og følg med på ventetilstander. Du øver på React Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med React Academy?

Ingen tidligere erfaring er nødvendig. React Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.

Hvor lang tid tar leksjonen «React Actions og useActionState»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne React Academy-leksjonen?

Ja. Alle React Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

  1. React Server Components forklart
  2. use()-hooken for asynkrone ressurser
  3. React Actions og useActionState
  4. useOptimistic for umiddelbar tilbakemelding
← Tilbake til React Academy