Un guide du concepteur

Savez-vous que le vrai pouvoir de Redux va au-delà de la gestion de l'État? Voulez-vous concevoir en comprenant comment fonctionne Redux? Explorons plus en profondeur ce que Redux peut faire, pourquoi il fait ses choses, quels sont les inconvénients, et comment cela se rapporte au design.

Avez-vous entendu parler de Redux? Qu'Est-ce que c'est? Pas de googling, s'il vous plaît!

• "Des trucs de backend fantaisie."
• "J'en ai entendu parler, mais je ne suis pas au courant de ce que c'est. C'est un framework React peut-être? "
• " Une meilleure façon de stocker et de gérer les états dans une application React. "

J'ai posé cette question à plus de 40 designers. Ce qui précède sont leurs réponses typiques. Beaucoup d'entre eux sont conscients que Redux travaille avec React et que son travail est "la gestion d'état."

Mais savez-vous ce que cette "gestion d'état" signifie réellement? Savez-vous que le vrai pouvoir de Redux va au-delà de la gestion de l'État? Savez-vous que Redux ne nécessite pas nécessairement que React fonctionne ? Souhaitez-vous participer à la discussion de votre équipe (ou au moins aux discussions sur le déjeuner) sur l'utilisation de Redux? Voulez-vous concevoir avec une compréhension de la façon dont fonctionne Redux?

Avec l'aide de cet article, Je voudrais vous montrer une image complète de Redux : ce qu'il peut faire, pourquoi il fait ses choses, quels sont les inconvénients, quand l'utiliser, et comment cela se rapporte au design.

Mon but est d'aider les designers comme vous. Même si vous n'avez pas écrit une seule ligne de code auparavant, je pense qu'il est toujours possible et bénéfique (et amusant) de comprendre Redux. Attendez-vous à de l'anglais et à des griffonnages – pas de code ou de discussions abstraites.

Prêt pour le voyage?

Qu'est-ce que Redux?

À un très haut niveau, Redux est un outil que les développeurs utilisent pour faciliter leur vie . Comme beaucoup d'entre vous l'ont peut-être entendu, son travail consiste à «gérer l'État». J'expliquerai ce que la gestion de l'État signifie quelques sections plus tard. À ce stade, je vais vous laisser avec cette image:

Pourquoi devriez-vous vous en soucier?

Redux est plus sur le fonctionnement interne d'une application que son apparence. C'est un outil assez complexe avec une courbe d'apprentissage abrupte. Cela signifie-t-il que nous, en tant que concepteurs, devrions rester loin de cela?

Non. Je pense que nous devrions l'adopter. Un concepteur de voiture devrait comprendre à quoi sert le moteur, non? Pour concevoir des interfaces d'application avec succès, les concepteurs devraient également avoir une solide connaissance des choses sous le capot . Nous devrions apprendre ce qu'il peut faire, comprendre pourquoi les développeurs l'utilisent et être conscient de ses avantages et de ses implications.

"Le design n'est pas seulement ce à quoi il ressemble et ce qu'il ressent. Le design est ce qu'il fonctionne. "

– Steve Jobs

Que peut faire Redux?

Beaucoup de gens utilisent Redux pour gérer l'état dans les applications React. C'est le cas d'utilisation le plus courant dans la nature et Redux améliore les aspects où React ne va pas bien (encore).

Cependant, vous verrez bientôt que le vrai pouvoir de Redux va bien au-delà. Commençons par apprendre ce que signifie vraiment la gestion d'état.

State Management

Si vous n'êtes pas sûr de ce que signifie cet "état", remplaçons-le par un terme plus générique: "data." State data cela change de temps en temps . L'état détermine ce qui est affiché sur l'interface utilisateur.

Que signifie gestion d'état? En général, nous devons gérer trois aspects des données dans une application:

1. Récupérer et stocker des données
2. Affecter des données à des éléments d'interface utilisateur
3. Modifier des données

