React Academy · Oppitunti

React Actions ja useActionState

Määritelkää palvelin- ja client-toimintoja, käsitelkää lomakkeiden lähetykset ja seuratkaa odotustiloja.

Oppitunti 3/413 vaihetta

React Actions ja useActionState on ilmainen React Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu React Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Academy-kurssilla on yhteensä 4 oppituntia.

Tervetuloa

Tällä oppitunnilla määrittelette React 19 Actions -toimintoja, käytätte useActionStatea lomakkeen lähetyksen tilan hallintaan ja käsittelette odotus- ja virhetilat siististi.

Mitä React Actions ovat?

Actions ovat asynkronisia funktioita, jotka välitätte lomakkeen `action`-proprille (tai painikkeen `formAction`-proprille). React 19 käsittelee niitä erityisellä tavalla: se seuraa odotustilaa, käsittelee virheet ja yhdistää toimintoihin Transition-siirtymät automaattisesti.

Server Actions Next.js:ssä

Next.js:n App Routerissa voitte lisätä funktion alkuun `'use server'`-määrityksen, jolloin siitä tulee Server Action. React kutsuu sitä palvelimella lomakkeen lähetyksen yhteydessä — erillistä API-reittiä ei tarvita.

'use server';

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

Action-toiminnon käyttäminen lomakkeessa

Välittäkää palvelin- tai asiakastoiminto suoraan lomakkeen `action`-proprille. React kutsuu sitä FormData-olion kanssa, kun lomake lähetetään.

import { createPost } from './actions';

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

useActionState

useActionState käärii toiminnon ja antaa käyttöön nykyisen tilan (toiminnon viimeisimmän tuloksen) sekä isPending-totuusarvon. Kääritty funktio välitetään form action -proprille.

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

Toiminnon palauttama tila

Kun toimintoa käytetään useActionStaten kanssa, palvelintoiminto vastaanottaa `(prevState, formData)`. Palauttakaa objekti, joka sisältää tiedot onnistumisesta tai virheestä — siitä tulee uusi tila.

'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 lähetyspainikkeen poistamiseen käytöstä

Käyttäkää useActionStatesta saatavaa isPending-arvoa lähetyspainikkeen poistamiseen käytöstä ja latausilmaisimen näyttämiseen toiminnon suorituksen ajaksi.

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

Client Actions

Toimintojen ei tarvitse olla palvelinpuolen toimintoja. Client Action on tavallinen asynkroninen funktio ilman `'use server'`-määritystä. Se saa silti useActionStatesta odotus- ja tilanhallinnan.

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 alikomponenteille

Syvälle sisäkkäisessä lähetyspainikkeessa voitte käyttää `useFormStatus()`-hookia lukeaksenne päällimmäisen lomakkeen odotustilan ilman, että propseja tarvitsee välittää komponentilta toiselle.

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

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

Progressiivinen parannus

React Actions ja Server Actions toimivat myös ilman JavaScriptia (progressiivinen parannus). Selain lähettää tavallisen lomakkeen POST-pyynnön Next.js:n käsittelijälle, joten ominaisuus toimii jo ennen JavaScriptin latautumista.

Pikatarkistus

Mitä useActionState palauttaa, jotta voitte näyttää lataustilan lomaketoiminnon suorittamisen aikana?

Vastaa interaktiivisessa oppitunnissa

Kertaus

React Actions ovat lomakkeen action-proprille välitettäviä asynkronisia funktioita. useActionState käärii toiminnon ja antaa käyttöön tilan, käärittynä toimivan funktion sekä isPending-arvon. Server Actions -toimintoihin lisätään `'use server'`, ja ne suoritetaan palvelimella.

Seuraavaksi

Seuraava oppitunti: **useOptimistic välitöntä palautetta varten** — näytätte optimistiset käyttöliittymäpäivitykset, kun palvelimella suoritettava muutos on vielä kesken.

Aloita maksutta

Opi React tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 88
Oppitunnit: 324

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”React Actions ja useActionState” ilmainen?

Kyllä – oppitunnin ”React Actions ja useActionState” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko React Academy-kurssin, päivitä CoddyKit PROhon. React Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”React Actions ja useActionState”?

Määritelkää palvelin- ja client-toimintoja, käsitelkää lomakkeiden lähetykset ja seuratkaa odotustiloja. Harjoittelet React Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni React Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin React Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.

Kuinka kauan ”React Actions ja useActionState”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä React Academy-oppitunnilla?

Kyllä. Jokainen React Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: React Academy