Maintenant que vous maîtrisez React, passons à la gestion des données en local. Il existe différentes façons de gérer les états mais Redux est aujourd’hui le plus répandu et certainement le plus robuste. La librairie est compatible avec React mais également avec Angular, il est possible également de l’utiliser sans librairie ou framework.

C’est en effet une librairie qu’il est impératif de connaître pour une utilisation avancée de React. Redux est également très plébiscité en React Native.

Qu’est-ce que Redux ?

Redux est une librairie Javascript qui permet la gestion d’état pour les applications en React, Angular. Elle n’est pas forcément mise en avant par Facebook car initialement cette gestion d’état se faisait via Flux, une solution similaire à Redux mais plus complexe à mettre en place pour un résultat semblable.

Cycle Redux

Voici ci-dessous le cycle simplifié de Redux, nous allons détailler par la suite chaque étape du processus ainsi que les composants annexes qu’il est possible de mettre en place pour aller plus loin dans son utilisation.

Exemple simple (parking)

Redux n’a rien de compliqué en soi, mais il repose sur une logique qui lui est propre et sans comprendre l’ensemble du scope vous pouvez vite vous perdre et ne plus rien comprendre. Pour faciliter sa compréhension, je vais passer par une analogie. Pour cela j’ai choisi de prendre l’exemple d’un parking.

Notre parking possède une borne à l’entrée ainsi qu’une autre en sortie, ce qui permet de connaître à tout moment le nombre de voitures qui y sont garées. Pour simplifier les choses il est impossible de sortir par l’entrée et de rentrer par la sortie du parking.

Le processus est simple, une fois qu’une voiture rentre, la borne d’entrée notifie qu’une voiture va rentrer dans le parking: si celui-ci est plein, il affichera un message indiquant que celui-ci est plein, une fois qu’une voiture sortira du parking le message disparaîtra et laissera la voiture rentrer. La borne de sortie notifiera le parking qu’une voiture est sortie.

En pratique

Voici donc l’exemple du parking en application, vous pouvez appuyer sur la voiture en entrée ou en sortie pour faire rentrer et sortir des voiture du parking.

Cet exemple contient une page Main ainsi que de trois composants :

Entry: qui va gérer les entrées du parking
Parking: qui va afficher le nombre de places restantes
Exit: qui va gérer les sorties des voitures

Extensions React et Redux

Il existe deux extensions indispensables pour travailler avec React et Redux dans votre navigateur Chrome.

React Developer Tools

Permet de débugger vos composants et depuis peu d’avoir une vision des composants les plus gourmands qui viennent constituer votre application.

Disponible ici : https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

Redux DevTools

Permet de visualiser les différentes actions sur le store de votre application et de comprendre les comportements des reducers.

Disponible ici : https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd

Vous pouvez les tester directement sur le projet de parking et voir les comportements des actions sur le store qui est composé d’un seul reducer qui est parking.