Aller au contenu principal

Laboratoire 3.2: Transmission de données (Partie 2)

attention

Ce laboratoire est la suite du précédent, mais les techniques que nous allons voir sont plus compliquées. Il est conseillé de le faire en une fois.

Donc, fermez l'onglet 9gag, mettez votre téléphone en mode avion, chargez votre ordinateur et coupez la musique !

Une personne portant des écouteurs, avec un maquillage camouflé sur le visage, regardant vers le bas.

3. Via un store​

Cette 3ème approche vise à régler un gros problème avec les propriétés: la hiérarchie des composants. Imaginez la situation suivante: un 1er composant appelle un 2ème composant. Ce 2ème composant appelle un 3ème composant, etc. Dans notre situation, nous devons passer une variable du composant 1 au dernier composant (imaginons le 5ème). Voyez-vous le problème ? Schématisons la situation:

Composant1 --> Composant2 --> Composant3 --> Composant4 --> Composant5

Maintenant, si on passe la variable du Composant1 au Composant5, nous aurons ceci:

Composant1(variable) --> Composant2(variable) --> ... --> Composant5(variable)

Maintenant le problème semble évident. Pour passer notre variable du Composant1 au Composant5, nous sommes obligés de le passer à toute la hiérarchie. Ce qui va créer un couplage dans nos composants (ce qu'il faut absolument éviter, vous vous en doutez).

Les stores ou contextes vont nous permettent de passer ces informations dans un "point" accessible de tous. En schématisant:

Composant1 <--> Store/Contexte <--> Composant5

Ici, Composant1 et Composant5 lisent et écrivent dans le Store/Contexte. Mais nous pourrions imaginer une infinité de composants s'abonnant au Store/Contexte ! Ce qui est très pratique si toute votre interface s'adapte en fonction du choix d'un thème, par exemple !

Nous ne sommes plus donc plus obligés de traverser toute la hiérarchie avec nos variables. Il existe deux approches:

Nous passerons rapidement sur la première, mais nous prendrons plus de temps pour la seconde qui se révèlera rapidement plus complexe.

createContext()​

Une première solution légère consiste à avoir une "sorte" de variable partagée via un Context. Il suffit d'appliquer les étapes suivantes:

  1. Créer le contexte
  2. Fournir le contexte aux composants
  3. Connecter un composant au contexte

Créer le contexte​

Pour créer un contexte, nous utiliserons la fonction createContext(defaultValue). Le seul paramètre de la fonction permet d'avoir une valeur par défaut quand aucun Provider n'est fourni au composant utilisant le contexte (nous le détaillerons à l'étape suivante). Pour créer notre contexte il suffit de faire:

./src/context/Theme.jsx
import { createContext } from 'react';

const ThemeContext = createContext('light');

export default ThemeContext

Fournir le contexte aux composants​

Pour fournir ce contexte, nous allons utiliser le Provider du contexte. Ainsi, ce contexte sera à disposition de tous les composants enfants du Provider. Le Provider a besoin d'une propriété value qui contiendra la valeur à partager.

./src/App.jsx
import ThemeContext from './context/Theme';

function App(){
    return (
        <ThemeContext.Provider value='light'>
            {/*Le ThemeContext devient accessible à n'importe quel composant*/}
        </ThemeContext.Provider>
    )
}

export default App;

Si vous ne fournissez aucune valeur, la valeur par défaut sera celle utilisée lors de la création du contexte.

Connecter un composant au contexte​

Pour connecter un composant au contexte, il suffit d'appeler le hook useContext(SomeContext). La fonction prend un seul paramètre: le contexte. Ainsi React pourra trouver le Provider contenant la valeur désirée.

./src/component/Button.jsx
import { useContext } from "react"
import ThemeContext from "../context/Theme";

function Button({onClick}){
    const theme = useContext(ThemeContext)
    const backgroundColor = theme === 'light' ? 'white' : 'black';
    const color = theme === 'light' ? 'black' : 'white';
    return (
        <button onClick={onClick} style={{backgroundColor, color}}>Bouton</button>
    )
}

export default Button;

Maintenant que notre composant s'est abonné au contexte, chaque fois que ce dernier sera changé le composant sera re-rendu (comme s'il s'agissait d'un état) !

Mise à jour du contexte​

Avec le code fourni plus haut, il n'est pas possible de modifier le contexte. Pour modifier le contexte, nous allons en réalité créer un état qui sera passé comme valeur au contexte.

./src/App.jsx
import {useState} from 'react';
import ThemeContext from './context/Theme';
import Button from './components/Button.jsx';


function App() {
    const [theme, setTheme] = useState('dark'); // création d'un état
    return (
        <ThemeContext.Provider value={theme}> {/* l'état est passé au contexte */}
            {/*reste du code*/}
            <Button onClick={() => {
                setTheme(theme === 'light' ? 'dark' : 'light');
                /*
                    La fonction va changer l'état. La modification de l'état va changer la valeur du contexte.
                    Le changement de valeur du contexte va provoquer une mise à jour de tous les composants
                    abonnés à ce contexte
                */
            }}>
            </Button>
        </ThemeContext.Provider>
    );
}

export default App;

Redux​

Redux permet de gérer l'état d'une application Javascript (autrement dit un store). Redux peut très bien fonctionner avec React (avec React-Redux), NodeJS, Angular, Vue, etc. Redux amène une série de concepts et React-Redux permet une intégration facile avec React. Pour pouvoir les utiliser, utilisez la commande suivante:

npm install react-redux @reduxjs/toolkit

Redux utilise le paradigme fonctionnel pour la gestion de l'état. C'est-à-dire que l'état ne peut être modifié et chaque action "dispatchée" va créer un nouvel état qui sera sauvegardé. Quand une action est reçue par le store, elle passe par une série de reducers qui va permettre de recréer un nouveau store. Dans Redux, le store peut être vu comme un objet où chaque propriété de l'objet est liée à un reducer.

Dans l'exemple ci-dessous, vous avez une représentation schématique du fonctionnement de Redux. Dans les faits, vous vous doutez que le fonctionnement réel est plus complexe. Le but de ce code est de vous permettre une meilleure visualisation. La fonction dispatch de redux permet d'envoyer une "action" qui sera lue par le reducer et engendrera un nouvel état !

let store = {
    listeProduits: [/*une liste de produits*/],
    nextIDProduit: 3 
}

function reducer(state, action){
    switch action.name:
        case "addProduit":
            const newState = {...state};
            newState.listeProduits.push({
                ...action.payload,
                id: nextIDProduit
            }) // on supposera que action.payload contient le produit à ajouter
            newState.nextIDProduit += 1
            return newState; 
        default: //si on envoie une action inconnue à dispatch, la fonction renverra le même état
            return state;
}

//Une représentation SIMPLIFIEE de dispatch
function dispatch(action){
    store = reducer(store, action)
}

Le gros avantage de Redux sur les Context est qu'il permet une meilleure gestion de l'état grâce à un meilleur store et une logique plus divisée. Avec les Context, vous serez rapidement obligés de les multiplier et vous risquez de vous y perdre.

React-Redux​

Ce module permet de faire le lien entre React et Redux. Il vient également avec une série d'outils permettant de créer bien plus facilement un store. Nous suivrons les explications de la documentation officielle. Elles seront accompagnées de commentaires supplémentaires pour vous aider à comprendre.

configureStore()​

Dans un premier temps, nous aurons besoin de créer la pièce centrale: le store. La méthode configureStore(reducer) (de Redux) permet de créer le store avec son Reducer (une fonction qui permet de générer un nouvel état).

./src/store/index.js
import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: {},
})

