Les bases de REDUX rendues faciles !. Comprendre les éléments de base de… | par Sobhan Paul

Comprendre les éléments de base de la gestion des états dans une application React à l’aide de Redux

Sobhan Paul
Redux – blocs de construction de base

Redux est souvent perçu comme déroutant et complexe la première fois que nous nous y essayons. Les choses les plus importantes avant de commencer sont de comprendre quoi et pourquoi REDUX et quel problème essaie-t-il de résoudre? L’un des moyens de réaliser la gestion de l’état dans React consiste à utiliser Redux. Chez Clairvoyant, nous pouvons vous aider à créer des produits de qualité supérieure qui partagent les données de manière cohérente à travers l’application en utilisant Redux.

Clairvoyant travaille sur différents produits dont les processus frontaux sont majoritairement basés sur la React Library. La gestion des états est un aspect clé de toute application. Doté d’une expertise de haut niveau dans ce domaine, Clairvoyant peut aider les entreprises à développer et maintenir efficacement leurs applications basées sur React.

Beaucoup de gens font une erreur lorsqu’ils commencent à apprendre Redux; ils commencent par coder ce qui les confond. J’ai rencontré quelques personnes qui ont dit: «J’adore React, mais je déteste Redux». Redux est si simple une fois que vous comprenez ses principes fondamentaux. Essayons donc de comprendre ce qu’est vraiment Redux.

Tout d’abord, Redux ne fait pas partie de React; c’est une bibliothèque Javascript séparée que vous pouvez utiliser avec React ou tout autre framework Javascript. De même, ngRx- qui est fondamentalement la version RxJS de Redux peut être utilisé dans Angular Framework.

Quel problème résout-il? – Cela rend la gestion de l’état beaucoup plus facile dans React.

Pourquoi est-il difficile de gérer un état dans React? – D’après ce que nous savons tous, si vous avez appris React et construit un projet POC, c’est assez simple. Lorsque vous pouvez transmettre des données via des «accessoires», pourquoi avez-vous besoin de Redux? Eh bien, quand nous apprenons, nous construisons de petits exemples en passant des accessoires ce qui semble très facile, vous sentez que vous n’avez besoin de rien d’autre, cela devrait fonctionner. Mais lorsqu’une application atteint un niveau différent, le partage / accès cohérent des données devient un défi. C’est là que Redux entre en scène. Cela vous facilite la vie.

Un bouton à l’intérieur d’un composant imbriqué

Très bien, regardons l’image ci-dessus. Vous pouvez l’appeler un «conteneur» dans lequel vous avez un « Etat » appelé âge. Vous pouvez voir les composants à l’intérieur d’un composant, c’est-à-dire les composants imbriqués, et à la fin, vous voyez un bouton qui, en cliquant dessus, incrémente l’âge. Vous devrez faire passer tout le contenu du composant comme accessoire, de l’un à l’autre jusqu’au composant interne où vous l’utiliseriez réellement. Comme mentionné ci-dessus, c’est assez facile pour un exemple de projet, mais pour une application complexe, cela peut devenir difficile à gérer et même très rapidement devenir incontrôlable.

Un bouton à l’intérieur d’un composant et partager entre les pages

Regardons un autre scénario dans lequel vous avez 2 pages ou plusieurs pages dans lesquelles vous souhaitez partager le même état. Vous devez probablement passer car parmi les conteneurs, vous passez par quelques mécanismes comme les paramètres de requête, qui peuvent devenir fastidieux. Donc, vous avez besoin d’un mécanisme simple pour résoudre ce problème. Maintenant, quelles sont les choses que vous souhaitez partager? Par exemple, lorsque vous vous connectez à une application, vous vérifiez via le serveur et vous devez enregistrer ces informations que vous êtes déjà connecté et que vous souhaitez les utiliser dans votre application. Ne serait-il pas préférable qu’il y ait une variable globale capable de gérer ces informations et de les rendre accessibles dans toute l’application? Ce serait génial, non?! C’est là que Redux entre en jeu.

