React useActionStateの実装：アクションベースの状態管理

近年のバージョンで導入されたReactのuseActionStateフックは、非同期アクションに起因する状態更新を管理するための洗練されたアプローチを提供します。この強力なツールは、特にReact Server Components (RSC) やサーバーアクションを扱う際に、ミューテーションの処理、UIの更新、エラーステートの管理プロセスを効率化します。このガイドでは、useActionStateの詳細を探り、実装のための実践的な例とベストプラクティスを提供します。

アクションベースの状態管理の必要性を理解する

従来のReactの状態管理では、コンポーネント内でローディング状態とエラーステートを別々に管理することがよくありました。アクション（例：フォームの送信、データのフェッチ）が状態更新をトリガーすると、開発者は通常、複数のuseStateコールと、潜在的に複雑な条件付きロジックでこれらの状態を管理します。useActionStateは、よりクリーンで統合されたソリューションを提供します。

単純なフォーム送信シナリオを考えてみましょう。useActionStateなしでは、次のようなものが必要になるかもしれません：

フォームデータの状態変数。
フォームが送信中かどうかを追跡するための状態変数（ローディング状態）。
任意のエラーメッセージを保持するための状態変数。

このアプローチは、冗長なコードや潜在的な不整合につながる可能性があります。useActionStateはこれらの懸念を単一のフックに統合し、ロジックを簡素化し、コードの可読性を向上させます。

useActionStateの紹介

useActionStateフックは2つの引数を受け取ります：

状態更新を実行する非同期関数（「アクション」）。これはサーバーアクションまたは任意の非同期関数にすることができます。
初期状態の値。

このフックは2つの要素を含む配列を返します：

現在の状態の値。
アクションをディスパッチするための関数。この関数は、アクションに関連するローディング状態とエラーステートを自動的に管理します。

基本的な例を以下に示します：


import { useActionState } from 'react';

async function updateServer(prevState, formData) {
  // 非同期のサーバー更新をシミュレートします。
  await new Promise(resolve => setTimeout(resolve, 1000));

  const data = Object.fromEntries(formData);

  if (data.name === "error") {
     return 'Failed to update server.';
  }

  return `Updated name to: ${data.name}`;
}

function MyComponent() {
  const [state, dispatch] = useActionState(updateServer, 'Initial State');

  async function handleSubmit(event) {
    event.preventDefault();
    const formData = new FormData(event.target);
    const result = await dispatch(formData);
    console.log(result);
  }

  return (
    
      Name:
      
      
      State: {state}
    
  );
}

この例では：

updateServerは、サーバーの更新をシミュレートする非同期アクションです。これは以前の状態とフォームデータを受け取ります。
useActionStateは状態を'Initial State'で初期化し、現在の状態とdispatch関数を返します。
handleSubmit関数は、フォームデータと共にdispatchを呼び出します。useActionStateは、アクションの実行中にローディング状態とエラーステートを自動的に処理します。

ローディング状態とエラーステートの処理

useActionStateの主要な利点の1つは、ローディング状態とエラーステートを組み込みで管理できることです。dispatch関数は、アクションの結果で解決されるプロミスを返します。アクションがエラーをスローした場合、プロミスはそのエラーでリジェクトされます。これを使用して、UIを適宜更新することができます。

前の例を変更して、ローディングメッセージとエラーメッセージを表示してみましょう：


import { useActionState } from 'react';
import { useState } from 'react';

async function updateServer(prevState, formData) {
  // 非同期のサーバー更新をシミュレートします。
  await new Promise(resolve => setTimeout(resolve, 1000));

  const data = Object.fromEntries(formData);

  if (data.name === "error") {
     throw new Error('Failed to update server.');
  }

  return `Updated name to: ${data.name}`;
}

