Simplifier la gestion des formulaires dans React : useActionState vs useRBoxForm

Je vais présenter une comparaison entre React 19 le nouveau hook useActionState et useRBoxForm de ma bibliothèque f-box- réagir.

Je vais vous expliquer les caractéristiques de chaque approche de gestion de l'état des formulaires et comment démarrer avec useRBoxForm.

Table des matières

1. Présentation
2. Présentation de useActionState
3. Présentation de f-box-react et useRBoxForm
4. Comparaison : différences de convivialité
5. Installation et configuration de f-box-react
6. Conclusion

Introduction

Le nouveau hook de React 19, useActionState, simplifie les soumissions de formulaires et la gestion de leur état résultant. D'un autre côté, ma bibliothèque f-box-react fournit un hook de gestion de formulaires plus avancé appelé useRBoxForm.
Dans cet article, je vais comparer ces deux hooks et partager comment useRBoxForm peut vous aider à simplifier et à améliorer la gestion de vos formulaires.

Présentation de useActionState

React 19 a introduit useActionState, un hook qui fournit un flux simple pour gérer les soumissions de formulaires :

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

Bien que useActionState fournisse un mécanisme simple pour mettre à jour l'état du formulaire via une fonction de rappel, son inconvénient est que la responsabilité de la gestion de l'état est concentrée dans un seul objet. Cela peut devenir problématique à mesure que la complexité augmente.

Présentation de f-box-react et useRBoxForm

f-box-react est une bibliothèque qui intègre les capacités réactives de RBox avec React. Parmi ses fonctionnalités figure useRBoxForm, un hook spécialement conçu pour la gestion des formulaires, qui sépare distinctement les données du formulaire, la logique de validation et la gestion des messages d'erreur, permettant une gestion des formulaires plus propre et plus maintenable.

Par exemple, voici un exemple utilisant 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>
  )
}

Avec useRBoxForm, vous pouvez clairement séparer la logique de mise à jour de l'état du formulaire, de gestion de la validation et d'affichage des messages d'erreur, ce qui permet d'obtenir un code plus facile à gérer.

Comparaison : différences de convivialité

Avec useActionState

• Conception simple
  Il gère les résultats de soumission de formulaire au sein d'un seul objet, ce qui est très simple à comprendre lorsque l'on débute.

• Responsabilités concentrées
  Avoir des indicateurs de réussite, des messages et la taille du panier dans un seul objet peut rendre difficile de savoir où apporter des modifications à mesure que les fonctionnalités augmentent.

• Difficile à étendre
  Lorsque les changements d’état ou les validations deviennent complexes, s’adapter avec flexibilité peut sembler difficile.

Avec useRBoxForm

• Séparation claire des rôles
  En traitant séparément les données du formulaire, la logique de validation et les messages d'erreur, il est clair où apporter des modifications.

• Facilité d'utilisation
  Étant donné que chaque fonction est indépendante, la modification d'une partie n'affecte pas les autres, ce qui permet de conserver un code global simple.

• Type Sécurité et confiance
  Avec TypeScript définissant des types clairs pour les données de formulaire et la validation, les erreurs inattendues sont moins probables, ce qui rend le développement plus fluide.

• Réutilisabilité
  Une fois que vous avez créé une logique pour gérer un formulaire, celui-ci peut facilement être réutilisé dans différents formulaires.

Dans l'ensemble, useRBoxForm vous permet de gérer plus confortablement les états complexes en séparant chaque préoccupation.

Installation et configuration de f-box-react

1. Installation de f-box-react

Vous pouvez installer f-box-react en utilisant npm ou Yarn :

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. Utilisation de base

Importez le hook useRBoxForm depuis f-box-react et utilisez-le dans votre composant de formulaire :

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

Pour une utilisation plus détaillée et des exemples avancés, consultez le référentiel GitHub ou la documentation officielle sur https://f-box-docs.com.

Conclusion

Il existe de nombreuses approches pour gérer l’état du formulaire dans React. Bien que useActionState soit attrayant pour sa simplicité, il peut devenir lourd à mesure que la complexité augmente. En revanche, useRBoxForm de f-box-react sépare les données du formulaire, la validation et les messages d'erreur, offrant une solution plus facile à gérer et plus extensible.

J'espère que cet article vous donnera un aperçu de l'attrait et de l'utilisation de f-box-react. Même s'il n'est pas encore très connu, je vous encourage à l'essayer !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!