React Academy · レッスン

React ActionsとuseActionState

server actionsとclient actionsを定義し、フォーム送信を処理してpending状態を追跡します。

レッスン 3/413 ステップ

「React ActionsとuseActionState」はCoddyKit上の無料React Academyレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。

ようこそ

このレッスンでは、React 19 の Actions を定義し、useActionState を使ってフォーム送信の状態を管理し、pending 状態とエラー状態をきれいに処理します。

React Actions とは

Actions は、フォームの `action` prop（またはボタンの `formAction`）に渡す非同期関数です。React 19 では Actions が特別に扱われ、pending 状態の追跡、エラー処理、Transitions との自動的な統合が行われます。

Next.js の Server Actions

App Router を使用する Next.js では、関数の先頭に 'use server' を追加すると Server Action になります。フォームが送信されると React がサーバー上でその関数を呼び出すため、API route は必要ありません。

'use server';

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

フォームで Action を使用する

Server Action または Client Action をフォームの `action` prop に直接渡します。フォームが送信されると、React は FormData を引数としてその関数を呼び出します。

import { createPost } from './actions';

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

useActionState

useActionState は Action をラップし、現在の state（直前の Action の結果）と pending の真偽値を提供します。ラップされた関数を 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>
  );
}

State を返す Action

useActionState と組み合わせて使用すると、Server Action は `(prevState, formData)` を受け取ります。success や error の情報を含むオブジェクトを返すと、それが新しい state になります。

'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

useActionState の isPending 値を使って、Action の実行中は送信ボタンを無効にし、読み込みインジケーターを表示します。

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

Client Actions

Actions はサーバー側である必要はありません。Client Action は 'use server' を付けない通常の非同期関数です。それでも useActionState による pending と state の管理を利用できます。

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 を使う

深くネストされた送信ボタンでは、`useFormStatus()` を使って親フォームの pending 状態を読み取れます。これにより、props を何層も渡す必要がなくなります。

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

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

Progressive Enhancement

Server Actions と React Actions は、JavaScript がなくても動作します（progressive enhancement）。ブラウザーは Next.js のハンドラーにネイティブのフォーム POST を送信するため、JavaScript の読み込み前から機能を利用できます。

確認問題

フォームの Action の実行中に読み込み状態を表示するために、useActionState は何を返しますか？

対話的なレッスンで答える

まとめ

React Actions は form action に渡す非同期関数です。useActionState は Action をラップし、state、ラップされた Action 関数、isPending を提供します。Server Actions には 'use server' を追加し、サーバー上で実行します。

次に学ぶこと

次のレッスン：**useOptimistic for Instant Feedback** — サーバーのミューテーション実行中に、楽観的な UI 更新を表示します。

無料で開始

AI チューターと学ぶ React — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 88
レッスン: 324

無料で学習を始めるコース全体を表示

よくある質問

「React ActionsとuseActionState」レッスンは無料ですか？

はい。「React ActionsとuseActionState」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全4レッスンが含まれています。

「React ActionsとuseActionState」で何を学びますか？

server actionsとclient actionsを定義し、フォーム送信を処理してpending状態を追跡します。ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

React Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/4です。

「React ActionsとuseActionState」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このReact Academyレッスンでコードを書いて実行できますか？

はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← React Academyに戻る