Provider pour le store​

Maintenant que le store est créé, il faut le rendre accessible à notre application pour que les composants puissent s'y abonner. Nous allons importer le Provider de react-redux à cet effet:

./src/main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import App from './App'
import store from './store'
import { Provider } from 'react-redux'

const root = ReactDOM.createRoot(document.getElementById('root'))

root.render(
  <Provider store={store}>
    <App />
  </Provider>
)

Dans un premier temps, nous importons le store précédemment créé, idem pour le Provider de react-redux. Ensuite, nous engloblons le composant App pour rendre le store accessible à ce composant, mais également à tous ses enfants.

Création des slices​

Les slices sont un moyen de mieux diviser les reducers. Actuellement, dans Redux, vous n'avez qu'un seul gros reducer. React-redux propose une solution à ce problème en proposant des slices. Le principe est de créer un reducer par propriété de l'objet contenu dans le store.

./src/store/slice/produit.js
import { createSlice } from '@reduxjs/toolkit'

export const produitsSlice = createSlice({
    name: 'listeProduits',
    initialState: {
        produits: [],
        nextIdProduit: 0
    },
    reducers: {
        addProduit: (state, action) => {
            //Exemple action = {payload: {nom, prix}}
            state.produits.push({
                ...action.payload,
                id: state.nextIdProduit
            });
            state.nextIdProduit += 1
        },
        //je rajoute une action possible
        removeProduit: (state, action) => {
            //Exemple: action = {payload: {id: 2}}
            state.produits = state.produits.filter(elem => action.payload.id !== elem.id)
        }
    },
})

export const { addProduit, removeProduit } = produitsSlice.actions

export default produitsSlice.reducer

