Advanced ReactJS: meilleures pratiques pour React + Redux + Sagas

café pour la pensée

Tout d’abord, une brève introduction sur React. C'est une bibliothèque JavaScript utilisée pour construire des interfaces utilisateur. Cela a changé le paysage du développement front-end depuis sa sortie. Par conséquent, si vous aspirez à devenir un développeur Web front-end, des bibliothèques d’apprentissage telles que React ou Vue.js sont presque essentielles dans l’industrie actuelle. Voici un excellent didacticiel si vous commencez tout juste à apprendre à réagir. https://reactjs.org/tutorial/tutorial.html.

Je me souviens quand j'ai commencé à apprendre à réagir. J'ai toujours eu le sentiment inquiet de ne jamais pouvoir apprendre tout ce dont j'avais besoin, le langage JavaScript en perpétuel changement qui me trottait dans la tête, et si jamais j'avais réussi à faire quelque chose de bien, je finirais toujours par me demander si c'était vraiment le meilleur moyen pour le faire? Après des centaines de tutoriels en ligne, de recherches sur Youtube et de tasses de café inachevées (et probablement non lavées), j'ai enfin compris ce que React essayait d'introduire dans la table JavaScript.

Cependant, j'ai toujours eu du mal à trouver un didacticiel regroupant tous les concepts avancés de React dans un didacticiel compact.

De plus, je me souviens d'avoir eu de la difficulté à comprendre ces concepts lorsqu'ils étaient utilisés dans un gros code source. C'est le vide que cet article tente de combler. Des outils et des concepts avancés sont intégrés à notre application simple. C’est uniquement à des fins de tutoriel et vous ne devez pas utiliser ces concepts si votre application n’en a pas besoin.

Assez avec le bavardage. Parlons du code. Téléchargez le code fini à partir de ce dépôt et suivez le fichier README afin que vous puissiez voir et sentir ce que nous allons construire ici. https://github.com/jelorivera08/react-starter-pack.

Page de destination de l'application

Ci-dessus, vous pouvez voir l'état de comptage affiché et quatre boutons qui déclenchent leurs actions respectives. Leurs actions s'expliquent d'elles-mêmes.

sélecteurs

Allez dans le fichier selectors.js à l'intérieur du conteneur Counter, le premier concept avancé auquel nous nous attaquons ici est createSelector. En examinant le code, la variable const compte tout d’abord l’état de compte dans l’arbre d’état redux à l’aide de state.get («compte»).

Ensuite, nous créons un sélecteur en utilisant ladite méthode. Cela nous aide à formater l'état / les données que nous recevons de l'arborescence d'état redux et, ce faisant, nous épargnons beaucoup de temps pour coder de nouvelles fonctions qui gèrent la restructuration de l'état ou le formatage de l'état cible à chaque fois que nous en avons besoin pour restituer quelque chose au premier plan. -fin. Dans cet exemple, je n'ai pas modifié l'état que j'ai reçu. Je viens de retourner l'état brut à des fins de démonstration.

Ensuite, la fonction résultante sera utilisée dans mapStateToProps, et avec mapStateToProps, bien entendu, la prochaine chose à configurer est mapDispatchToProps.

créer des actions

Chaque fois que nous envoyons des actions de réducteur, nous devons toujours déclarer son type et le boîtier de commutateur correspondant à un réducteur qu'il entrera ultérieurement afin de modifier l'état de l'application. Avec le package createActions de reduxsauce, nous pouvons frapper deux oiseaux avec une pierre. Nous devrions également formater le réducteur avec reduxsauce afin de tirer pleinement parti de ce paquet.

réducteur

Ci-dessus, le réducteur de notre application. L'état initial est délimité par l'API fromJS de immuable et, lorsque le nom du package est appliqué, il empêche l'état initial d'être muté. React est très strict avec ce concept, donc gardez toujours cela à l’esprit. L'API createReducer de Reduxsauce a deux arguments.

Tout d'abord, l'état initial. Deuxièmement, l'objet qui possède des clés pour les types d'action et les valeurs en tant que fonction que le réducteur va activer une fois qu'un type correspond à un appel de dispatch. Merge modifie l’arbre d’état de redux en conséquence. Il n’ya pas d’application réelle qui ne sait pas comment gérer les appels d’API asynchrones correctement? Droite.

saga redux

Voici la partie saga de notre programme. Tout est pareil sauf la façon dont nous appelons nos actions. Nous utilisons l'action type que nous avons créée précédemment et nous les utilisons dans notre saga watcher afin d'envoyer des appels asynchrones à ceux qui affecteront ultérieurement notre arborescence d'état redux.

Le délai est là pour simuler la latence du réseau pour une meilleure impression asynchrone de l'application. Enfin, assurons-nous de ne pas oublier la performance.

division de code

Le fractionnement de code est un excellent moyen d’améliorer les performances des applications Web. Le code JavaScript pèse le plus lourdement sur les données d’un utilisateur. N'oubliez pas qu'avec la division de code, l'utilisateur final ne peut télécharger que la partie du code dont il a besoin pour optimiser la consommation de données.

En conclusion,

Il existe de nombreux packages et outils qui nous aident, les ingénieurs en logiciel à créer un code plus propre et beaucoup plus efficace. vient avec un coût, le coût de la compréhension du système sous-jacent et de la réflexion dans React.

Apprendre à réagir nécessite que vous changiez votre paradigme de codage en un paradigme beaucoup plus différent par rapport à la mentalité de codage précédente en front-end. Les outils et packages décrits dans cet article résument les principes nécessaires pour coder efficacement et efficacement dans React, ce qui en fait un développeur exceptionnel.

C’est toujours les petites choses.

Sur ce, j'espère vous avoir aidé à approfondir votre compréhension de React avec ce petit article. À votre santé!