Projet 10

START >

Projet 10:

Implémentez le front-end d'une application bancaire avec React

Blocages & Resolutions

Swagger

Rendu Visuel

React

>

<Agenda>

Explication du Projet

>

Redux

Redux files & code

<Projet>

mission : Implémentez le front-end d'une application bancaire avec React

Contacté par ArgentBank pour développer une application web React intégrant l'authentification des utilisateurs et la gestion des transactions. Les maquettes et l’API sont déjà disponibles, mais l'intégration reste à faire. La mission principale inclut :

• Développer l’authentification utilisateur avec Redux:Permettre la gestion de la connexion, de la déconnexion et du profil utilisateur en utilisant Redux pour un état global centralisé.

>

>

<Rendu Visuel>

>

>

Pages : Représentent des vues complètes ou des sections principales de l'application, souvent associées à une route (comme la page d'accueil ou de profil). Components : Sont des éléments réutilisables qui composent les pages (comme un bouton ou un formulaire). Ils gèrent des parties spécifiques de l'interface utilisateur.

React est une bibliothèque JavaScript pour créer des interfaces dynamiques.En React, les Pages et les Components ont des rôles distincts mais complémentaires :

>

Next >

<React >

Redux est une bibliothèque de gestion d'état pour les applications JavaScript, principalement utilisée avec React. Elle permet de centraliser et de gérer l'état de l'application de manière prévisible et cohérente.

Store (magasin) : C'est comme une grande boîte où toutes les informations (ou l'état) de votre application sont stockées. Tout ce dont l'application a besoin, comme les données, est conservé ici. Action : C'est comme un message ou une instruction qui dit à Redux ce qui doit se passer. Par exemple, « ajouter un nouvel élément à la liste » ou «mettre à jour les informations de l'utilisateur ». C'est ici que il faut décrire ce que on vuex changer. Reducer (réducteur) : Le réducteur est comme un responsable qui écoute l'action et décide comment mettre à jour le store en fonction de ce que l'action demande. Il prend l'état actuel et l'action, puis renvoie un nouvel état. Dispatch (envoi) : Envoi l'action. Lorsque on « dispatch » (envoi) une action, on demande à Redux : « exécute cette action et mets à jour le store ». Le dispatch déclenche le réducteur pour qu'il fasse son travail et mette à jour les données. En résumé simplement : Le Store contient les données. L'Action est l'instruction qui dit ce qui doit changer. Le Reducer gère l'action et met à jour le store. Dispatch est comment nous envoyons l'action pour déclencher la mise à jour.

>

Next >

<Redux >

*Axios est une bibliothèque JavaScript qui permet de faire des requêtes HTTP (comme GET, POST, PUT, DELETE) de manière simple, et est principalement utilisée pour communiquer avec un serveur ou une API.

Dans le fichier user.action, nous créons des actions qui seront gérées par le reducer. Ici, nous définissons les variables et les fonctions nécessaires pour traiter et stocker les informations. Nous avons 3 actions : POST : Nous envoyons une requête à l'API pour récupérer le token. Le token est stocké dans la variable FETCH_TOKEN. Avec dispatch, nous envoyons la réponse (le token) au reducer via le payload. GET : Après avoir récupéré le token, nous l'utilisons pour obtenir les informations de l'utilisateur. La requête inclut une autorisation basée sur le token (pour vérifier que l'utilisateur est authentifié). Les données de l'utilisateur sont stockées dans FETCH_USER_DATA. Nous envoyons ces données au reducer en utilisant dispatch et le payload. PUT : Une fois que nous avons à la fois le token et les données de l'utilisateur, nous envoyons une requête pour mettre à jour le nom d'utilisateur (ou d'autres données utilisateur). Le token est à nouveau utilisé pour l'autorisation. Les nouvelles données sont stockées dans EDIT_USER_NAME. Nous envoyons les informations mises à jour au reducer à l'aide de dispatch et du payload.

>

Next >

<User.action >

Dans le fichier du reducer, nous gérons (c'est-à-dire, nous modifions) l'état de l'application en fonction des actions que nous recevons. Nous avons défini 4 cas différents dans la fonction userReducer, qui correspondent aux actions qui peuvent être envoyées . Dans le cas de l'action FETCH_TOKEN, nous prenons le token qui provient du fichier des actions et nous le savons dans le localStorage. De cette manière, le token restera disponible même si la page est rechargée. Ensuite, nous mettons à jour l'état du token. Nous copions tout l'état précédent (grâce à ...state), mais nous changeons uniquement la valeur du token en y insérant celui qui provient du payload de l'action.

>

Next >

<User.Reducer >

Dans ce code, nous utilisons 3 hooks principaux useSelector() : Ce hook permet de récupérer les données de l'utilisateur stockées dans Redux et de les mettre dans la variable user pour pouvoir les utiliser dans le composant.useDispatch() : Ce hook permet d'envoyer des actions à Redux. Premier useEffect() : On vérifie si le token de l'utilisateur existe. Si oui, on récupère ses données (grâce à fetchUserData), et cette action se déclenche à chaque changement du token. Deuxième useEffect() : On vérifie si les données de l'utilisateur et le token sont valides. Si c'est le cas, on définit isConnected à true, sinon on redirige l'utilisateur vers la page de connexion.

>

Next >

<User>

Le composant UserGreeting, est conçu pour afficher un message de bienvenue personnalisé pour l'utilisateur et lui permettre de modifier son nom d'utilisateur.

useEffect : Le useEffect vérifie si le userName dans Redux existe et s'il diffère de l'état actuel de userName. Si c'est le cas, il met à jour l'état local avec la nouvelle valeur provenant de Redux. handleEditButtonClick : Cette fonction définit editButton sur true pour afficher le formulaire d'édition et met à jour l'état de userName avec le userName actuel provenant de Redux. handleEditName : Ici, nous empêchons le rechargement de la page en utilisant preventDefault. Ensuite, nous stockons le userName mis à jour dans l'objet postData. Avec le dispatch, nous appelons l'action editUserName pour mettre à jour le userName dans Redux et sur le backend. Si updatedUserData existe et contient le nouveau userName, nous mettons à jour l'état local pour refléter ce changement.

>

Next >

<USerGreeting>

L'opération de suppression (DELETE) n'a pas été incluse afin de préserver la traçabilité. Dans un contexte financier, il est important de maintenir un historique complet des transactions pour garantir la transparence et éviter toute perte de données critiques.

C'est un outil utilisé pour documenter et concevoir des API. Il permet de faciliter la communication entre développeurs et l'intégration avec des outils de test.Un guide d'utilisation pour les API. CRUD : Acronyme de Create, Read, Update, Delete, les quatre opérations de base pour gérer des données, liées aux méthodes HTTP : POST, GET, PUT/PATCH, DELETE.

>

Next >

<Swagger>

>

>

//Blocages et resolutions

The End