Le livre "Réagissez en action"

Salut, habrozhiteli! Le livre React in Action présente aux développeurs front-end le framework React et les outils associés. Tout d'abord, vous vous familiariserez avec la bibliothèque React, puis actualiserez le matériel sur certaines idées fondamentales dans ce contexte et apprendrez à travailler avec les composants. En pratique, vous maîtriserez Pure React (sans transpilation, sans aide de syntaxe), passerez des composants statiques les plus simples aux dynamiques et interactifs.

La seconde moitié du livre traite de différentes façons d'interagir avec React. Vous apprendrez les méthodes de base du cycle de vie, apprendrez à créer un flux de données, des formulaires et testerez également des applications. Pour commencer, vous trouverez du matériel sur l'architecture de l'application React, l'interaction avec Redux, une excursion dans le rendu du serveur et une revue de React Native.

Extrait. Chapitre 11. Intégration de Redux et React

• Les réducteurs sont un moyen pour Redux de déterminer comment l'état doit changer.
• Utilisation de Redux avec React.
• Conversion de lettres sociales pour utiliser l'architecture de l'application Redux.
• Ajout de likes et de commentaires à l'application.

Ici, vous poursuivez le travail que vous avez effectué dans le chapitre précédent pour créer les éléments de base de l'architecture Redux. Vous travaillerez sur l'intégration de React avec les actions et les référentiels Redux et apprendrez comment fonctionnent les réducteurs. Redux est une variante du modèle Flux conçu avec React à l'esprit; il fonctionne bien avec le flux de données unidirectionnel et l'API React. Bien que ce ne soit pas un choix universel, de nombreuses applications React de grande taille considèrent Redux comme l'une des meilleures options pour implémenter une solution de gestion des états. Suivez leur exemple et appliquez-le à Letters Social.

Obtenir le code source

Comme précédemment, vous pouvez obtenir le code source des exemples de ce chapitre en accédant au référentiel GitHub sur github.com/react-in-action/letters-social . Si vous prévoyez de commencer à travailler ici à partir de zéro, prenez le code source des exemples des chapitres 7 et 8 (si vous les avez étudiés et complétés les exemples vous-même) ou référez-vous à la branche liée à ce chapitre (chapitre-10-11).

N'oubliez pas que chaque branche contient le code final du chapitre (par exemple, le chapitre 10-11 contient le code obtenu à la fin des chapitres 10 et 11). Vous pouvez exécuter l'une des commandes suivantes de votre choix dans le shell de ligne de commande pour obtenir l'exemple de code du chapitre en cours. S'il n'y a aucun référentiel, exécutez la commande:

git clone git@github.com:react-in-action/letters-social.git 

Si vous avez déjà cloné le référentiel, alors ce qui suit:

 git checkout chapter-10-11 

Peut-être que vous êtes passé ici d'un autre chapitre, il vaut donc la peine de vérifier si vous avez toutes les dépendances nécessaires installées à l'aide de la commande:

 npm install 

11.1. Les boîtes de vitesses déterminent comment l'état doit changer

Vous pouvez créer et soumettre des actions et gérer les erreurs, mais elles n'affectent en rien l'état. Pour gérer les actions entrantes, les boîtes de vitesses doivent être configurées. N'oubliez pas que les actions sont simplement des moyens de signaler qu'un événement s'est produit et de fournir des informations sur ce qui s'est passé, rien de plus. La tâche des réducteurs est d'indiquer comment l'état du magasin va changer en réponse à ces actions. Dans la fig. 11.1 montre comment les boîtes de vitesses s'intègrent dans l'image Redux plus générale que nous avons déjà vue.

Mais que sont les boîtes de vitesses? Si vous avez toujours apprécié la simplicité de Redux, vous ne serez pas déçu: ce ne sont que des fonctions simples qui ont un seul but. Les réducteurs sont des fonctions pures qui prennent l'état et l'action précédents comme arguments et retournent l'état suivant. Selon la documentation de Redux, ils sont appelés réducteurs car leur signature de méthode ressemble à des données transmises à Array.prototype.reduce (par exemple, [1,2,3] .reduce ((a, b) => a + b, 0)).

Les boîtes de vitesses doivent être de simples fonctions, ce qui signifie que, compte tenu de l'entrée, elles produiront à chaque fois la même sortie correspondante. Cela contraste avec les actions ou le middleware où des effets secondaires sont générés et des appels d'API se produisent souvent. Faire quelque chose d'asynchrone ou d'impur (par exemple, appeler Date.now ou Math.random ()) dans les réducteurs est un anti-modèle qui peut dégrader les performances ou la fiabilité de l'application. Les documents Redux contiennent cette clause: «Ayant reçu les mêmes arguments, il doit calculer l'état suivant et le renvoyer. Pas de surprise. Pas d'effets secondaires. Aucun appel API. Pas de changement. Juste un calcul. " Voir redux.js.org/basics/reducers pour plus d'informations à ce sujet.