Supposons que nous construisions un Dribbble page de tir. Quelles sont les données que nous voulons afficher sur la page? Ils comprennent la photo de profil de l'auteur, son nom, le GIF animé, le nombre de cœurs, les commentaires, etc.

Tout d'abord, nous devons extraire toutes ces données d'un serveur dans le nuage et les mettre quelque part. Ensuite, nous devons réellement afficher les données. Nous devons affecter des parties de ces données aux éléments d'interface utilisateur correspondants qui représentent ce que nous voyons réellement dans le navigateur. Par exemple, nous attribuons l'URL de la photo de profil à l'attribut src d'un tag HTML img :

Enfin, nous devons gérer les modifications apportées aux données. Par exemple, si un utilisateur ajoute un nouveau commentaire à une photo Dribbble, ou ajoute une étoile, nous devons mettre à jour le code HTML en conséquence.

La coordination de ces trois aspects de l'état joue un grand rôle dans le développement frontal. ] Réagir a divers degrés de soutien pour cette tâche. Parfois, l'installation intégrée à React fonctionne assez bien. Mais comme l'application devient plus complexe, son état peut devenir plus difficile à gérer avec React seul. C'est pourquoi beaucoup de gens commencent à utiliser Redux comme alternative.

Récupérer et stocker des données

Dans Réagir, nous décomposons une interface utilisateur en composants. Chacun de ces composants peut être décomposé en composants plus petits (voir " Qu'est-ce que React? ").

Si notre interface est structurée de cette façon, quand allons-nous chercher les données et où les stocker avant de peupler l'interface utilisateur?

Imaginez qu'il y a un chef dans chaque élément Récupérer des données à partir de serveurs revient à trouver tous les ingrédients nécessaires à la préparation de la vaisselle.

Un moyen naïf consiste à aller chercher et stocker les données où et quand cela est nécessaire. C'est comme si chaque chef sortait pour acheter des légumes et des viandes directement à partir de fermes lointaines.

Cette approche est un gaspillage. Nous aurions besoin d'appeler le serveur plusieurs fois à partir de nombreux composants, même pour les mêmes données. Avec le Redux, nous récupérons les données une fois et les stockons dans un endroit central, appelé «magasin». Les données sont alors prêtes à être utilisées à tout moment par n'importe quel composant. . Cela ne ressemble pas à avoir un hypermarché à proximité où nos chefs peuvent acheter tous les ingrédients. L'hypermarché envoie des camions pour transporter les légumes et les viandes en vrac des fermes. C'est beaucoup plus efficace que de demander à des chefs individuels d'aller eux-mêmes à la ferme!

Le magasin sert aussi de source unique de vérité. Les composants récupèrent toujours les données du magasin, pas d'ailleurs. Cela maintient tout le contenu de l'interface utilisateur cohérent.

Affectation de données à des éléments d'interface utilisateur

Avec seulement React, il existe en réalité un meilleur moyen d'extraire et de stocker des données. Nous pouvons demander à notre très aimable chef Shotwell de faire les courses pour tous ses amis chefs. Il conduirait un camion jusqu'aux fermes et rapporterait les goodies. Nous pourrions extraire des données d'un composant conteneur, par exemple, le composant "Shot" dans l'exemple Dribbble, et l'utiliser comme source unique de vérité.

Cette approche est plus efficace que la façon naïve d'extraire des données de chaque composant. Mais comment Shotwell transmet-il les ingrédients aux autres chefs? Comment transmettre les données aux composants qui rendent réellement les éléments HTML? Nous transmettons les données des composants externes aux composants internes comme le témoin dans un relais, jusqu'à ce que les données atteignent la destination.

Par exemple, l'URL de l'avatar de l'auteur doit être passée de "Shot" à "ShotDetail" ", À" Title "et enfin à l'étiquette . Si nos chefs vivent dans un appartement, cela ressemble vraiment à ceci:

Pour fournir des données à la destination, nous devions engager tous les composants sur le chemin, même s'ils n'ont pas du tout besoin de données. Ce serait vraiment ennuyeux s'il y avait beaucoup d'étages!

