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/29 10:53] – [Monter son Redux store] 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
Ligne 48: 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 60: 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 69: 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 79: Ligne 85:
  
     return (     return (
-        <Provider store={redux}>+        <Provider store={reduxStore}>
             {children}             {children}
         </Provider>         </Provider>
Ligne 86: 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 97: 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 116: 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 126: 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
  
Ligne 132: Ligne 145:
  
 ``` ```
 +// src/components/pages/Login/index.jsx
 +
 import { Input } from "../form/Input"; import { Input } from "../form/Input";
 import { useDispatch } from "react-redux"; import { useDispatch } from "react-redux";
 import { setSession } from "../../../redux"; import { setSession } from "../../../redux";
 +import { API_URL } from "../../../utils/constants/vite";
  
 export const Login = () => { export const Login = () => {