11.1.1. Forme d'état et état initial

Les réducteurs commenceront à travailler sur la modification du seul magasin Redux, il est donc temps de parler de la forme que prendra le magasin. La conception de la forme d'état de toute application affectera le fonctionnement de l'interface utilisateur de l'application (et en même temps elle est influencée par ce travail), mais en règle générale, il est recommandé de stocker les données brutes autant que possible séparées des données de l'interface utilisateur. Une façon de procéder consiste à stocker des valeurs telles que des identifiants séparément de leurs données et à utiliser des identifiants pour rechercher des données.

Vous allez créer un fichier d'état initial qui aide à déterminer la forme et la structure de l'état. Dans le dossier constantes, créez un fichier appelé initialState.js.


Il s'agit de l'état de l'application Redux avant toute action ou modification. Vous entrerez des informations sur les erreurs et les états de téléchargement, ainsi que des informations sur les messages, les commentaires et l'utilisateur. Vous stockerez les identifiants des commentaires et des messages dans des tableaux et des informations de base pour eux dans des objets faciles à consulter. Le listing 11.1 montre un exemple de configuration d'état initial.

11.1.2. Configuration des boîtes de vitesses pour répondre aux actions entrantes

Lors de la configuration de l'état initial, vous devez créer plusieurs réducteurs pour gérer les actions entrantes afin que le référentiel puisse être mis à jour. Les boîtes de vitesses utilisent généralement l'instruction switch pour mettre à jour l'état en fonction du type d'action entrante. Ils retournent une nouvelle copie de l'état (pas la même version avec modifications), qui sera ensuite utilisée pour mettre à jour le référentiel. Les boîtes de vitesses suivent également le principe fourre-tout pour garantir que les actions inconnues reviennent simplement à leur état actuel. J'ai déjà noté cela, mais il est important de dire encore une fois que les boîtes de vitesses effectuent des calculs et doivent retourner le même résultat à chaque fois en fonction d'une entrée donnée - il ne devrait pas y avoir d'effets secondaires ou de processus obscurs.

Les boîtes de vitesses sont responsables du calcul de la façon dont le stockage doit changer. Dans la plupart des applications, vous disposerez de nombreux réducteurs, chacun étant responsable d'une partie du stockage. Cela permet de garder les fichiers concis et ciblés. À la fin, vous utiliserez la méthode combineReducers disponible dans Redux pour combiner les réducteurs en un seul. La plupart des réducteurs utilisent une instruction switch avec des cas pour différents types d'actions et une commande catch-all par défaut pour tout le reste pour garantir que les types d'actions inconnus (probablement créés par hasard, le cas échéant) n'affecteront pas l'état.

Les réducteurs font également des copies de l'état et ne modifient pas directement l'état existant du référentiel. Si vous regardez la fig. 11.1, vous verrez que les boîtes de vitesses utilisent l'état lors de leur travail. Cette approche est similaire au fonctionnement habituel des structures de données immuables: au lieu de modifications directes, des copies modifiées sont créées. Le listing 11.2 montre comment configurer le réducteur de charge. Veuillez noter que dans ce cas, vous avez affaire à une tranche plate de l'état - le chargement de la propriété booléenne, il suffit donc de renvoyer true ou false pour le nouvel état. Vous travaillerez souvent avec un objet d'état qui a de nombreuses clés ou propriétés attachées, auquel cas le réducteur devra faire plus que simplement renvoyer true ou false.


Maintenant que l'action de téléchargement est soumise, le référentiel Redux pourra faire quelque chose avec. Lorsqu'une action arrive et passe par un middleware existant, Redux utilise des réducteurs pour déterminer quel nouvel état doit être créé à partir de l'action. Le référentiel n'avait aucun moyen de trouver les informations de modification contenues dans l'action avant de configurer des réducteurs. Pour le montrer, sur la fig. 11.2 réducteurs retirés du flux; voir pourquoi les actions ne parviennent pas à atteindre le référentiel.


