Gérer la gestion de l’état avec les actions React

Découvrez comment la suite de fonctionnalités et de hooks React Actions de React 19 peut simplifier la gestion des états et améliorer l’expérience utilisateur de vos applications.

Lors du développement d’applications Web avec React, la gestion des états et la gestion des formulaires constituent un ensemble de compétences essentielles. Étant donné que les interactions des utilisateurs impliquent souvent des formulaires (de la connexion à la soumission de données), une gestion efficace et claire de l’état des formulaires est essentielle pour les applications Web réactives et interactives.

React 19 présente Réagir aux actions, une suite de fonctionnalités et de hooks conçus pour rationaliser les transitions d’état et les interactions complexes au sein des applications React. Cet article explore comment ces nouveaux outils peuvent améliorer votre flux de travail de développement et améliorer l’expérience utilisateur de vos applications.

Réagir aux actions

Avant React 19 et le concept de React Actions, la gestion des soumissions de formulaires impliquait généralement l’utilisation de utiliserÉtat ou utiliserRéducteur pour suivre l’état du formulaire, et utiliserEffet pour gérer les effets secondaires comme la récupération de données. Cela pourrait conduire à un code complexe et difficile à maintenir, en particulier dans les grandes applications comportant plusieurs formulaires interagissant avec différents backends.

Un exemple simple de composant de formulaire gérant de telles mises à jour asynchrones peut ressembler à ceci :

import React, { useState, useCallback } from 'react';

const submitForm = async () => {};

export function Component() {
  
  const [formState, setFormState] = useState(null);
  const [isPending, setIsPending] = useState(false);

  
  const formAction = useCallback(async (event) => {
    event.preventDefault()
    setIsPending(true)
    try {
      const result = await submitForm()
      setFormState(result)
    } catch (error) {
      setFormState({ message: 'Failed to complete action' })
    }
    setIsPending(false)
  }, []);

  
  return (
    <form onSubmit={formAction}>
      {}
    </form>
  );
}

Dans l’exemple ci-dessus, le composant gère l’état du formulaire et traite les soumissions de formulaire de manière asynchrone. Lorsque le formulaire est soumis, le submitForm() La fonction envoie les données du formulaire à un serveur et reçoit une réponse. Le composant met ensuite à jour son état pour fournir des commentaires à l’utilisateur sur le processus de soumission.

Dans React 18, le concept de transition de l’interface utilisateur d’une vue à une autre de manière non urgente était appelé transitions. React 19 étend cette fonctionnalité en prenant en charge l’utilisation de asynchrone fonctions dans les transitions. Le utiliserTransition hook peut désormais être utilisé pour gérer l’affichage des indicateurs de chargement ou des espaces réservés lors de la récupération de données asynchrone.

Dans React 19, le concept de transitions va encore plus loin puisque les fonctions qui utilisent des transitions asynchrones sont désormais appelées Actions. Les actions simplifient la gestion des changements d’état liés au formulaire, en particulier dans les scénarios impliquant des opérations asynchrones telles que la récupération ou la soumission de données. Ces actions encapsulent les modèles nécessaires pour gérer à la fois l’état et les effets secondaires des composants de l’interface utilisateur, qui étaient auparavant gérés en combinant plusieurs hooks d’état et d’effets.

Il existe maintenant quelques hooks spécialisés pour gérer les actions comme ce que nous avons vu ci-dessus et le premier que nous examinerons est le useActionState crochet.

utiliserActionState

Le utiliserActionState hook est un élément essentiel de React Actions, conçu pour simplifier la gestion de l’état du formulaire et des opérations asynchrones. Il encapsule la logique de gestion des soumissions de formulaires, de la mise à jour de l’état et de la gestion des indicateurs de chargement.

Le useActionState() hook prend trois paramètres :

1. Une fonction « action », qui est appelée lorsque l’action du formulaire est déclenchée
2. Un objet d’état initial, définissant l’état de départ du formulaire avant toute interaction de l’utilisateur
3. [Optional] Un permalien qui pointe vers l’URL unique de la page modifiée par ce formulaire

