Différences

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

--- front:stockage_de_donnees [2025/09/26 12:37] – [Utiliser les actions] paolo
+++ front:stockage_de_donnees [Date inconnue] (Version actuelle) – supprimée - modification externe (Date inconnue) 127.0.0.1
@@ Ligne 1: / Ligne 1: @@
-# Stockage de données
-Documentation [IndexedDB](https://developer.mozilla.org/fr/docs/Web/API/IndexedDB_API)
-Documentation [localStorage](https://developer.mozilla.org/fr/docs/Web/API/Window/localStorage)
-Documentation [sessionStorage](https://developer.mozilla.org/fr/docs/Web/API/Window/sessionStorage)
-Documentation [React-redux](https://react-redux.js.org/)
-Documentation [Redux Toolkit](https://redux-toolkit.js.org/)
-Redux est une lib de gestion d'état global dans une application React. Cet état est stocké en mémoire mais disparaît lors d'un rechargement de page. Pour le rendre persistant, on peut l'associer aux mécanismes de stockage du navigateur:
-  * ''sessionStorage'' qui conserve les données uniquement le temps de la session
-  * ''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
-### 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**:
-  * 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.
-```
-import { createSlice } from "@reduxjs/toolkit";
-const initialState = {
-    data: JSON.parse(sessionStorage.getItem("session")) ?? null
-};
-const sessionSlice = createSlice({
-    name: "session",
-    initialState,
-    reducers: {
-        setSession(state, action) {
-            const session = action.payload;
-            state.data = session;
-            sessionStorage.setItem("session", JSON.stringify(session));
-        },
-        unsetSession(state) {
-            state.data = null;
-            sessionStorage.removeItem("session");
-        }
-    },
-});
-export default sessionSlice.reducer;
-export const { setSession, unsetSession } = sessionSlice.actions;
-```
-  * 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.
-```
-import sessionReducer from "./reducers/sessionSlice";
-import { combineReducers } from "redux";
-import { configureStore } from "@reduxjs/toolkit";
-const rootReducer = combineReducers({
-  session: sessionReducer
-});
-export const redux = 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).
-```
-export * from "./reducers/sessionSlice";
-```
-  - On passe ce store à ''<Provider>'' de **react-redux** qui englobe toute l'application. Pour rester bien organiser, on va créer un composant ''ReduxProvider''.
-```
-import { Provider } from "react-redux";
-import { redux } from "../../../redux";
-export const ReduxProvider = (props) => {
-    const { children } = props;
-    return (
-        <Provider store={redux}>
-            {children}
-        </Provider>
-    );
-};
-```
-```
-import { Router } from "./components/app/Router";
-import { ReduxProvider } from "./components/app/ReduxProvider";
-export const App = () => {
-    return (
-        <ReduxProvider>
-            <Router />
-        </ReduxProvider>
-    );
-};
-```
-Maintenant l'état global de **Redux** est accessible dans n'importe quel fichier utilisé au sein du ''ReduxProvider''.
-### Utiliser l'état global
-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".
-```
-import { Outlet, Navigate } from "react-router-dom";
-import { useSelector } from "react-redux";
-export const PublicRoutes = () => {
-    const session = useSelector(state => state.session.data);
-    return session ? <Navigate to="/" : <Outlet />;
-};
-```
-```
-import { Outlet, Navigate } from "react-router-dom";
-import { useSelector } from "react-redux";
-export const PrivateRoutes = () => {
-    const session = useSelector(state => state.session.data);
-    return session ? <Outlet /> : <Navigate to="/login" />;
-};
-```
-Vous êtes maintenant bloqué sur la page **Login**. Mais tout va bien ! Nous allons essayer de nous connecter.
-### 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. Pour cela il faut utiliser ''useDispatch''.
-```
-import { Input } from "../form/Input";
-import { useDispatch } from "react-redux";
-import { setSession } from "../../../redux";
-export const Login = () => {
-    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 => setSession(json.data))
-            .catch(error => console.error(error));
-    };
-    return (
-       // page login
-    );
-};
-```