Architecture projet via Redux

Dans le dossier src/ nous avons une architecture classique, qu’il est possible de faire évoluer mais pour cet exemple nous allons en rester là :

Actions : va contenir les différentes actions qu’il va être possible de faire, ces actions vont permettre de mettre à jour le reducer de notre parking.
Components : ce dossier n’est pas nouveau pour vous, il contient les composants de notre application notamment Entry, Parking, Exit.
Const : les constantes permettent de mieux s’y retrouver dans les noms des actions, ce n’est pas obligatoire mais j’encourage à passer par ces constantes afin de ne pas se tromper de nom d’action entre ce qui va être déclaré dans le reducer et les actions.
Pages : dans notre exemple il n’y aura qu’une seule page qui sera Main
Reducers : va contenir nos reducers, nous verrons par la suite en détail ce que cela implique et comment ils fonctionnent.
Index.js : c’est le fichier principal de notre application, le point d’entrée, il va transposer notre application pour l’injecter dans le DOM via ReactDOM, c’est également dans ce fichier que nous allons créer notre Provider qui sera alimenté directement par un store Redux.
Store.js : représente le store de notre application, il va combiner tous nos reducers pour créer un seul objet. Cet objet c’est le state de notre application, vous allez souvent le voir dans les reducers mais également dans les composants connectés au store.

Reducer

Nous allons commencer à détailler notre application avec le reducer parking, ce reducer fait partie du state global de l’application. Il est possible d’avoir plusieurs reducers dans une application, il suffit de les combiner dans notre fichier store.js .

Dans notre application, il est possible d’accéder à l'information de la capacité du parking stockée dans notre reducer via state.parking.capacity et directement via state.capacity à l'intérieur de notre fichier src/reducers/parking.reducer.js .

Dans ce fichier, on commence par importer nos constantes , ensuite l’état inital de notre reducer parking et ensuite le reducer parking qui se présente toujours sous la forme d’un switch case, en fonction de l’action que l’on va lui demander il va agir différemment sur le state parking.

Dans notre exemple il y a deux actions possibles, incrémenter le nombre de voitures quand une voiture entre dans le parking ou décrémenter ce même chiffre une fois qu’une voiture sort du parking. L’option par défaut va retourner l'état initial déclaré au début du premier chargement du reducer.

Actions

C’est uniquement via les actions qu’il sera possible d’agir sur les reducers, il est impossible de changer leurs valeurs sans passer par les actions. Elles feront donc la jonction entre nos composants et le state global de notre application.

Dans le fichier src/actions/parking.actions.js vous allez retrouver les deux actions possibles sur notre application de parking, carEntry qui va permettre de faire rentrer une voiture et carExit qui va signaler qu’une voiture est sortie de celui-ci.

A l’appel de l’une des fonctions, Redux va aller exécuter directement le reducer concerné, c’est pour cela que nous avons un fichier parking.const qui est commun pour le reducer et les actions.

Nous verrons par la suite qu’il est possible de faire passer des variables dites de payload pour complexifier notre traitement dans les reducers.

Page Main

Notre page Main sert principalement de container, elle va être connectée au Redux et va donc recevoir les informations du state à chaque changement et relancer la fonction de render quand nous allons mettre à jour numberOfCars dans notre reducer parking.

Dans notre fonction de render, on retrouve les trois composants de notre application. Au niveau des Props j’ai fait exprès de découper en deux parties les exports des constantes pour bien mettre en avant qu’il est possible de faire passer des variables dans les props mais également des fonctions.

Après la class Main il y a une constante mapStateToProps elle permet d’injecter dans notre class les props numberOfCars et capacity qui se trouvent dans le state de l’application.

A la suite de cela il y a mapDispatchToProps qui permet de la même façon que mapStateToProps de faire passer des props mais cette fois-ci ce sont les actions de notre parking qui seront passées.

Et pour finir on vient connecter notre composant à Redux via la fonction connect en lui indiquant notre mapStateToProps et mapDispatchToProps.