React でのフォーム管理の簡素化: useActionState と useRBoxForm

私のライブラリ f-box の React 19 新しいフック useActionState と useRBoxForm の比較を紹介します。反応します。

フォーム状態管理の各アプローチの特徴と useRBoxForm の始め方を説明します。

目次

1. はじめに
2. useActionState の紹介
3. f-box-react と useRBoxForm の紹介
4. 比較: 使いやすさの違い
5. f-box-react のインストールとセットアップ
6. 結論

導入

React 19 の新しいフックである useActionState は、フォームの送信とその結果の状態の管理を簡素化します。一方、私のライブラリ f-box-react は、useRBoxForm と呼ばれるより高度なフォーム管理フックを提供します。
この記事では、これら 2 つのフックを比較し、useRBoxForm がフォーム管理の簡素化と強化にどのように役立つかを共有します。

useActionState の導入

React 19 では、フォーム送信を処理するための単純なフローを提供するフックである useActionState が導入されました。

import { useActionState } from "react"

type FormState = {
  success?: boolean
  cartSize?: number
  message?: string
}

function addToCart(prevState: FormState, queryData: FormData) {
  const itemID = queryData.get("itemID")
  if (itemID === "1") {
    return {
      success: true,
      cartSize: 12,
    }
  } else {
    return {
      success: false,
      message: "The item is sold out.",
    }
  }
}

function AddToCartForm({
  itemID,
  itemTitle,
}: {
  itemID: string
  itemTitle: string
}) {
  const [formState, formAction, isPending] = useActionState<
    FormState,
    FormData
  >(addToCart, {})

  return (
    <form action={formAction}>
      {/* Form content */}
      {formState?.success && (
        <div>Item added to cart! Current cart size: {formState.cartSize}</div>
      )}
      {formState?.success === false && (
        <div>Failed to add item: {formState.message}</div>
      )}
    </form>
  )
}

useActionState は、コールバック関数を介してフォームの状態を更新するための単純なメカニズムを提供しますが、状態を管理する責任が単一のオブジェクトに集中しているという欠点があります。これは、複雑さが増すにつれて問題になる可能性があります。

f-box-react と useRBoxForm の紹介

f-box-react は、RBox のリアクティブ機能を React と統合するライブラリです。その機能の中には、フォーム管理用に特別に設計されたフックである useRBoxForm があり、これによりフォーム データ、検証ロジック、エラー メッセージ処理が明確に分離され、よりクリーンで保守性の高いフォーム処理が可能になります。

たとえば、useRBoxForm を使用したサンプルは次のとおりです。

import { useRBoxForm } from "f-box-react"

type Form = {
  itemID: string
  cartSize: number
}

const validate = (form: Form) => ({
  itemID: [() => form.itemID === "1"],
  cartSize: [],
})

function AddToCartForm({
  itemID,
  itemTitle,
}: {
  itemID: string
  itemTitle: string
}) {
  const {
    form,
    edited,
    isPending,
    handleChange,
    handleValidatedSubmit,
    shouldShowError,
  } = useRBoxForm<Form>({ itemID, cartSize: 0 }, validate)

  const handleSubmit = handleValidatedSubmit(async (form) => {
    if (form.itemID === "1") {
      handleChange("cartSize", 12)
    }
  })

  return (
    <form onSubmit={handleSubmit}>
      <h2>{itemTitle}</h2>
      <button type="submit" disabled={isPending}>
        Add to Cart
      </button>
      {edited.itemID &&
        (shouldShowError("itemID")(0) ? (
          <div>Failed to add to cart: The item is sold out.</div>
        ) : (
          <div>Item added to cart! Current cart size: {form.cartSize}</div>
        ))}
    </form>
  )
}

useRBoxForm を使用すると、フォームの状態の更新、検証の処理、エラー メッセージの表示のロジックを明確に分離できるため、コードの管理が容易になります。

比較：使いやすさの違い

useActionState を使用する

• シンプルなデザイン
  フォーム送信結果を単一のオブジェクト内で管理するため、使い始めたばかりの場合は非常に簡単に理解できます。