Et si le supermarché faisait la livraison à domicile?
Avec Redux ¹ nous pouvons insérer des données dans n'importe quel composant, sans affecter les autres composants, comme ceci:

¹ Pour être absolument précis, c'est une autre bibliothèque appelée réagissent -redux qui transmet les données aux composants React, pas Redux lui-même. Mais puisque reac-redux ne fait que la plomberie et que les gens utilisent presque toujours Redux et react-redux ensemble, je pense qu'il est bon d'inclure cela comme l'un des avantages de Redux.

Beebee ) ( Grand aperçu )

Note : Dans la dernière version de React (16.3), il y a une nouvelle API «context» qui fait presque le même travail en termes de branchement de données dans des composants. Donc, si c'est la seule raison pour laquelle votre équipe utilise Redux, sérieusement envisager de mettre à jour vers React 16.3! Consultez le document officiel pour plus d'informations (avertissement: beaucoup de code à venir).

Modification des données

Parfois, la logique de mise à jour des données dans une application peut être assez complexe. Cela peut impliquer plusieurs étapes qui dépendent les unes des autres. Nous devrons peut-être attendre les réponses de plusieurs serveurs avant de mettre à jour l'état de l'application. Nous pourrions avoir besoin de mettre à jour de nombreux endroits dans l'état à différents moments dans des conditions différentes.

Cela peut être écrasant si nous n'avons pas une bonne structure pour toute cette logique. Le code serait difficile à comprendre et à maintenir.

Redux nous permet de diviser pour régner . Il fournit un moyen standard de fractionner la logique de mise à jour des données en petits "réducteurs". Ces réducteurs travaillent harmonieusement ensemble pour compléter une action complexe

Gardez un œil sur le développement récent de React, cependant. Comme avec l'API "context", il pourrait y avoir une nouvelle API "setState" dans une future version de React. Cela faciliterait la division de la logique de mise à jour complexe en parties plus petites. Une fois que cette nouvelle API sera disponible, il est possible que vous n'aurez plus besoin de Redux pour gérer cet aspect de la gestion d'état.

La puissance réelle de Redux

Jusqu'à présent, il semble que Redux ne soit qu'un pansement Réagir. Les gens utilisent Redux pour améliorer les aspects que React ne fait pas bien (encore). Mais React rattrape rapidement! En fait, Dan Abramov, le créateur de Redux, a rejoint l'équipe de base de React chez Facebook il y a quelques années. Ils ont travaillé sur les améliorations de React: context API (publiées en 16.3), une meilleure API de récupération de données ( démo en février 2018), une meilleure API setState et ainsi de suite.

rendre Redux obsolète?

Devinez quoi? Je ne vous ai pas encore montré le vrai pouvoir de Redux!

Redux force les développeurs à suivre quelques règles strictes, qui apportent beaucoup de puissance à Redux (yup, le pouvoir de la discipline!):