Normalement, ce code devrait vous "embêter". En effet, l'état est censé être immuable. Hors, nous le modifions dans les reducers. En réalité, @reduxjs/toolkit utilise une librairie qui vous permet d'écrire les modifications dans une copie et détectera les modifications pour générer le nouvel état.

Ajout des slices au reducer​

Maintenant, nous allons ajouter ce slice dans le reducer, pour indiquer à quelle propriété il est lié.

./src/store/index.js
import { configureStore } from '@reduxjs/toolkit'
import produitReducer from './slice/produit.js'

export default configureStore({
    reducer: {
        listeProduits: produitReducer,
    }
})

À partir de maintenant, le slice produira un état qui sera stocké dans la propriété listeProduits de notre store. L'avantage de cette approche est de permettre une bien meilleure découpe du store et ainsi permettre un développement plus facile à long terme.

Utilisation du store​

Nous avons besoin de deux choses:

  • lire des données du store
  • écrire des données dans le store

Nous utiliserons deux hooks:

Le premier permet de récuperer une propriété du store et le deuxième permet de changer l'état du store. Voici un exemple d'utilisation:

./src/ListeProduits.jsx
import { useSelector, useDispatch } from 'react-redux';
import { addProduit, removeProduit } from './store/slice/produit.js';
import {useState} from 'react';

function ListeProduits(){
    const [nom, setNom] = useState("");
    const [prix, setPrix] = useState(0);

    const produits = useSelector(state => state.listeProduits.produits);
    const dispatch = useDispatch();
    /*
    dispatch contient une fonction. Pour l'utiliser, il faudra l'appeler en passant en argument la fonction d'action importée.
    Exemple: dispatch(addProduit(produit))
    */

    return (
        <>
            <ul>
                {produits.map(p => {
                    return (
                        <li key={p.id}>{p.nom}(id: {p.id}) - {p.prix} euros - <button onClick={() => dispatch(removeProduit({id: p.id}))}>Delete</button></li>
                    )
                })}
            </ul>
            <p>
                <label>Nom du produit: </label>
                <input type="text" onChange={event => setNom(event.target.value)}/>
                <br/>
                <label>Prix:</label>
                <input type="number" onChange={event => setPrix(event.target.value)}/>
                <br/>
                <button onClick={() => dispatch(addProduit({nom, prix}))}>Ajouter</button>
            </p>
        </>
    );
}

export default ListeProduits;

Et voilà, nous avons un composant qui lit et écrit dans le store. Vous vous en êtes rendus compte, mais l'utilisation de Redux rajoute un niveau de complexité ! Mais cette complexité est causée par la séparation des reducers. Cependant, vous pourriez rajouter beaucoup de nouveaux champs dans votre store, la complexité ne changerait pas. Vous n'auriez qu'à rajouter les slices nécessaires et à les utiliser. Redux convient donc particulièrement bien dans des projets importants où l'état de l'application est complexe (ce n'est qu'un avis personnel).

attention

Vous l'aurez peut-être remarqué, mais la technique 2 (URL) et 3 (store) engendrent un couplage. Un composant d'un premier projet qui utilise un store ne pourra plus être facilement transférable sur un autre projet (vous devrez avoir le même store du premier projet). Ce qui pourrait engendrer des modifications importantes pour enlever cette dépendance.

Garder à l'esprit que la technique 1 devrait être votre choix principal et les 2 autres ne devraient s'utiliser que dans les cas les nécessitant. Vous aurez surement besoin de la gestion des URL dans votre projet. Mais peut-être que vous n'aurez pas besoin d'un store pour votre application...

Exercice​

Si vous avez testé votre application jusqu'à présent, vous aurez noté que les changements ne persistent pas. Vous allez donc devoir utiliser un store (Redux) pour stocker et utiliser la liste d'employés.

attention

Nous sommes dans le cadre d'un exercice qui vise à vous faire travailler la technique du store. Il y a moyen de faire sans cette dernière, mais ce n'est pas le but de l'exercice.

Un vieil homme avec une longue barbe grise regarde par une porte entrouverte, accompagné du texte "GOOD LUCK" en rose.
Si vous désirez un indice
import { createSlice } from '@reduxjs/toolkit';

export const employesSlice = createSlice({
    name: 'listeEmployes',
    initialState: {
        employes: [
            {
                id: 1,
                nom: 'Anakin ',
                prenom: 'Skywalker'
            },
            {
                id: 2,
                nom: 'R2',
                prenom: 'D2'
            }
        ],
        nextIdEmploye: 3
    },
    reducers: {
        addEmploye: (state, action) => {
            /*TODO*/
        },
        updateEmploye: (state, action) => {
            /*TODO*/
        }
    },
});

export const { addEmploye, updateEmploye } = employesSlice.actions;

export default employesSlice.reducer;