function MyComponent() {
  const [state, dispatch] = useActionState(updateServer, 'Initial State');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [errorMessage, setErrorMessage] = useState(null);

  async function handleSubmit(event) {
    event.preventDefault();
    const formData = new FormData(event.target);
    setIsSubmitting(true);
    setErrorMessage(null);

    try {
      const result = await dispatch(formData);
      console.log(result);
    } catch (error) {
      console.error("Error during submission:", error);
      setErrorMessage(error.message);
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    
      Name:
      
      
      {isSubmitting && Loading...}
      {errorMessage && Error: {errorMessage}}
      State: {state}
    
  );
}

主な変更点：

ローディング状態とエラーステートを追跡するために、isSubmittingとerrorMessageの状態変数を追加しました。
handleSubmit内で、dispatchを呼び出す前にisSubmittingをtrueに設定し、エラーをキャッチしてerrorMessageを更新します。
送信中は送信ボタンを無効にし、ローディングメッセージとエラーメッセージを条件付きで表示します。

React Server Components (RSC)でのサーバーアクションとuseActionState

useActionStateは、React Server Components (RSC) やサーバーアクションと共に使用するとその真価を発揮します。サーバーアクションはサーバー上で実行され、データソースを直接変更できる関数です。これにより、APIエンドポイントを記述することなく、サーバーサイドの操作を実行できます。

注：この例には、Server ComponentsとServer Actions用に構成されたReact環境が必要です。


// app/actions.js (サーバーアクション)
'use server';

import { cookies } from 'next/headers'; //例：Next.jsの場合

export async function updateName(prevState, formData) {
  const name = formData.get('name');

  if (!name) {
    return 'Please enter a name.';
  }

  try {
    // データベースの更新をシミュレートします。
    await new Promise(resolve => setTimeout(resolve, 1000));

    cookies().set('userName', name);

    return `Updated name to: ${name}`; //成功！

  } catch (error) {
    console.error("Database update failed:", error);
    return 'Failed to update name.'; // 重要：Errorをスローするのではなく、メッセージを返します
  }
}


// app/page.jsx (React Server Component)
'use client';

import { useActionState } from 'react';
import { updateName } from './actions';

function MyComponent() {
  const [state, dispatch] = useActionState(updateName, 'Initial State');

  async function handleSubmit(event) {
    event.preventDefault();
    const formData = new FormData(event.target);
    const result = await dispatch(formData);
    console.log(result);
  }

  return (
    
      Name:
      
      
      State: {state}
    
  );
}

export default MyComponent;

この例では：

updateNameはapp/actions.jsで定義されたサーバーアクションです。これは以前の状態とフォームデータを受け取り、データベースを更新し（シミュレート）、成功またはエラーメッセージを返します。重要なのは、アクションがエラーをスローするのではなくメッセージを返す点です。サーバーアクションでは、有益なメッセージを返すことが推奨されます。
コンポーネントは、useActionStateフックを使用するためにクライアントコンポーネント（'use client'）としてマークされています。
handleSubmit関数はフォームデータと共にdispatchを呼び出します。useActionStateは、サーバーアクションの結果に基づいて状態更新を自動的に管理します。

サーバーアクションに関する重要な考慮事項

サーバーアクションでのエラーハンドリング：エラーをスローする代わりに、サーバーアクションから意味のあるエラーメッセージを返します。useActionStateはこのメッセージを新しい状態として扱います。これにより、クライアント側で優雅なエラーハンドリングが可能になります。
オプティミスティックアップデート：サーバーアクションは、体感パフォーマンスを向上させるためにオプティミスティックアップデートと共に使用できます。UIを即座に更新し、アクションが失敗した場合に元に戻すことができます。
再検証：ミューテーションが成功した後、キャッシュされたデータを再検証して、UIが最新の状態を反映するようにすることを検討してください。

useActionStateの高度なテクニック

1. 複雑な状態更新のためのReducerの使用

より複雑な状態ロジックの場合、useActionStateをReducer関数と組み合わせることができます。これにより、予測可能で保守しやすい方法で状態更新を管理できます。


import { useActionState } from 'react';
import { useReducer } from 'react';

const initialState = {
  count: 0,
  message: 'Initial State',
};

function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    case 'SET_MESSAGE':
      return { ...state, message: action.payload };
    default:
      return state;
  }
}

async function updateState(state, action) {
  // 非同期操作をシミュレートします。
  await new Promise(resolve => setTimeout(resolve, 500));

  switch (action.type) {
    case 'INCREMENT':
      return reducer(state, action);
    case 'DECREMENT':
      return reducer(state, action);
    case 'SET_MESSAGE':
      return reducer(state, action);
    default:
      return state;
  }
}

function MyComponent() {
  const [state, dispatch] = useActionState(updateState, initialState);

  return (
    
      Count: {state.count}
      Message: {state.message}
      
      
      
    
  );
}

2. useActionStateによるオプティミスティックアップデート

オプティミスティックアップデートは、アクションが成功したかのようにUIを即座に更新し、アクションが失敗した場合に更新を元に戻すことで、ユーザーエクスペリエンスを向上させます。これにより、アプリケーションがよりレスポンシブに感じられるようになります。


import { useActionState } from 'react';
import { useState } from 'react';

async function updateServer(prevState, formData) {
  // 非同期のサーバー更新をシミュレートします。
  await new Promise(resolve => setTimeout(resolve, 1000));

  const data = Object.fromEntries(formData);

  if (data.name === "error") {
     throw new Error('Failed to update server.');
  }

  return `Updated name to: ${data.name}`;
}

