Editions ENI Livres | Vidéos | e-Formations
Gestion de formulaires et du routage
Introduction
Ce chapitre, ainsi que le suivant, développent grâce à un exemple pratique complet quatre notions que l’on retrouve dans un grand nombre d’applications :
-
Tout d’abord les formulaires, moyen classique de recueillir une entrée de l’utilisateur lorsque celle-ci comporte plusieurs données. Plusieurs champs sont affichés, lesquels sont ensuite validés, parfois même la saisie est contrainte (en nombre de caractères par exemple), puis l’utilisateur soumet le formulaire pour que sa saisie soit prise en compte.
-
Ensuite, le routage qui permet d’organiser une application en routes, souvent elles-mêmes organisées hiérarchiquement. Généralement dans une application web, cela se traduit par la mise à jour de l’URL dans la barre d’adresse du navigateur.
-
Puis l’authentification, procédé permettant à un utilisateur de s’inscrire et s’identifier dans l’application, qui lui donne par exemple accès à des ressources qui lui sont réservées.
-
Enfin le stockage de données distantes, ce qui permet à l’utilisateur de créer des données auxquelles il pourra accéder plus tard, éventuellement depuis une autre machine.
Ces quatre fonctions ne sont pas propres à React ; néanmoins, elles sont tellement fréquentes...
Création de formulaires avec Formik
Avoir besoin de formulaires est très fréquent sur les applications web ou mobiles, que ce soit pour donner l’occasion à un utilisateur de s’inscrire ou de s’identifier, ou pour créer une ressource, faire une recherche, ou contacter un support clientèle.
Lorsqu’on crée un formulaire avec React, se pose la question de la manière dont on va stocker les données saisies par l’utilisateur :
-
Les stockera-t-on dans un state global, par exemple grâce à Redux ? Dans ce cas, toute modification de l’utilisateur entraînera la création d’une action et la mise à jour du state.
-
Ou bien utilisera-t-on un state local au composant contenant le formulaire ?
Les deux solutions sont tout à fait acceptables, et chacune dispose des outils facilitant son implémentation. La première peut être mise en œuvre grâce à Redux-Form (https://redux-form.com) par exemple, qui facilite la création des actions nécessaires, et permet la gestion des données saisies dans le state.
Pour ma part, j’opte plutôt pour la deuxième solution, car je considère que les données saisies sur le formulaire, tant qu’elles ne sont pas validées (« soumises ») par l’utilisateur, n’ont pas besoin d’être partagées avec le reste de l’application. Un state local fera donc l’affaire, et pour cela j’utilise la bibliothèque Formik (https://jaredpalmer.com/formik).
Notez que les deux bibliothèques Redux-Form et Formik proposent à peu de choses près les mêmes fonctionnalités de base, mais qu’aucune n’est indispensable pour créer des formulaires avec React. Cela étant dit certaines tâches communes sont grandement facilitées :
-
La mise à jour du state (local ou global) lors d’une entrée de l’utilisateur.
-
La validation des entrées selon des règles définies, effectuée dès que le focus sur un champ est perdu, et l’affichage des messages d’erreurs éventuels.
-
Le fait que la soumission ne soit possible qu’après validation du formulaire complet.
-
etc.
Passons à l’action et créons...
Gestion du routage avec React Router
Notre application permet déjà une navigation cohérente grâce à la manière dont nous l’avons gérée, c’est-à-dire dans le state local du composant App. Nous avons deux attributs isCreatingExpense et currentlyEdited Expense, indiquant respectivement si on est sur le formulaire de création ou le formulaire d’édition. Dans ce cas, que va-t-on ajouter dans cette section ?
En utilisant une stratégie de routage, nous allons :
-
mettre à jour l’URL de la page en fonction de l’emplacement de l’application dans lequel se trouve l’utilisateur (liste des dépenses, création ou modification) ;
-
permettre à l’utilisateur de naviguer dans l’historique grâce aux boutons Précédent et Suivant de son navigateur (pour revenir à la liste des dépenses par exemple) ;
-
offrir la possibilité de se rendre à un emplacement de l’application défini dans l’URL, par exemple en ajoutant l’URL aux favoris, en la partageant, ou en rafraîchissant la page.
Toutes ces fonctionnalités nous sont offertes par React Router (https://reacttraining.com/react-router/), bibliothèque la plus utilisée pour gérer le routage d’une application React, que ce soit pour le Web ou le mobile.
Afin d’implémenter le routage dans notre application, procédons par étape. Nous allons tout d’abord réorganiser (ou refactorer) quelque peu notre application afin de la préparer à l’arrivée de React Router. Dans un second temps nous définirons les routes que nous souhaitons avoir dans notre application, puis nous ajouterons enfin React Router.
1. Refactoring et définition des routes
Le refactoring préalable est en réalité très simple, mais il nous permettra d’y voir plus clair lorsque nous allons ajouter React Router à l’application. Il consiste à définir clairement ce que nous souhaitons afficher en fonction du state, et plus particulièrement de la partie concernant la navigation.
Pour mieux comprendre, passons sans plus tarder à la pratique : commençons à ajouter une méthode renderCreateExpenseForm à la classe App, contenant...
Prochaines étapes
Dans ce chapitre, nous avons vu comment :
-
créer des formulaires à l’aide de Formik, et gérer la validation des données saisies par l’utilisateur ;
-
gérer la navigation au sein de l’application grâce au routage, en créant différentes URL pour les ressources et écrans disponibles, en gérant des liens permettant de passer de l’un à l’autre.
Dans le chapitre suivant, nous allons retrouver le formulaire créé dans la première section de ce chapitre, afin d’imposer à l’utilisateur de s’inscrire et de s’identifier pour pouvoir gérer ses dépenses. Cela nous donnera l’occasion de voir une nouvelle fonctionnalité du routage : donner accès à certaines routes uniquement selon certaines conditions, par exemple que l’utilisateur soit authentifié.
Nous verrons ensuite comment appeler une API externe pour stocker des données distantes.