• 集中した責任
  成功フラグ、メッセージ、カート サイズをすべて 1 つのオブジェクトにまとめていると、機能が増えるにつれてどこを変更すればよいのかわかりにくくなることがあります。

• 延長への挑戦
  状態の変化や検証が複雑になると、柔軟に適応することが難しく感じることがあります。

useRBoxFormを使用する

• 役割の明確な分離
  フォーム データ、検証ロジック、エラー メッセージを個別に処理することで、どこを変更すればよいかが明確になります。

• 使いやすさ
  各関数が独立しているため、ある部分を変更しても他の部分に影響を与えず、コード全体がシンプルになります。

• タイプの安全性と信頼性
  TypeScript でフォーム データと検証の明確な型を定義すると、予期しないエラーが発生する可能性が低くなり、開発がよりスムーズになります。

• 再利用性
  フォームを管理するロジックを作成したら、さまざまなフォーム間で簡単に再利用できます。

全体として、useRBoxForm を使用すると、各懸念事項を分離することで、複雑な状態をより快適に管理できるようになります。

f-box-react のインストールとセットアップ

1. f-box-reactのインストール

npm または Yarn を使用して f-box-react をインストールできます。

import { useActionState } from "react"

type FormState = {
  success?: boolean
  cartSize?: number
  message?: string
}

function addToCart(prevState: FormState, queryData: FormData) {
  const itemID = queryData.get("itemID")
  if (itemID === "1") {
    return {
      success: true,
      cartSize: 12,
    }
  } else {
    return {
      success: false,
      message: "The item is sold out.",
    }
  }
}

function AddToCartForm({
  itemID,
  itemTitle,
}: {
  itemID: string
  itemTitle: string
}) {
  const [formState, formAction, isPending] = useActionState<
    FormState,
    FormData
  >(addToCart, {})

  return (
    <form action={formAction}>
      {/* Form content */}
      {formState?.success && (
        <div>Item added to cart! Current cart size: {formState.cartSize}</div>
      )}
      {formState?.success === false && (
        <div>Failed to add item: {formState.message}</div>
      )}
    </form>
  )
}

2. 基本的な使い方

f-box-react から useRBoxForm フックをインポートし、フォーム コンポーネントで使用します。

import { useRBoxForm } from "f-box-react"

type Form = {
  itemID: string
  cartSize: number
}

const validate = (form: Form) => ({
  itemID: [() => form.itemID === "1"],
  cartSize: [],
})

function AddToCartForm({
  itemID,
  itemTitle,
}: {
  itemID: string
  itemTitle: string
}) {
  const {
    form,
    edited,
    isPending,
    handleChange,
    handleValidatedSubmit,
    shouldShowError,
  } = useRBoxForm<Form>({ itemID, cartSize: 0 }, validate)

  const handleSubmit = handleValidatedSubmit(async (form) => {
    if (form.itemID === "1") {
      handleChange("cartSize", 12)
    }
  })

  return (
    <form onSubmit={handleSubmit}>
      <h2>{itemTitle}</h2>
      <button type="submit" disabled={isPending}>
        Add to Cart
      </button>
      {edited.itemID &&
        (shouldShowError("itemID")(0) ? (
          <div>Failed to add to cart: The item is sold out.</div>
        ) : (
          <div>Item added to cart! Current cart size: {form.cartSize}</div>
        ))}
    </form>
  )
}

さらに詳細な使用法と高度な例については、GitHub リポジトリまたは https://f-box-docs.com の公式ドキュメントを確認してください。

結論

React でフォームの状態を管理するには、さまざまなアプローチがあります。 useActionState はそのシンプルさが魅力ですが、複雑さが増すと扱いにくくなる可能性があります。対照的に、f-box-react の useRBoxForm はフォーム データ、検証、エラー メッセージを分離し、管理が容易で拡張性の高いソリューションを提供します。

この記事が f-box-react の魅力と使い方について理解していただければ幸いです。まだあまり知られていませんが、ぜひ試してみてください！

以上がReact でのフォーム管理の簡素化: useActionState と useRBoxFormの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。