Attendez! La gestion globale de quelque chose n’est-elle pas un anti-modèle? Parce qu’en tant que développeurs d’applications Front-End, il nous a toujours été conseillé de ne rien faire globalement dans le monde Javascript (par exemple $ rootScope dans AngularJS). Mais, dans ce cas, c’est une bonne idée en raison de la façon dont elle est mise en œuvre. Plongeons-nous dans les fondamentaux de Redux.

Si vous souhaitez créer une application basée sur Redux ou convertir votre application existante pour inclure Redux, nous devons considérer les 4 étapes ci-dessous:

Redux – 4 étapes de base

Étape 1: est de créer un Boutique. La création d’un magasin nécessite deux informations: Réducteur (discutera en détail ci-dessous) et Etat. Le magasin contient l’état complet de l’application dans une arborescence d’objets immuable.

Étape 2: est de créer un Réducteur. Cela consiste en Etat et action. Le réducteur est une fonction qui détermine les modifications de l’état d’une application, en réponse aux actions envoyées au Store. N’oubliez pas que les actions décrivent uniquement Qu’est-il arrivé, mais ne décrivez pas comment l’état de l’application change.

Étape 3: Souscrire au magasin. La responsabilité est d’obtenir l’état actuel.

Étape 4: Envoi une action. Les actions sont des charges utiles d’informations qui envoient des données de votre application à votre magasin. Ils sont les seulement source d’informations pour le magasin.

Comme à l’étape 1, créons un magasin. Et comme déjà mentionné, cela aurait besoin d’un réducteur et d’un état. L’exemple de code ci-dessous montre une constante nommée boutique, pour créer un magasin, nous avons besoin de ‘createStore’ (qui vient de redux dans l’instruction import) et il nécessite deux choses – un réducteur nommé comme réducteur et un état initialement défini sur « Paix”C’est-à-dire l’état actuel.

Étape 1: Stocker – réducteur et état

L’étape 2 consiste à créer un réducteur qui nécessite un état et une action. Déclarer un const nommé réducteur, qui est une fonction qui prend état et action. En fonction de l’action lancée, le réducteur renvoie une charge / valeur [it can be termed anything but we will discuss payload in Step 4]. Si il n’y a pas action puis par défaut il renvoie le Etat.

Étape 2: Réducteur – état et action

L’étape 3 consiste à vous abonner au boutique. Pour vous abonner, écrivez simplement store.subscribe. Nous passons une fonction de rappel et enregistrons simplement le nouvel état du magasin et pour cela, nous utilisons getState ().

Étape 3: Abonnez-vous

L’étape 4 est l’action Dispatch. Dispatch est un objet, où le premier élément est toujours type et le second peut être nommé charge utile / valeur, etc. Si vous remarquez, tapez: «ATTACK» est similaire à ce que nous avons défini à l’étape 2 dans une instruction switch. Maintenant, c’est une action que nous créons. Si l’état change de Paix [as in Step1] à ATTAQUE, puis envoyez la charge utile Déploiement de l’armée. De même, effectuez une autre action avec type VERT avec la charge utile réactive. À propos, une charge utile peut également être un objet. Recherchez la console du navigateur dans l’instantané ci-dessous pour la sortie.

Étape 4: Distribuez une action
Instantané de la base de code

Pourquoi pensez-vous que les développeurs se confondent avec l’implémentation REDUX? C’est parce que, idéalement, ÉTAPE 2 [Reducer] et ÉTAPE 4 [Dispatch] aller dans un dossier / fichier séparé pour la modularisation du code et une maintenance facile. Pour faciliter la compréhension des concepts, je les ai conservés dans un seul fichier ici.

J’espère que vous avez rassemblé suffisamment d’informations pour comprendre Redux. J’espère également que vous avez renforcé vos connaissances fonctionnelles fondamentales. N’oubliez pas de toujours garder à l’esprit les 4 étapes susmentionnées. J’essaie constamment de m’améliorer en programmation fonctionnelle et je peux admettre que ce n’est pas facile du premier coup. Si vous comprenez cet article, vous devriez avoir suffisamment de confiance pour investir dans l’apprentissage davantage.