Vous allez ensuite créer un autre réducteur pour appliquer vos compétences Redux. En fin de compte, de nombreux réducteurs ne renverront pas simplement vrai ou faux. Ou du moins dans les calculs, il y aura plus que juste ou faux. Un autre élément clé de l'application Letters Social est d'afficher et de créer des messages, et vous devez le porter sur Redux. Vous devez enregistrer la plupart des logiques existantes utilisées par l'application et les traduire dans un formulaire compatible avec Redux, comme si vous aviez adapté une véritable application React pour utiliser Redux. Créez deux réducteurs pour traiter les messages eux-mêmes et un pour suivre les identificateurs de message. Dans une application plus grande, vous pouvez les combiner sous une clé différente, mais maintenant il est bon de les stocker séparément. C'est également un exemple de la façon dont vous pouvez configurer plusieurs boîtes de vitesses pour gérer une seule action. Le listing 11.3 montre comment écrire un réducteur pour les commentaires. Ici, vous allez créer de nombreux réducteurs, et dès que cela sera fait, l'application recevra non seulement une description détaillée des événements qui peuvent se produire, mais aussi des moyens de changer l'état.


Désormais, lorsque vous soumettez des actions liées aux commentaires, l'état du magasin est mis à jour en conséquence. Avez-vous remarqué comment vous pouvez réagir à des actions qui ne sont pas strictement du même type? Les boîtes de vitesses peuvent répondre à des actions qui relèvent de leur compétence, même si elles ne sont pas du même type. Cela est possible car, malgré le fait que la tranche de message d'état contrôle les messages, d'autres actions peuvent l'affecter. Conclusion: la boîte de vitesses est chargée de résoudre la question de savoir comment un indicateur d'état particulier doit changer, quelle que soit l'action ou le type d'action. Certains réducteurs peuvent avoir besoin de connaître les nombreux types d'actions différents qui ne sont pas liés à la ressource (messages) qu'ils modélisent.

Maintenant, après avoir créé le réducteur de commentaires, vous pouvez en exécuter un qui traitera les messages. Il sera très similaire à un réducteur de commentaires car il utilise la même stratégie de les stocker séparément en tant qu'identificateurs et objets. Il doit également savoir comment gérer les messages avec et sans likes (vous avez créé des actions pour cette fonctionnalité au chapitre 10). Le listing 11.4 montre comment implémenter tout cela.



J'ai (l'auteur) inclus deux réducteurs dans ces fichiers, car ils sont très étroitement liés et agissent tous les deux sur les mêmes données fondamentales (messages et commentaires), mais vous voulez probablement utiliser un réducteur pour simplifier le travail dans le fichier. Dans la plupart des cas, l'installation de la boîte de vitesses par vous reflétera la structure du stockage ou au moins lui correspondra. Vous avez peut-être remarqué que le développement de la forme d'état de stockage (voir l'état initial que vous avez défini plus tôt dans ce chapitre) affecte considérablement la définition des réducteurs et, dans une moindre mesure, les actions. Une conclusion de ceci est qu'il vaut mieux passer plus de temps à développer une forme d'état que de lui donner un brillant. Si trop peu de temps est alloué à la conception, il peut prendre beaucoup de temps pour affiner la forme d'état pour l'améliorer, tandis que la conception soignée et les modèles Redux font de l'ajout de nouvelles fonctionnalités une action simple.

Migration vers Redux: est-ce nécessaire?

J'ai mentionné à plusieurs reprises dans ce chapitre que Redux peut nécessiter beaucoup de travail pour la configuration initiale (vous l'avez peut-être déjà expérimenté), mais à la fin cela portera ses fruits. Cela est particulièrement vrai pour les projets sur lesquels j'ai travaillé avec d'autres développeurs familiers. Un projet auquel j'ai participé comprenait la migration complète d'une application de l'architecture Flux vers Redux. Toute l'équipe a travaillé pendant environ un mois, mais nous avons pu commencer à réécrire l'application, réalisant une instabilité minimale et réduisant le nombre d'erreurs au minimum.

Et le résultat global a été la possibilité d'une lecture itérative plus rapide du produit en utilisant des modèles que Redux nous a aidés à mettre au bon endroit. Quelques mois après la migration de Redux, nous avons terminé une série de refonte complète de l'application. Bien que nous ayons repensé la plupart de l'application React, l'architecture Redux nous a permis d'apporter très peu de modifications à la gestion des états et à la logique métier de l'application. De plus, les modèles Redux ont facilité l'ajout à l'état de l'application si nécessaire. L'intégration de Redux a justifié le travail de configuration et de traduction de l'application sur celle-ci et continue de porter ses fruits.

»Plus d'informations sur le livre sont disponibles sur le site Web de l'éditeur
» Contenu
» Extrait

20% de réduction sur les colporteurs - React