Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

L'essentiel de React.js

Comprendre le principe de store unique

Testez gratuitement nos 1340 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
La notion importante du pattern Flux est la notion de store. Il s'agit d'un emplacement unique où sont stockées les données. Voyez comment les interfacer avec le state.
04:24

Transcription

Vu que vous découvrez le Pattern Flux... vous entendrez souvent parler de la notion de Store unique. Que signifie Store unique? Ce concept est particulier quand on l'aborde ainsi. Mais, en réalité il est extrêment simple. On va partir sur un code totalement différent de notre application. Avant on avait ce app.js qu'on va fermer... maintenant on va travailler sur le flux.js. Je l'ai donc relié ici et vous ferez aussi la même chose. Je vais vous décrire le code et vous devrez le recopier et on travaillera cela. Mais, on parlera plus du Store unique. C'est ce qui va vraiment fonctionner quand on utilisera ce pattern... aussi utilisé par redox. Si je vous montre une implémentation juste en REACT, c'est parce que vous n'aurez pas toujours besoin de redox. En réalité, REACT est assez suffisant. Que signifie donc Store unique? Il s'agit en fait de votre state... que vous utilisez déjà depuis peu. On a donc là une implémentation simple. On a un Counter qui est une classe qui va étendre React Component... qui a un constructeur et qui va définir ici un state unique. En fait ce state ne va jamais bouger. Si vous l'avez remarquez depuis le début, on ne peut intéragir sur le state si on ne fait pas de set state. Et là on est dans un pattern flux, car on a un store unique avec des données... sur lesquelles on ne peut interagir qu'avec des événements. Ces événements vont être directement déclenchés par des événements html... ou java script uniquement sur les boutons. On a donc un constructeur avec un state et une valeur à 0. On a ensuite une fonction increment et une fonction decrement. Elles sont bien-sûr liées comme on le fait depuis le début. Que fait l'increment ici? Elle prend juste le State d'avant. On peut donc dans ce State récupérer celui d'avant et agir dessus. La valeur ici sera celle du state précédent plus 1 dans l'incrément. Dans le décrément, on aura la valeur du state précédent moins 1. Ici vous agirez sur la donnée dans un store unique, c'est-à-dire dans l'emplacement unique. Cet emplacement sur votre composant renvoie au state. Ce qui est bien car on ne peut pas le modifier directement. Souvenez-vous qu'on avait essayé de travailler au début de cette vidéo... sur "this.state.value = Or, on a pas le droit de le faire car cette valeur est protégée. On est donc obligé de passer par ce state pour venir agir dessus. Autrement dit, on est ici concrêtement sur un store unique, donc protégé. On stocke des données sur ce store et on vient travailler avec. La seule différence avec une implémentation REDOX... est que le store s'appelle state. C'est là la seule différence. Si vous comprenez ça, c'est que vous avez presque compris le pattern flux. Ensuite, on parlera des reducer qui concerne la deuxième partie. Retenez juste qu'on a un "increment" et un "decrement". Et le "template" est très simple. Il va afficher la valeur, utiliser "l'increment"... et "le decrement" en les cablant sur les boutons. Regardons maintenant dans le navigateur pour les faire agir. On a donc notre "template" et un bouton qui incrémente. Si j'appuie sur + ça fera plus 1, 2, etc. Si je décrémente, je réduis la valeur. Voilà une implémentation très simple qui vous permet de comprendre le "store". On a une valeur stockée à l'intérieur qui sera actualisée selon nos actions. C'est tout le travail. Si vous pensiez donc que le pattern flux était compliqué... vous êtes maintenant persuadé du contraire. Comprenez juste qu'il s'agit de stocker les valeurs à un endroit... sans qu'elles ne soient modifiables par l'extérieur... et pouvoir interagir sur ces valeurs avec quelque chose. Ici ce quelque chose est un événement câblé sur un bouton. Ça peut être autre chose. Il y a plein de possibilités. Mais pour nous ce sont les boutons qui agiront sur le "store", donc sur le "state".

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 !