Arrêtez de prop-driller vos modales React (Utilisez react-call)

FrançaisالعربيةDeutschEnglishEspañolहिन्दीBahasa Indonesia日本語한국어PortuguêsРусский中文
BBetter Stack
컴퓨터/소프트웨어AI/미래기술

Transcript

00:00:00React vient de recevoir un nouvel outil très intéressant qui change complètement notre façon de
00:00:05concevoir le rendu d'éléments d'interface interactifs comme les modales, les boîtes de dialogue ou de confirmation.
00:00:11Il s'appelle React Call.
00:00:13Si vous avez déjà créé un assistant de formulaire complexe en plusieurs étapes, une modale de confirmation ou un
00:00:18sélecteur d'éléments dans React, vous savez que gérer les états d'ouverture, transmettre les rappels de succès et
00:00:24gérer les promesses peut transformer votre code en un véritable plat de spaghettis.
00:00:28Mais React Call est conçu pour résoudre ce problème.
00:00:31Donc, dans la vidéo d'aujourd'hui, nous allons examiner React Call, voir comment il fonctionne et regarder
00:00:36quelques exemples de code.
00:00:37Ça va être très amusant, alors plongeons dans le sujet.
00:00:44Alors, qu'est-ce que React Call exactement ?
00:00:47Eh bien, c'est un utilitaire léger qui vous permet d'appeler des composants React comme des fonctions
00:00:52asynchrones.
00:00:53Pensez à l'API native du navigateur window.confirm.
00:00:57Lorsque vous l'appelez, votre code s'interrompt littéralement, attend que l'utilisateur clique sur OK ou Annuler, et
00:01:03renvoie une valeur booléenne directement en ligne.
00:01:06Cela maintient votre logique métier entièrement locale à l'appelant.
00:01:09Et React Call apporte exactement ce même modèle mental intuitif directement dans le monde React moderne.
00:01:16Au lieu de créer une variable d'état séparée comme isModalOpen, de transmettre une prop onClose ou
00:01:22onSubmit, et de configurer des fournisseurs de contexte complexes ou des portails, vous pouvez simplement attendre la
00:01:29réponse du composant.
00:01:30Sous le capot, il abstrait la gestion des promesses, gère les requêtes et les réponses typées
00:01:36dès la sortie de la boîte, et prend entièrement en charge le remplacement de module à chaud, pour que votre flux de développement reste
00:01:41rapide.
00:01:42Et il apporte trois concepts à la table : racine et pile, upsert, et flux de mutation.
00:01:48Le premier concept majeur est donc la racine et la pile.
00:01:50Avec React Call, le composant appelable que vous créez n'est pas une fonction.
00:01:54Il agit en fait comme son propre point de montage dans votre arbre d'application.
00:01:58Vous placez le composant comme une balise racine partout où il est visible, comme dans votre fichier app ou un fichier de mise en page
00:02:03de haut niveau, et il reste là comme un écouteur.
00:02:06Lorsque vous déclenchez plusieurs appels, React Call les gère en utilisant une pile interne, et il
00:02:11gère automatiquement le rendu de chaque instance active.
00:02:14Et il gère également les animations de sortie propres lorsqu'ils se ferment et garde les instances isolées afin
00:02:20qu'elles ne se marchent pas sur les pieds.
00:02:22Ensuite vient l'upsert, qui est un véritable sauveur pour les modèles d'interface singleton.
00:02:27Normalement, si vous appelez un composant plusieurs fois, il pousse une nouvelle instance sur la pile.
00:02:33Mais que faire si vous construisez un toast de notification global, ou une superposition de chargement, ou un indicateur
00:02:39de progression où vous ne voulez qu'une seule instance à l'écran à la fois ?
00:02:45Eh bien, au lieu d'exécuter call, vous pouvez exécuter upsert.
00:02:48Et si une instance est déjà active, il met à jour en douceur le composant existant avec vos nouvelles
00:02:52données à la volée, plutôt que de créer un doublon.
00:02:56Et enfin, nous avons le flux de mutation.
00:02:58Cette bibliothèque inclut un hook useMutationFlow intégré, spécifiquement conçu pour lier votre interface
00:03:04appelable directement aux actions asynchrones.
00:03:06Si vous avez une modale de confirmation qui déclenche une lourde requête API backend lors de la soumission, le hook
00:03:12gère l'état en attente pour vous dès le départ.
00:03:15Il garantit que la modale reste ouverte et affiche un spinner de chargement pendant que la fonction asynchrone s'exécute et
00:03:21ne termine officiellement l'appel qu'une fois la promesse résolue avec succès.
00:03:25Il fait donc magnifiquement le pont entre l'état de votre interface et vos mutations de données.
00:03:29Alors maintenant, regardons quelques exemples pratiques sur leur site web, parce que je pense qu'ils sont très
00:03:34explicites.
00:03:36Et je pense qu'ils montrent aussi à quel point vous avez besoin d'écrire peu de code pour obtenir quelque chose.
00:03:41Donc par exemple, dans la boîte de dialogue de confirmation, nous avons juste besoin de créer un appelable ici.
00:03:48Et ensuite, nous enveloppons notre composant comme un composant d'ordre supérieur avec ce hook create callable.
00:03:54Et ensuite, nous pouvons passer les fonctions d'appel pour nos boutons lors du clic.
00:04:01Et c'est tout ce dont nous avons besoin pour l'objet appelable.
00:04:04Et à la racine, nous avons juste besoin d'importer le composant lui-même.
00:04:08Et pour le bouton de suppression, puisque notre composant de confirmation est enveloppé avec la fonction d'ordre supérieur
00:04:14create callable, nous pouvons simplement l'invoquer de manière asynchrone sur cette fonction handle click.
00:04:21Donc, très propre, très ordonné, pas beaucoup de boilerplate.
00:04:26Et vous n'avez pas besoin d'utiliser des fournisseurs de contexte, des variables d'état, Redux ou Zustand.
00:04:31Et si vous voulez aller plus loin dans les cas d'utilisation, vous pouvez consulter la section des exemples
00:04:36et chaque exemple fournit également un extrait de code.
00:04:40Certains d'entre eux sont même très complexes, comme par exemple, ceux qui traitent d'actions asynchrones
00:04:46qui s'exécutent en arrière-plan.
00:04:49Donc, vous pouvez consulter tous ces exemples sympas.
00:04:52Je trouve ça super cool et super léger.
00:04:55Bien joué.
00:04:56Voilà, les amis.
00:04:57C'est React Call en quelques mots.
00:04:59Eh bien, vous pourriez certainement coder vous-même un wrapper de promesse personnalisé de base ou une modale unique.
00:05:06Je pense que cette bibliothèque gère magnifiquement tous les cas limites délicats, comme la gestion de multiples
00:05:11instances actives dans une pile ou la mise à jour de singletons via upsert et la synchronisation des états de l'interface avec de lourdes
00:05:17mutations backend.
00:05:18Donc, je pense que c'est un utilitaire léger super sympa à garder dans votre boîte à outils frontend pour une architecture
00:05:24React plus propre et plus lisible.
00:05:26Que pensez-vous de React Call ?
00:05:28Aimez-vous ce modèle ?
00:05:29Allez-vous l'utiliser dans vos projets ?
00:05:31Faites-le nous savoir dans la section des commentaires ci-dessous.
00:05:33Et les amis, si vous aimez ces types de analyses techniques, s'il vous plaît faites-le moi savoir en écrasant
00:05:37ce bouton “j'aime” sous la vidéo.
00:05:39Et n'oubliez pas non plus de vous abonner à notre chaîne.
00:05:42C'était Andrus de BetterStack, et je vous verrai dans les prochaines vidéos.
00:05:58vous