1. Toutes les données (état de l'application) doivent être décrites en clair. Vous devriez être capable d'écrire toutes les données avec un stylo sur le papier.
2. Chaque action (changement de données) doit être décrite en texte clair. Vous devez écrire ce que vous ferez avant de changer quoi que ce soit. Vous ne pouvez pas changer de données sans laisser de marque. Ce processus est appelé "envoi d'une action" dans l'argot Redux.
3. Votre code qui modifie les données doit se comporter comme une formule mathématique. Il doit retourner le même résultat donné la même entrée. Le carré de 4 est toujours 16, peu importe combien de fois vous l'exécutez.

Lorsque vous suivez ces règles pour créer des applications, la magie se produit. Il permet beaucoup de fonctionnalités intéressantes qui sont autrement difficiles ou coûteuses à mettre en œuvre. Voici quelques exemples: ²

² J'ai recueilli ces exemples dans l'article de Dan Abramov: « Vous n'auriez pas besoin de redux » et « Réagissez. . "

Annuler, Rétablir

La fonction d'annulation / rétablissement populaire nécessite une planification au niveau du système. Comme annuler / rétablir doit enregistrer et rejouer chaque changement de données dans l'application, vous devez en tenir compte dans l'architecture dès le début. Si c'est fait après coup, il faudrait changer beaucoup de fichiers, ce qui est une recette pour d'innombrables bogues.

Parce que Redux exige que chaque action soit décrite en texte clair, le support pour annuler / rétablir est presque gratuit. Les instructions d'implémentation d'annuler / rétablir avec Redux correspondent à une page simple .

Collaborative Environment

Si vous créez une application similaire à Google Docs où plusieurs utilisateurs travaillent ensemble sur une tâche complexe , pensez à utiliser Redux. Il fera probablement beaucoup d'haltérophilie pour vous.

Redux rend très facile l'envoi de ce qui se passe sur le réseau. Il est facile de recevoir les actions d'un autre utilisateur sur une autre machine, rejouer les modifications et fusionner avec ce qui se passe localement.

Interface utilisateur optimiste

L'interface utilisateur optimiste est un moyen d'améliorer l'expérience utilisateur. Cela permet à l'application de répondre plus rapidement sur un réseau lent. C'est une stratégie populaire dans les applications qui nécessitent des réponses en temps réel, par exemple, un jeu de tir à la première personne.

À titre d'exemple simple, dans l'application Twitter, lorsque vous cliquez sur le cœur d'un tweet, vous devez demander au serveur de faire quelques vérifications, par exemple, si ce tweet existe toujours. Au lieu d'attendre plusieurs secondes pour le résultat, l'application choisit de tricher! Il suppose que tout est OK et montre un cœur rempli tout de suite

Cette approche fonctionne parce que la plupart du temps tout va bien. Lorsque les choses ne sont pas correctes, l'application rétablit les précédentes mises à jour de l'interface utilisateur et applique le résultat réel du serveur, par exemple, affiche un message d'erreur.

Redux prend en charge l'interface utilisateur optimiste de la même manière que pour annuler et rétablir . Il facilite l'enregistrement, la relecture et l'inversion des changements de données lors de la réception d'un résultat négatif du serveur.

Persistant et redémarrant depuis l'état

Redux facilite l'enregistrement de ce qui se passe dans une application stockée. Plus tard, même si l'ordinateur redémarre, l'application peut charger toutes les données et continuer exactement au même endroit, comme si elle n'avait jamais été interrompue.

Si vous construisez un jeu avec Redux, vous aurez besoin de quelques lignes de code supplémentaires pour sauvegarder / charger la progression du jeu, sans changer le reste du code.

Really Extensible Systems

Avec Redux, vous devez "envoyer" une action pour mettre à jour les données d'une application. Cette restriction permet de saisir presque tous les aspects de ce qui se passe dans une application.

Vous pouvez créer des applications réellement extensibles dans lesquelles chaque fonction peut être personnalisée par l'utilisateur. Par exemple, consultez Hyper une application terminale construite avec Redux. L'extension "hyperpower" ajoute des sprinkles au curseur et secoue la fenêtre. Comment aimez-vous ce mode "wow"? (Peut-être pas très utile mais suffisant pour impressionner les utilisateurs)

Débogage temporel

Que diriez-vous de pouvoir voyager dans le temps lors du débogage d'une application? Vous exécutez l'application, rembobinez ou avancez plusieurs fois pour trouver l'endroit exact où le bogue se produit, corrigez le bogue et jouez à nouveau pour le confirmer.

Redux fait de ce rêve une réalité pour les développeurs. Redux DevTools vous permet de manipuler la progression d'une application en cours en tant que vidéo YouTube – en faisant glisser un curseur!

Comment ça marche? Rappelez-vous les trois règles strictes que Redux applique?

Rapports de bogue automatisés

Imaginez ceci: Un utilisateur trouve quelque chose de mal dans votre application et veut signaler le bug. Elle se souvient minutieusement et décrit ce qu'elle a fait. Un développeur essaie ensuite de suivre les étapes manuellement pour voir si le bogue se reproduit. Le rapport de bug peut être vague ou inexact. Le développeur a du mal à trouver où est le bogue.

Maintenant, qu'en est-il de ça? L'utilisateur clique sur le bouton "Signaler un bug". Le système envoie automatiquement ce qu'il a fait au développeur. Le développeur clique sur le bouton "Reprise bug" et regarde comment ce bug se produit exactement. Le bug est écrasé sur place, tout le monde est content!

C'est exactement ce qui arriverait si vous utilisiez Redux Bug Reporter . Comment ça marche? Les restrictions Redux font des merveilles

Inconvénients de Redux

Les trois principales règles que Redux impose sont une épée à double tranchant. Ils permettent des fonctionnalités puissantes, mais en même temps causent des inconvénients inévitables.

Steep Learning Curve

Redux a une courbe d'apprentissage relativement raide. Il faut du temps pour comprendre, se souvenir et s'habituer à ses modèles. Il n'est pas recommandé d'apprendre Redux et React en même temps s'ils sont nouveaux pour vous.

Code "Boilerplate"

Dans de nombreux cas, utiliser Redux signifie écrire plus de code. Il est souvent nécessaire de toucher plusieurs fichiers pour obtenir une fonctionnalité simple. Les gens se sont plaints du code "standard" qu'ils auraient à écrire avec Redux.

Je sais, cela semble contradictoire. N'ai-je pas dit Redux permet d'implémenter des fonctionnalités avec un code minimal ? C'est un peu comme utiliser un lave-vaisselle. Tout d'abord, vous devez passer le temps soigneusement organiser les plats en rangées. Pas avant, vous verrez les avantages du lave-vaisselle: gagner du temps pour nettoyer la vaisselle, désinfecter la vaisselle, etc. Vous devez décider si le temps de préparation en vaut la peine!

Performance Penalty

Redux pourrait aussi avoir un impact sur les performances en raison des restrictions qu'il impose. Il ajoute un peu de surcharge chaque fois que les données changent. Dans la plupart des cas, ce n'est pas une grosse affaire, et le ralentissement n'est pas perceptible. Pourtant, quand il y a une grande quantité de données dans le magasin et quand les données changent fréquemment (par exemple quand l'utilisateur tape rapidement sur un appareil mobile), l'interface utilisateur peut devenir lente par conséquent.

