Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision		Révision précédente
front:stockage_de_donnees [2025/09/26 12:20] – [Utiliser l'état global] paolofront:stockage_de_donnees [2025/09/29 16:42] (Version actuelle) – [Utiliser les actions] paolo
Ligne 11: Ligne 11:
   * ''localStorage'' qui conserve les données même après la fermeture du navigateur   * ''localStorage'' qui conserve les données même après la fermeture du navigateur
   * ''IndexedDB'' qui constitue une base de données côté client sans limite de temps   * ''IndexedDB'' qui constitue une base de données côté client sans limite de temps
 +
 +
 ### Monter son Redux store ### Monter son Redux store
  
-Le store Redux est l’objet qui contient l’état global. Pour le mettre en place, il faut utiliser **Redux Toolkit**:+Le store **Redux** est l’objet qui contient l’état global. Pour le mettre en place, il faut utiliser **Redux Toolkit**:
  
-  * On crée des slices ("portions" d’état) contenant des actions. On s'occupe ici du slice de session (''redux/reducers/sessionSlice.js'') pour gérer l'authentification.+  * Nous créons des slices ("portions" d’état) contenant des actions. On s'occupe ici du slice de session pour gérer l'authentification.
  
 ``` ```
 +// src/redux/reducers/sessionSlice.js
 +
 import { createSlice } from "@reduxjs/toolkit"; import { createSlice } from "@reduxjs/toolkit";
  
Ligne 45: Ligne 49:
  
 ``` ```
-  * On combine les reducers issus des slices via ''combineReducers'' et  configure le store via ''configureStore'' dans ''redux/index.js'' par exemple. On oublie pas d'exporter ce store.+  * Nous combinons les reducers issus des slices via ''combineReducers'' et  configure le store via ''configureStore'' dans ''redux/index.js'' par exemple. 
  
 ``` ```
 +// src/redux/index.js
 +
 import sessionReducer from "./reducers/sessionSlice"; import sessionReducer from "./reducers/sessionSlice";
  
Ligne 57: Ligne 64:
 }); });
  
-export const redux = configureStore({ reducer: rootReducer });+export const reduxStore = configureStore({ reducer: rootReducer });
 ``` ```
  
-On peut aussi exporter toutes les actions du slice dans l'index qui sert de point d'entrée du **Redux store** (facultatif).+Les actions du slice peuvent aussi être exportées dans l'index qui sert de point d'entrée du **Redux store** (facultatif).
  
 ``` ```
Ligne 66: Ligne 73:
 ``` ```
  
-  - On passe ce store à ''<Provider>'' de **react-redux** qui englobe toute l'application. Pour rester bien organiser, on va créer un composant ''ReduxProvider''.+  - Ce store est passé au ''<Provider>'' de **react-redux** qui englobe toute l'application. Pour rester organisé, Nous créons un composant ''ReduxProvider''.
  
 ``` ```
 +// src/components/app/ReduxProvider/index.jsx
 +
 import { Provider } from "react-redux"; import { Provider } from "react-redux";
-import { redux } from "../../../redux";+import { reduxStore } from "../../../redux";
  
 export const ReduxProvider = (props) => { export const ReduxProvider = (props) => {
Ligne 76: Ligne 85:
  
     return (     return (
-        <Provider store={redux}>+        <Provider store={reduxStore}>
             {children}             {children}
         </Provider>         </Provider>
Ligne 83: Ligne 92:
 ``` ```
 ``` ```
 +// src/App.jsx
 +
 import { Router } from "./components/app/Router"; import { Router } from "./components/app/Router";
 import { ReduxProvider } from "./components/app/ReduxProvider"; import { ReduxProvider } from "./components/app/ReduxProvider";
Ligne 94: Ligne 105:
 }; };
 ``` ```
-Maintenant l'état global de **Redux** est accessible dans n'importe quel fichier utilisé au sein du ''ReduxProvider''.+Désormais l'état global de **Redux** est accessible dans n'importe quel fichier utilisé au sein du ''ReduxProvider'' 
 +.
 ### Utiliser l'état global ### Utiliser l'état global
  
-Pour récupérer l'état global, **React-redux** met à disposition ''useSelector''.+Pour récupérer l'état global, **react-redux** met à disposition ''useSelector''.
  
-Maintenant qu'on a les moyens de savoir si une session est ouverte, reprenons nos composants ''PublicRoutes'' et ''PrivateRoutes'' et remplaçons cette condition "test".+Maintenant que nous avons les moyens de savoir si une session est ouverte, reprenons nos composants ''PublicRoutes'' et ''PrivateRoutes'' et remplaçons cette condition "test".
  
 ``` ```
 +// src/components/app/Router/PublicRoutes/index.jsx
 +
 import { Outlet, Navigate } from "react-router-dom"; import { Outlet, Navigate } from "react-router-dom";
 import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
Ligne 112: Ligne 126:
 ``` ```
 ``` ```
 +// src/components/app/Routes/PrivateRoutes/index.jsx
 +
 import { Outlet, Navigate } from "react-router-dom"; import { Outlet, Navigate } from "react-router-dom";
 import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
Ligne 122: Ligne 138:
 ``` ```
  
-Vous êtes maintenant bloqué sur la page **Login**. Mais tout va bien ! Nous allons essayer de nous connecter. +Nous sommes maintenant bloqués sur la page **Login** car aucune session n'est stockée (personne n'est authentifiée). 
 +.
 ### Utiliser les actions ### Utiliser les actions
  
-Reprenons à présent à présent notre requête de connexion et essayons de modifier l'état global avec les actions que nous avons ajoutées à notre slice.+Reprenons à présent à présent notre requête de connexion et essayons de modifier l'état global avec les actions que nous avons ajoutées à notre slice. Pour cela il faut utiliser ''useDispatch''.
  
 +```
 +// src/components/pages/Login/index.jsx
  
 +import { Input } from "../form/Input";
 +import { useDispatch } from "react-redux";
 +import { setSession } from "../../../redux";
 +import { API_URL } from "../../../utils/constants/vite";
  
 +export const Login = () => {
 +    const dispatch = useDispatch();
 +    
 +    const handleFormOnSubmit = (e) => {
 +        e.preventDefault() // empêche le comportement par défaut du formulaire
 +        
 +        const data = new FormData(e.target)
 +        const values = Object.fromEntries(data.entries());
 +        
 +        const request = {
 +            method: "POST",
 +            body: values,
 +            headers: {
 +                Accept: "application/json",
 +                "Content-Type": "application/json",
 +            }
 +        };
 +
 +        fetch(`${API_URL}/login`, request)
 +            .then(response => response.json())
 +            .then(json => dispatch(setSession(json.data)))
 +            .catch(error => console.error(error));
 +    };
 +    
 +    return (
 +       // page login
 +    );
 +};
 +```
  
 +Et voilà vous maîtrisez la base de **Redux**. Il ne vous reste plus qu'à rajouter une fonction de déconnexion (dans votre page **Home** par exemple) et vous avez une application avec un système d'authentification fonctionnel.