L'essentiel de React.js

Implémenter le pattern Flux dans son projet

Testez gratuitement nos 1298 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Travaillez ici sur un cas concret. Cette mise en pratique va vous prouver qu'il est possible de simplifier la logique d'un projet.
07:31

Transcription

Est-ce donc difficile de mettre en place un système flux sur notre application? Pas vraiment et nous le verrons. N'hésitez pas à mettre pause pour étudier le code proprement. Je suis parti sur un mainReducer pour pouvoir le relier avec MainComponent. Je vous l'ai dit, les nommages sont au choix. Mais soyez le plus clair possible. L'idée étant de vous y retrouver facilement. Ensuite, store avec pour paramètre de base MainComponet.getData. Ça n'a pas pas bouger car j'ai gardé la même implémentation... ainsi que les mêmes données d'avant. Ensuite, ici j'ai pas passé une action sous format string mais un objet. C'est important car je dois agir sur mon store avec des actions particulières. Notamment ici mon action aura un type et une valeur de temps en temps. Type et value sont les deux choses que j'aurai dans mon objet d'action. J'ai prévu 2 actions possibles: Add ask qui me permet d'agir sur le store et la collection des items... et me permet de rajouter l'objet simplement avec un push... qui sera passé sur la valeur dans l'objet d'action. J'ai prévu un Change User car c'est plus ou moins... la modification qu'on avait sur le store, changer l'utilisateur actuel pour interagir avec lui et je vais passer son ID directement dans la valeur pour interagir. Je garde donc ici quelque chose qui sera toujours presque pareil. Mes actions seront toujours composées d'un type et d'une valeur au besoin. Si j'ai pas besoin de la valeur, je ne la met pas. C'est donc ainsi concrêtement. Ma valeur sera bien sûr dès fois un ID, un objet, etc. Ça me permet d'avoir des actions avec des types... et des valeurs utilisales pour interaction. Comment donc câbler ça? Comme tout à l'heure, le this.state ira sur le mainReducer avec undefined... sauf que je mets pas null en paramètre, mais un objet vide... sinon ça ne marche pas. Là on a un objet vide donc ça va marcher. Ensuite, j'ai repris la même chose... c'est-à-dire que j'ai créé un dispatch avec une action et une valeur. Je ne suis pas obligé de l'utiliser, car dans Java script quand il y a pas... de paramètre sur un objet ou un paramètre de fonction, il est vide. Ensuite je synchronise avec setState comme tout à l'heure. Je passe prevState, puis mainReducer, prevState est le premier paramètre. J'ai besoin du prevState pour agir. Il est mon store concrêtement. Ici je passe en deuxième paramètre non pas un verbe, mais juste action comme string... mais un objet qui comporte un type qui sera vraiment le verbe de l'action... et une valeur qui sera la valeur à ajouter et avec laquelle je pourrai interagir. On est plus dans la logique d'un counter mais dans l'utilisation d'une appli où je pourrai ajouter ou supprimer des objets. Je peux bien travailler comme je veux avec le dispatch et le reducer. J'avais 2 fonctions qui me permettent d'interagir dans mon appli: changeName et addItem ChangeName prend une clé en valeur c'est bien ce qu'on avait tout à l'heure. Donc quand on fait un changeName on va pouvoir changer de nom ici. C'est ce qu'on avait là et c'est la fonction qui est appelée directement... avec l'ID de l'utilisation de la clé. Celui-ci appelera donc le verbe CHANGE USER... qui fera un set de l'actuel sur le store, à savoir store.users... et récupérera dans action.value l'ID et le name. Ceci ne va pas changer. Mon deuxième verbe est Add task qu'on a ici. Là je l'ai appelé addItem. C'est pas vraiment l'idéal et je vous conseille donc de garder le même nom. C'était juste de la paresse j'avais pas envie de le redéclarer. Mais le mieux serait de le redéclarer réellement. On va chercher addItem où il était et remplacer par Task. Celui-ci est assez intéressant car c'est une props qui est passée directement sur le AddComponent... qui lui n'a pas vraiment changé et continue de faire son submit ici. Il va utiliser la props onSubmit et va renvoyer un objet. J'ai juste un peu modifier l'objet, ce qui ne change presque rien. Cette fois ci je sort le user et la task pour avoir les deux valeurs séparées... dans un objet propre que je pourrai réutiliser dans template. Donc ça n'a pas changé et c'est le onSubmit qui est envoyé... quand je soumets le formulaire. Bien sûr ce onSubmit est câblé depuis le bas sur le addTask qu'on a ici. Ce addTask utilise le dispatcher, fait un ADD TASK, et passe l'item qui est l'objet. Quand on passe l'item on l'ajoute grâce au reducer... en faisant un push sur items qui à la base est une connexion. Et là on a récupéré l'objet et on l'a ajouter. Il y a donc pas d'incidence spécifique sur le code, sauf la clarification. C'est vrai qu'on a maintenant un dispatcher et les actions qu'on rajoutera se feront une fois sur le dispatch et en rajoutant toute la logique dans le reducer c'est bien plus simple, plus clair et plus propre. La dernière modification sera de récupérer les bonnes valeurs ici. C'est le fameux objet que j'ai modifié en haut où je passe le user et la task. Ce qui me permet de les réutiliser dans le template. C'est plus facile et on peut mettre plus de détails sur l'utilisateur. Si vous voulez aller plus loin, vous pouvez faire un counter... pour chaque utilisateur et y travailler. En rajoutant une tâche rajoutez aussi à l'utilisateur son nombre de tâches actuelles toujours à l'aide du reducer. Ça peut être un bon exercice pour vous. Voyons ça en action. En rechargeant ma page je retourne sur les utilisateurs ici. Je vais donc revenir sur ma page principale qui se trouve ici. Faites attention car là on a un bind. Vous voyez qu'il y a des erreurs qui vont sauter comme la ligne 64. Essayez d'aller regarder ce qui se passse. En effet, ma ligne 64 ne peut plus marcher car on vient de renommer. Alors, c'était pas que la paresse, mais quand vous modifiez, faites-le partout. Le bind fait sur le addTask ici nous créera une erreur si on ne modifie pas. Pour le fonctionnement je vais assigner une tâche comme tout à l'heure... et ajouter la tâche qui s'affiche sans soucis avec le même comportement. De même en changeant de nom vous ne verrez pas de différence... sauf que l'interaction est extrêmement rapide... car tout est centralisé. C'est une seule fonction et du java script qui s'exécute.. et pour le coup, ça risque d'accéler votre application. Maintenant que vous savez faire et avez vu une implémentation compète faites-la dans vos applications REACT, car ça vous permettra de soulager la tâche des développeurs... mais surtout des nouveaux développeurs, car c'est très lisible, et on voit exactement ce qui se passe.

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
Date de parution :27 oct. 2016

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 !