Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

L'essentiel de React.js

Utiliser les reducers et les actions

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Avec la notion de store, il faut aussi parler des reducers. Les reducers permettent d'effectuer des actions. Passez en revue toutes les notions de ce superbe pattern !
06:29

Transcription

Vous avez bien compris le principe du "store" qui n'est qu'un "state"... lequel sera utilisé via des événements sur des boutons. On câblera donc des événements qui seront des fonctions qu'on appelera. On travaillera avec le "set state" pour garder une intégrité... puisque c'est l'idée du "store" qui démarre en état T... et ensuite on vient le modifier avec des fonctions. La deuxième étape du pattern flux pour l'avoir en tout avec une implémentation... est de travailler avec des "reducer". Il s'agit d'une fonction qui s'occupe d'exécuter toutes les actions. Elle agit en deux temps. On aura un reducer qu'on va coder ici... et une fonction ici qui devra appeler le "reducer". Cette fonction peut porter un nom au choix. Mais on l'appelera "dispatch". Alors, on crée d'abord ici un "reducer". Il ne s'agit que d'une fonction... comme on est en ES6 et que mon script m'assiste on va la faire en image courte qui va prendre deux paramètres: le store et l'action. A l'intérieur on va switcher sur les actions... pour effectuer des actions sur le store et retourner ce store. On écrira juste un switch qui prendra l'action en paramètre... et fera quelque chose selon l'action. On câblera d'abord une action default, c'est-à-dire pas de données, etc. Alors on retourne juste le store pour pouvoir l'initialiser. Ensuite, on câblera ici des actions avec case. On a donc deux actions principales sur le Counter, mais on peut en avoir plus. Tout dépendra de votre code, mais pour l'exemple, on mettra Increment. Et comme vous l'imaginez bien... on va implémenter également une option Decrement. Que fera l'option Increment? Elle fera exactement ce qu'on faisait en dessous... c'est-à-dire agir sur la valeur du store, puis faire un +. En pratique, ça donnera directement ici store.value++. Evidemment, on devra toujours retourner le store. Pareil pour le deuxième, sauf qu'au lieu de faire ++, on fera - -. On retournera une fois de plus le store. Maintenant, il faudra créer une action dispatch. On mettra cette action ici à l'intérieur... car ce n'est qu'elle qui agira sur le state. On n'aura plus ces fonctions "increment" et "decrement" qui agissent sur le state. On aura juste une action qui appelera le "reducer" et qui fera son travail. On va donc couper cette partie et la coller dans le "dispatch"... et on ne fera pas tout cet appel visible ici. On va plutôt directement appeler le "reducer"... et on va lui passer le "preState" qui sera en fait le "store" dans sont état actuel... et une action qu'il faudra bien-sûr récupérer. On va l'ajouter en paramètre du "dispatch". C'est tout ce qu'on a à faire là. Ici, on câble le "dispatch"... on lui demande de faire simplement un "increment". Ensuite, on reprend la même opération en dessous. N'oubliez pas "this" car c'est une fonction interne au "counter". Cette fonction fera plutôt un "decrement". Quand vous aurez câblé ces deux actions, vous aurez déjà implémenter un "reducer" avec un "dispatch"... et vous aurez déjà complètement un "pattern flux". Mais, il nous manque cette valeur initialisée au début. Souvenez-vous que quand on ne passe pas d'actions on retourne le store. Autrement dit, on mettra notre "store" en état premier ici. Ce sera donc la valeur par défaut du "store" si on ne passe rien. Comment fera-t-on pour le câbler sur le state et synchroniser tout ça? Ici, on appelera simplement le "reducer". On lui passera en "store" "undefined" et en action on lui passera "null". Alors, pas d'action pas de store et du coup je me retrouve sur le "state"... directement avec le "store" à valeur 0. Voilà une implémentation complète. A mesure que votre application grossira, vous pourrez rajouter des actions... pour effectuer d'autres actions directement sur le "store". Vous pouvez câbler ce "store" et le synchroniser avec d'autres composants. Ici surtout les actions appeleront toujours les "dispatch". Avec un seul "setState" à un endroit, on est sur un code très simple et pur. Autre avantage, les "reducer" ne seront que des fonctions java script pures. On est donc sur quelque chose de simple. On est hors scope de REACT. Vous pouvez implémenter flux partout. Nous on le fait avec REACT, car c'est un concept amené par REACT. Mais, on peut bien le faire avec autre chose. N'oubliez pas qu'on a pas fait du Redox mais du flux. Or flux c'est le pattern, mais concrêtement Redox se base sur flux. Vous pouvez aussi faire du Redox pour voir ce que pouvez avoir de plus. Mais il n'est pas toujours utile d'implémenter du Redox si le flux est plus facile. Voyons maintenant dans le navigateur si cela a fonctionné. Rechargeon juste la page pour voir le résultat. Au départ on est à 0. En cliquant sur + ça incrémente et sur - ça décrémente. Voyons maintenant ce qui se passe ici. Pour ce faire, on utilise console.log qu'on câblera dans nos actions... juste pour montrer ce qui se passe. Ça peut être intéressant de l'avoir ainsi pour pouvoir voir dans la console. En mode développeur, on essaiera de le supprimer. C'est bien de voir ce qui se passe sur le "store" en mode développeur... et surtout sur le "reducer" pour ne pas se perdre si vous avez assez d'actions. On peut mettre là "initial store". On revient sur le navigateur et on a Initial store au début. En dispatchant ensuite une action en console le résultat sera synchronisé. Voilà une implémentation compète de flux que vous ferez sur une application.

L'essentiel de React.js

Exploitez pleinement React.js ! Créez des composants web complexes rapidement, découvrez leurs relations ainsi que leurs cycles de vie, passez en revue la navigation, etc.

3h28 (49 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
React.js React.js 15.3.2
Spécial abonnés
Votre/vos formateur(s) :
Date de parution :27 oct. 2016
Durée :3h28 (49 vidéos)

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !