Introduction - Redux

• FAQ:
  • C’est quoi une fonction Pure
  • C’est quoi une Action
  • C’est quoi un Reducer
  • C’est quoi un store
  • c’est quoi un middleware
• Bonne pratiques Redux
  • Structurer l’etat correctement (eviter la duplication des données)
    • DRY : reutiliser les reducers au maximum pour eviter la duplication
    • utilisation de Middleware pour les effets secondaires : ( acces au reseau, access a la base de donnée.
    • normalisation de letat : si il y a des done2es imbriqué ou relié entre elles,
    • reduceur pure : fonction pure - produit le mem resultats si les meme entree sont retester
    • separer l’etat UI de l’etat des données : UI (information necessaires pour afficher lui), donnée : (info reel de l’user)
    • utiliser redux devtools pour debug

C’est quoi Redux ?

Redux est une bibliothèque javascript pour gérer l’etat d’une application.

Redux aide aux comportements cohérent, s’execute dans différents environnements ( client, serveur voir natif)

Aide énormement pour les tests et debug.

Principes

Etat global

dans un objet arborescent a linterieur 1 Store

Etat Lecture only

On ne change un etat uniquement en emettant une Action ( objet décrivant ce qui s’est passé )

Modification par fonction Pure

Pour spécifier comment l'état de l'application est modifié en fonction des actions, vous écrivez des réducteurs purs.

Etat global

dans un objet arborescent a linterieur 1 Store

Etat Lecture only

On ne change un etat uniquement en emettant une Action ( objet décrivant ce qui s’est passé )

Modification par fonction Pure

Pour spécifier comment l'état de l'application est modifié en fonction des actions, vous écrivez des réducteurs purs.

Concept de base

Action

Paquet dinformations qui ENVOIE des données de l’application → Store

Unique source d’informations du store

Reducers

Action décrivent si il se passe quelque choses, mais ne specifie pas comment letat change en reponse, c’est le role du reducteur.

Store

objet qui rassemble les actions et les reducers.

Responsabilite : etat general de l’app, permet d;acceder a letat via getState

il permet la mise a jour detat avec dispatch(action)

il enregistre les ecouteur via subscribe(listener)

nettoyage de lecouteur via le return

Middleware

point d’extension entre Dispatching d’une action —— le moment ou elle atteint le reducteur.

Garder l'état localement (localstorage)

le stockage local (local storage) du navigateur.

Le stockage local est une fonctionnalité du navigateur qui vous permet de stocker des données dans le navigateur même après la fermeture de la page.

Voici comment vous pouvez utiliser le stockage local pour conserver les données de votre application :

• Dans votre composant React, vous pouvez utiliser le hook useEffect pour enregistrer les données dans le stockage local chaque fois que les données sont mises à jour :

import { useEffect } from 'react';
import { useSelector } from 'react-redux';
const MyComponent = () => {
const data = useSelector((state) => state.data);
useEffect(() => {
localStorage.setItem('myData', JSON.stringify(data));
}, [data]);
// ...
};

Dans cet exemple, nous utilisons le hook useSelector pour sélectionner les données que nous voulons stocker dans le stockage local. Nous utilisons ensuite le hook useEffect pour enregistrer les données dans le stockage local chaque fois que les données sont mises à jour. Nous utilisons la méthode setItem du stockage local pour enregistrer les données sous la clé 'myData'.

Lorsque votre application est chargée, vous pouvez récupérer les données du stockage local et les utiliser pour initialiser l'état de votre application :

import { createSlice } from '@reduxjs/toolkit';

const initialState = {

data: JSON.parse(localStorage.getItem('myData')) || [],

};

const mySlice = createSlice({

name: 'mySlice',

initialState,

reducers: {

// ...

},

});

export const { actions, reducer } = mySlice;

Nous utilisons la méthode getItem du stockage local pour récupérer les données stockées sous la clé 'myData'. Nous utilisons ensuite la fonction JSON.parse pour convertir les données en objet JavaScript. Si aucune donnée n'est stockée sous la clé 'myData', nous utilisons un tableau vide comme valeur par défaut.

Nous utilisons ensuite l'objet initialState pour initialiser l'état de notre tranche Redux. L'état initial contient les données récupérées du stockage local.

En utilisant cette méthode, les données de votre application seront stockées dans le stockage local du navigateur et seront récupérées chaque fois que l'application est chargée.