Il renvoie trois valeurs dans un tuple :

1. L’état actuel du formulaire
2. Une fonction pour déclencher l’action du formulaire
3. Un booléen indiquant si l’action est en attente

import { useActionState } from "react";

export function Component() {
  const [state, dispatch, isPending] = useActionState(action, initialState, permalink)

  
}

La fonction d’action, qui est le premier argument passé au useActionState hook, est invoqué lorsque le formulaire est soumis. Il renvoie l’état du formulaire vers lequel nous prévoyons de passer, que la soumission réussisse ou rencontre des erreurs. Cette fonction reçoit deux paramètres : l’état actuel du formulaire et les données du formulaire au moment où l’action a été déclenchée.

Voici un exemple de création d’un action() fonction qui appelle un hypothétique submitForm() fonction, qui déclenche ensuite un appel API pour envoyer les données du formulaire à un serveur. Si l’action réussit, elle renvoie un objet d’état de formulaire représentant l’état mis à jour du formulaire. Si l’action échoue, elle renvoie un objet d’état de formulaire reflétant l’état d’erreur, incluant potentiellement des messages d’erreur ou des indicateurs pour aider l’utilisateur à corriger le problème.

import { useActionState } from "react";

const submitForm = async (formData) => {
  
};

const action = async (currentState, formData) => {
  try {
    const result = await submitForm(formData);
    return { message: result };
  } catch {
    return { message: "Failed to complete action" };
  }
};

export function Component() {
  const [state, dispatch, isPending] = useActionState(
    action,
    null,
  );

  
}

Avec notre useActionState() hook configuré, nous pouvons maintenant utiliser l’état du formulaire, dispatch() fonction et isPending valeurs dans notre modèle de formulaire.

Avec React 19, <form> les éléments ont maintenant un action prop qui peut recevoir une fonction d’action qui sera déclenchée lorsqu’un formulaire est soumis. C’est ici que nous transmettrons le dispatch fonction de notre useActionState() crochet.

import { useActionState } from "react";

const submitForm = async (formData) => {
  
};

const action = async (currentState, formData) => {
  try {
    const result = await submitForm(formData);
    return { message: result };
  } catch {
    return { message: "Failed to complete action" };
  }
};

export function Component() {
  const [state, dispatch, isPending] = useActionState(
    action,
    null,
  );

  return (
    <form action={dispatch}>
      {}
    </form>
  );
}

Nous pouvons montrer le formulaire state dans notre modèle et utilisez le isPending valeur pour indiquer à l’utilisateur quand l’action asynchrone est en cours.

import { useActionState } from "react";

const submitForm = async (formData) => {
  
};

const action = async (currentState, formData) => {
  try {
    const result = await submitForm(formData);
    return { message: result };
  } catch {
    return { message: "Failed to complete action" };
  }
};

export function Component() {
  const [state, dispatch, isPending] = useActionState(
    action,
    null,
  );

  return (
    <form action={dispatch}>
      <input type="text" name="text" disabled={isPending} />

      <button type="submit" disabled={isPending}>
        Add Todo
      </button>

      {}
      {state.message && <h4>{state.message}</h4>}
    </form>
  );
}

Grâce à ces nouveaux changements dans React, il n’est plus nécessaire de gérer manuellement les états en attente, les erreurs et les requêtes séquentielles lorsque vous travaillez avec des transitions asynchrones dans les formulaires. Au lieu de cela, nous pouvons accéder à ces valeurs directement via le useActionState() crochet!

Pour un exemple plus détaillé qui interagit avec le fichier accessible au public mannequinjson API, regarde ça L’essentiel de GitHub.

utiliserOptimiste

Dans le cadre des changements conçus pour améliorer la gestion des formulaires et l’interaction des composants au sein des formulaires, React 19 introduit un nouveau hook appelé utiliserOptimiste, conçu pour améliorer l’expérience utilisateur en permettant aux développeurs de mettre à jour l’interface utilisateur de manière optimiste lorsqu’une action asynchrone est en cours. Cela signifie que l’interface utilisateur se comporte comme si les modifications souhaitées avaient eu lieu sans attendre la confirmation du serveur, ce qui rend l’application plus rapide et plus réactive.