function MyComponent() {
  const [name, setName] = useState('Initial Name');
  const [state, dispatch] = useActionState(async (prevName, newName) => {
    try {
      const result = await updateServer(prevName, {
        name: newName,
      });
      return newName; // 成功時に更新
    } catch (error) {
      // エラー時に元に戻す
      console.error("Update failed:", error);
      setName(prevName);
      return prevName;
    }
  }, name);

  async function handleSubmit(event) {
    event.preventDefault();
    const formData = new FormData(event.target);
    const newName = formData.get('name');
    setName(newName); // UIをオプティミスティックに更新
    await dispatch(newName);
  }

  return (
    
      Name:
      
      
      Current Name: {name}
      State: {state}
    
  );
}

3. アクションのデバウンス

一部のシナリオでは、アクションが頻繁にディスパッチされるのを防ぐために、アクションをデバウンスしたい場合があります。これは、ユーザーが一定期間タイピングを停止した後にのみアクションをトリガーしたい検索入力のようなシナリオで役立ちます。


import { useActionState } from 'react';
import { useState, useEffect } from 'react';

async function searchItems(prevState, query) {
  // 非同期検索をシミュレートします。
  await new Promise(resolve => setTimeout(resolve, 500));

  return `Search results for: ${query}`;
}

function MyComponent() {
  const [query, setQuery] = useState('');
  const [state, dispatch] = useActionState(searchItems, 'Initial State');

  useEffect(() => {
    const timeoutId = setTimeout(() => {
      if (query) {
        dispatch(query);
      }
    }, 300); // 300msのデバウンス

    return () => clearTimeout(timeoutId);
  }, [query, dispatch]);

  return (
    
      Search:
       setQuery(e.target.value)}
      />
      State: {state}
    
  );
}

useActionStateのベストプラクティス

アクションを純粋に保つ：アクションが純粋関数（またはそれに近いもの）であることを確認してください。状態の更新以外の副作用を持つべきではありません。
エラーを適切に処理する：アクション内のエラーを常に処理し、ユーザーに有益なエラーメッセージを提供してください。サーバーアクションで前述したように、エラーをスローするのではなく、サーバーアクションからエラーメッセージ文字列を返すことを優先してください。
パフォーマンスを最適化する：特に大きなデータセットを扱う場合、アクションのパフォーマンスへの影響に注意してください。不要な再レンダリングを避けるために、メモ化技術の使用を検討してください。
アクセシビリティを考慮する：障害を持つユーザーを含むすべてのユーザーがアプリケーションにアクセスできるようにしてください。適切なARIA属性とキーボードナビゲーションを提供してください。
徹底的なテスト：単体テストと統合テストを作成し、アクションと状態の更新が正しく機能していることを確認してください。
国際化（i18n）：グローバルなアプリケーションの場合、複数の言語と文化をサポートするためにi18nを実装してください。
ローカリゼーション（l10n）：ローカライズされたコンテンツ、日付形式、通貨記号を提供することで、アプリケーションを特定のロケールに合わせて調整してください。

useActionStateと他の状態管理ソリューションとの比較

useActionStateはアクションベースの状態更新を管理する便利な方法を提供しますが、すべての状態管理ソリューションの代替となるわけではありません。複数のコンポーネント間で共有する必要のあるグローバルな状態を持つ複雑なアプリケーションには、Redux、Zustand、Jotaiのようなライブラリがより適している場合があります。

useActionStateを使用する場合：

単純から中程度の複雑さの状態更新。
非同期アクションと密接に結合した状態更新。
React Server ComponentsおよびServer Actionsとの統合。

他のソリューションを検討する場合：

複雑なグローバル状態管理。
多数のコンポーネント間で共有する必要がある状態。
タイムトラベルデバッグやミドルウェアなどの高度な機能。

結論

ReactのuseActionStateフックは、非同期アクションによってトリガーされる状態更新を管理するための強力でエレガントな方法を提供します。ローディング状態とエラーステートを統合することで、特にReact Server Componentsやサーバーアクションを扱う際に、コードを簡素化し、可読性を向上させます。その長所と限界を理解することで、アプリケーションに適した状態管理アプローチを選択でき、より保守性が高く効率的なコードにつながります。

このガイドで概説したベストプラクティスに従うことで、useActionStateを効果的に活用して、アプリケーションのユーザーエクスペリエンスと開発ワークフローを向上させることができます。アプリケーションの複雑さを考慮し、ニーズに最も合った状態管理ソリューションを選択することを忘れないでください。単純なフォーム送信から複雑なデータミューテーションまで、useActionStateはReact開発の武器庫で価値あるツールとなり得ます。