Key Takeaway

React Call simplifie l'architecture des interfaces interactives en permettant d'appeler des composants sous forme de fonctions asynchrones, réduisant ainsi drastiquement la complexité du code lié à la gestion des modales et des formulaires.

Highlights

  • React Call permet d'invoquer des composants React comme des fonctions asynchrones, remplaçant la gestion complexe des états d'ouverture et des props.

  • L'utilitaire gère nativement les piles d'instances multiples et les animations de sortie pour éviter les conflits entre les éléments d'interface.

  • La fonction upsert met à jour une instance active existante au lieu de créer des doublons, ce qui est idéal pour les notifications globales ou les indicateurs de chargement.

  • Le hook useMutationFlow lie directement l'interface à des actions asynchrones, gérant automatiquement l'état de chargement et le blocage jusqu'à la résolution de la promesse.

  • React Call élimine le besoin de fournisseurs de contexte, de variables d'état globales ou de bibliothèques de gestion d'état comme Redux pour les modales.

Timeline

Introduction et problématique

  • React Call propose une nouvelle manière de concevoir des éléments interactifs comme les modales et les boîtes de dialogue.
  • La gestion manuelle des états d'ouverture et des rappels de succès génère une complexité inutile appelée code spaghetti.

Le développement d'assistants de formulaires ou de sélecteurs d'éléments nécessite habituellement une gestion fastidieuse des états et des props. React Call résout ce problème en introduisant un modèle mental similaire à window.confirm du navigateur.

Fonctionnement de React Call

  • React Call abstrait la gestion des promesses et offre une prise en charge native des types.
  • Les composants appelables agissent comme des points de montage isolés dans l'arbre d'application.
  • Le système gère automatiquement une pile interne pour le rendu de plusieurs instances simultanées.

Au lieu de prop-driller des fonctions onClose ou onSubmit, le développeur attend simplement la réponse du composant. Chaque composant est placé à la racine de l'application et agit comme un écouteur, isolant ainsi les instances pour éviter les chevauchements.

Gestion avancée : Upsert et Mutations

  • L'utilisation de la fonction upsert permet de mettre à jour une instance unique plutôt que d'en créer de nouvelles.
  • Le hook useMutationFlow lie les interfaces aux actions asynchrones backend.
  • Le hook gère automatiquement l'état d'attente et le spinner de chargement jusqu'à la résolution de la promesse.

Pour des éléments comme les toasts ou les barres de progression, upsert évite les doublons en mettant à jour le composant existant. Parallèlement, useMutationFlow assure la synchronisation entre l'affichage de l'interface et l'exécution des mutations de données lourdes.

Implémentation pratique

  • L'intégration nécessite l'enveloppement du composant avec le hook create callable.
  • L'invocation s'effectue de manière asynchrone directement depuis les gestionnaires de clics.
  • Cette approche supprime la dépendance envers les outils de gestion d'état comme Redux ou Zustand pour ces cas d'usage.

L'implémentation est minimaliste et nécessite peu de code répétitif. La bibliothèque gère les cas limites complexes, offrant une alternative légère et propre pour la gestion des composants interactifs dans l'écosystème React.

Community Posts

No posts yet. Be the first to write about this video!

Write about this video