React Academy · Lektion

React Actions och useActionState

Definiera server- och klient-actions, hantera formulärinskickningar och följ väntande tillstånd.

Lektion 3 av 413 steg

React Actions och useActionState är en gratis lektion i React Academy på CoddyKit. Detta är lektion 3 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för React Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Academy innehåller totalt 4 lektioner.

Välkommen

I den här lektionen kommer du att definiera React 19 Actions, använda useActionState för att hantera formulärskickningars tillstånd samt hantera väntande tillstånd och fel på ett tydligt sätt.

Vad är React Actions?

Actions är asynkrona funktioner som du skickar till formulärets `action`-prop (eller knappens `formAction`). React 19 behandlar dem på ett särskilt sätt: det spårar väntande tillstånd, hanterar fel och integreras automatiskt med Transitions.

Server Actions i Next.js

I Next.js med App Router lägger du till 'use server' överst i en funktion för att göra den till en Server Action. React anropar den på servern när ett formulär skickas — ingen API-route behövs.

'use server';

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

Använda en Action i ett formulär

Skicka server- eller klient-actionen direkt till formulärets `action`-prop. React anropar den med FormData när formuläret skickas.

import { createPost } from './actions';

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

useActionState

useActionState omsluter en action och ger dig det aktuella tillståndet (det senaste resultatet från actionen) samt en boolesk pending-variabel. Den omslutna funktionen skickas till 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>
  );
}

Action som returnerar tillstånd

Server action tar emot `(prevState, formData)` när den används med useActionState. Returnera ett objekt med information om lyckat resultat eller fel — detta blir det nya tillståndet.

'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 för inaktiverad skickaknapp

Använd värdet isPending från useActionState för att inaktivera skickaknappen och visa en laddningsindikator medan actionen körs.

<button type="submit" disabled={isPending}>
  {isPending ? 'Saving...' : 'Save'}
</button>

Client Actions

Actions behöver inte köras på servern. En client action är en vanlig asynkron funktion utan 'use server'. Den får fortfarande tillstånds- och pending-hantering från 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 för underordnade komponenter

I en djupt nästlad skickaknapp använder du `useFormStatus()` för att läsa det överordnade formulärets väntande tillstånd utan att behöva skicka props genom flera komponentlager.

'use client';
import { useFormStatus } from 'react-dom';

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

Progressiv förbättring

React Actions med Server Actions fungerar även utan JavaScript (progressiv förbättring). Webbläsaren skickar ett vanligt formulär-POST-anrop till Next.js-hanteraren, vilket gör funktionen användbar innan JavaScript har laddats.

Snabb kontroll

Vad returnerar useActionState som gör att du kan visa ett laddningstillstånd medan en formulär-action körs?

Besvara frågan i den interaktiva lektionen

Sammanfattning

React Actions är asynkrona funktioner som skickas till form action. useActionState omsluter en action och ger dig ett tillstånd, en omsluten action-funktion och isPending. Server Actions lägger till 'use server' och körs på servern.

Härnäst

Nästa lektion: **useOptimistic för omedelbar återkoppling** — du kommer att visa optimistiska UI-uppdateringar medan en servermutation pågår.

Gratis att börja

Lär dig React med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 88
Lektioner: 324

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”React Actions och useActionState” gratis?

Ja – hela texten till ”React Actions och useActionState” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i React Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i React Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”React Actions och useActionState”?

Definiera server- och klient-actions, hantera formulärinskickningar och följ väntande tillstånd. Ni övar på React Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig React Academy?

Du behöver inga förkunskaper. Utbildningen i React Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”React Actions och useActionState”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här React Academy-lektionen?

Ja. Varje React Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

React Server Components förklarade
use()-hooken för asynkrona resurser
React Actions och useActionState
useOptimistic för omedelbar återkoppling

← Tillbaka till React Academy