Bonus: Redux n'est pas juste Pour Réagir

Une idée fausse commune est que Redux est pour Réagir seulement. On dirait que Redux ne peut rien faire sans React. En effet, Redux complète React de quelques façons importantes, comme nous l'avons déjà mentionné. C'est le cas d'utilisation le plus courant.

Cependant, en fait, Redux peut fonctionner avec tous les frameworks frontaux, tels que Angular, Ember.js ou même jQuery, ou même JavaScript à la vanille. Essayez googling, vous trouverez ce ce ce ou même ce . Les idées générales de Redux s'appliquent n'importe où!

Tant que vous utilisez judicieusement Redux, vous pouvez obtenir ses avantages dans de nombreuses situations – pas seulement dans une application React

Conclusion

Comme tout outil, Redux offre un compromis. Il permet des fonctionnalités puissantes mais présente également des inconvénients inévitables. Le travail d'une équipe de développement est d'évaluer si le compromis en vaut la peine et de prendre une décision consciente.

En tant que concepteurs, si nous comprenons les avantages et les inconvénients de Redux, nous serons en mesure de contribuer à cette prise de décision. perspective du design. Par exemple, pourrions-nous concevoir l'interface utilisateur pour atténuer l'impact potentiel sur les performances? Peut-être pourrions-nous préconiser l'inclusion des fonctions annuler / rétablir pour supprimer un nombre important de boîtes de dialogue de confirmation? Peut-être pourrions-nous suggérer une interface utilisateur optimiste puisqu'elle améliore l'expérience utilisateur avec un coût relativement bas?

Comprendre les avantages et les limites d'une technologie et la concevoir en conséquence. Je pense que c'est ce que Steve Jobs voulait dire par "le design est ce qu'il fonctionne".