PC & Mobile

Simplifiez les réducteurs Redux avec des objectifs – Roland Peelen

Simplifiez les réducteurs Redux avec des objectifs - Roland Peelen


Les environnements javascript modernes ont de nombreuses façons de traiter avec l’état. On peut utiliser des fermetures ou des classes pour créer un état partagé, mais une bibliothèque de gestion d’état plus élaborée est parfois nécessaire. Certains utilisent le motif Redux.

Si vous connaissez bien Redux, vous pouvez l’ignorer, mais pour récapituler, voici un petit aperçu de ce qu’est Redux.
Propriétés

  • Il y a un objet d'état
  • L'objet d'état est immuable
  • Une nouvelle version de cet objet d'état est créée à chaque changement
  • Les changements se produisent en envoyant des actions, ce qui entraîne le flux ci-dessous

Flow (dans un scénario où l'on utiliserait thunk)

  • L'utilisateur clique sur le bouton
  • Une action est envoyée ()
  • Le middleware écoute cette action et fait une demande asynchrone. Supposons qu’il réussisse, puis il enverra une autre action ()
  • Un réducteur écoute cette action et réduit l'ancien état à une nouvelle version de l'état. ()
  • L'état est mis à jour et le composant peut être rendu avec le nouvel état.

La meilleure chose à propos de redux, c’est qu’il est très facile de raisonner à propos de l’état car tous les changements doivent suivre cette étape. Le plus gros inconvénient, cependant, est que cela nécessite pas mal de passe-partout. En créant et Cela peut prendre beaucoup de travail, sans oublier que pour faire bonne mesure, la plus grande partie de l'état de l'interface utilisateur devrait maintenant être contenue dans cet objet unique, de sorte que même des éléments tels qu'une case à cocher ou une bascule doivent y figurer au lieu de simplement muter une variable localement ou dans un service.

Comme mentionné ci-dessus, toute la configuration de redux nécessite un peu de passe-partout. Une partie peut être réduite avec les pointeurs sur le site web de redux. Mais il y a quelque chose pour le réduire encore plus (et le rendre un peu plus clair dans le processus).
Parfois, l'objet d'état est assez imbriqué. Prenons par exemple cet objet. En bref, il décrit une scène 3D avec des objets et des groupes d'objets.

Supposons que l'utilisateur doit pouvoir ajouter des objets supplémentaires à la fois à la structure de la scène et aux groupes de cette structure. Ces réducteurs peuvent être écrits comme suit:

Bien que ce ne soit pas nécessairement la version la plus optimisée de ce code (nous pouvons utiliser d'autres constantes pour le rendre plus lisible et avoir certaines fonctions pour supprimer certaines mutations d'objet), il y a autre chose qui est plus difficile à résoudre.

Plus la structure de l'état est profonde, plus la propagation d'objet doit être étendue pour que tout reste intact et plus le code est compliqué.

Heureusement, il existe une solution.

Les objectifs et certaines fonctions à utiliser conjointement permettent de visualiser les valeurs, de les définir immuablement et d’appliquer des fonctions sur celles-ci. Tout dans un objet, à un certain chemin. Il vous permet de donner à la lentille un objet complet (comme un état) et de récupérer l'objet complet, mais avec le nouvel ensemble de valeurs ou la fonction appliquée, quelle que soit la profondeur d'imbrication de la valeur que vous souhaitez muter.

Quand on regarde la documentation de Ramda (la bibliothèque que nous utilisons pour son implémentation de lentilles). Il y a 4 choses qui ont à voir avec les lentilles pour les créer, dont nous allons utiliser deux, et . le fonction vous permet de créer une lentille pour un chemin imbriqué pendant que le fonction vous permet de créer un objectif pour une propriété spécifique. Les deux autres peuvent être utiles dans certains cas (notamment ), mais ils ne sont pas trop difficiles à déduire une fois que vous connaissez ces deux-là. Dans notre cas, créons un objectif pour ces objets et groupes dans notre petite scène.

Si vous vous interrogez sur le , J’ai écrit un article à ce sujet.
Avec l'objectif spécifié, nous pouvons utiliser trois fonctions, , et . Ils vous permettent d’afficher respectivement la valeur sur le trajet de l’objectif pour un objet donné, de définir une valeur ou d’exécuter une fonction sur la valeur. Comme ça:

La chose la plus gentille à ce sujet est que nous n’avons pas à écarter manuellement les objets! Également la fonction le rend extrêmement puissant. Alors, réécrivons nos précédents réducteurs en utilisant des lentilles.

En séparant le fonctionnalité à une fonction afin que nous puissions utiliser , nous avons pu réduire le réducteur lui-même à une seule ligne! Bien sûr, il faut maintenant définir certains objectifs, mais cela signifie que l’instruction switch (ou l’objet lookup) du réducteur lui-même est moins encombrée. Les objectifs peuvent même être importés à partir de fichiers distincts. Dans le second, l’idée d’utiliser plusieurs et les composer devient clair. Dans le , il y a et comme nous avons le pour , nous pouvons le réutiliser ici.

Oui, redux comporte une certaine surcharge. Surtout dans des circonstances où il y a un état extrêmement imbriqué. Naturellement, essayer d'éviter cette imbrication est préférable dans certains cas. Dans d'autres cas, le fait de ne pas avoir cette imbrication peut en réalité rendre plus difficile le raisonnement sur l'objet. Dans ces cas, l'utilisation de lentilles peut être bénéfique.

Show More

SupportIvy

SupportIvy.com : Un lieu pour partager le savoir et mieux comprendre le monde. Meilleure plate-forme de support gratuit pour vous, Documentation &Tutoriels par les experts.

Related Articles

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Close
Close