Les mises à jour optimistes sont particulièrement utiles dans les situations où l’utilisateur interagit fréquemment avec l’interface utilisateur, comme aimer une publication, mettre à jour un statut ou ajouter des éléments à une liste. Le useOptimistic hook aide à gérer l’état de l’interface utilisateur en supposant la réussite d’une opération tout en gérant la réponse réelle du serveur pour annuler les modifications si nécessaire.

import { useOptimistic } from "react";

export function Component({ message, updateMessage }) {
  
  const [optimisticMessage, setOptimisticMessage] =
    useOptimistic(message);

  const submitForm = async (formData) => {
    const newMessage = formData.get("text");

    
    setOptimisticMessage(newMessage);

    
    const updatedName = await submitToAPI(newMessage);
    updateMessage(updatedName);
  };

  return (
    <form action={submitForm}>
      {}
      <p>{optimisticMessage}</p>

      <input type="text" name="text" />
      <button type="submit">Add Message</button>
    </form>
  );
}

Dans l’exemple de composant ci-dessus, le useOptimistic hook gère les mises à jour optimistes pour le message État transmis comme accessoire.

Lorsque l’utilisateur soumet le formulaire en cliquant sur le bouton « Ajouter un message », le submitForm() la fonction est déclenchée. Avant de faire la requête API pour mettre à jour le message, le setOptimisticMessage() la fonction est appelée avec la nouvelle valeur du message à partir des données du formulaire. Cela met instantanément à jour l’interface utilisateur pour refléter le changement optimiste, fournissant ainsi un retour immédiat à l’utilisateur.

Une fois la mise à jour terminée ou échouée, React reviendra automatiquement à l’état initial. message valeur de l’accessoire.

utiliserFormStatus

utiliserFormStatus est un autre nouvel ajout à React Actions, conçu pour permettre aux composants enfants imbriqués d’accéder aux informations relatives au formulaire à partir de leurs formulaires parents, fonctionnant un peu comme un fournisseur de contexte.

useFormStatus facilite un meilleur partage d’état entre les composants du formulaire, en particulier dans les formulaires complexes où plusieurs composants imbriqués peuvent dépendre de l’état global du formulaire ou devoir réagir aux événements de soumission du formulaire.

import { useFormStatus } from "react";
import action from './actions'

export function NestedComponent() {
  
  const { pending, data, method, action } = useFormStatus();
  return (
    
  );
}

export default function App() {
  return (
    <form action={action}>
      <NestedComponent />
    </form>
  );
}

Dans l’exemple de code ci-dessus, NestedComponent utilise le useFormStatus hook pour accéder et afficher le statut et les métadonnées du formulaire, par exemple si une soumission est en attente (pending), la méthode du formulaire (method) et l’URL de l’action (action). Cette approche dissocie le composant imbriqué de son formulaire parent tout en lui permettant d’accéder aux données et à l’état pertinents du formulaire, améliorant ainsi la modularité et la réutilisabilité des composants au sein du formulaire.

Bien que l’accès aux informations du formulaire parent puisse être réalisé en utilisant ContexteReact 19 introduit le useFormStatus hook pour simplifier la gestion des données de formulaire dans les composants imbriqués.

Conclure

Les actions React, introduites dans React 19, représentent une avancée significative dans la gestion des états et la gestion des formulaires au sein des applications React. La nouvelle suite de crochets—useActionState, useOptimistic et useFormStatus—fournit aux développeurs des outils utiles pour créer des interfaces plus réactives et conviviales. En simplifiant les modèles courants tels que la gestion des opérations asynchrones, la mise en œuvre de mises à jour optimistes de l’interface utilisateur et la gestion des états de soumission des formulaires, ces hooks réduisent le code passe-partout et améliorent la maintenabilité globale.

Pour plus d’informations sur les actions React, reportez-vous au documentation officielle de React sur React 19 et ses dernières fonctionnalités.