Gérez votre application React avec Redux et Redux Toolkit

8 heures
Difficile

Ce cours est visible gratuitement en ligne.

course.header.alt.is_certifying

Mis à jour le 31/01/2024

Communiquez les changements de state à travers une architecture Flux

Décortiquez l’architecture Flux

Nous avons vu précédemment le fonctionnement général de cette architecture. Quels sont les éléments qui aident à mettre celle-ci en place et comment ils interagissent ?

Une action est transmise au dispatcher qui notifie les stores. Les stores concernés par le changement notifient ensuite via des événements aux composants que leur état a changé. — On identifie ici le sens de modification du state à partir du composant

Ci-dessus, le dispatcher centralise les changements du state.

Il reçoit ainsi des actions, ou messages, qui comportent :

le type de traitement à appliquer au state, l’ajout d’un produit à la liste, par exemple ;
un payload, ou un ensemble de données servant à mettre à jour le state, admettons le nom et le prix du produit à ajouter.

Ensuite, il transmet cette action à tous les stores qui, selon leur responsabilité, vont exécuter l’action, puis notifier aux composants abonnés que leur state a été modifié.

Les composants peuvent ensuite venir récupérer les nouvelles valeurs du state et mettre à jour leur rendu.

Créez votre propre système simplifié d’architecture Flux

Nous allons tenter d’appliquer cette architecture en nous concentrant uniquement sur le state et les actions d’abonnement ( subscribe ) et de répartition ( dispatch ).

Pour cela, je vous propose de suivre le screencast ci-dessous pour comprendre comment implémenter simplement le mécanisme lié à cette architecture :

Revenons ici sur l’implémentation. Nous avons créé :

une variable de type objet pour stocker le state ;
une fonction d’abonnement, subscribe , qui permet d’empiler des fonctions qui seront exécutées à chaque appel à la fonction dispatch .

Ce qui nous donne dans notre fichier flux_s1.html :

<!DOCTYPE html>
<html>
    <head>
        <script src="flux.js" defer></script>
    </head>
    <body>
        <div id="header">
            Aucun propriétaire configuré
        </div>
        <form id="addForm" action="#">
            <input name="firstName" />
            <button>Enregistrer</button>
        </form>
    </body>
</html>

Et dans notre fichierflux_s1.js :

let state = {
};
const subscribers = [];

const dispatch = (newStateValue) => {
    state = newStateValue;
    for (const fct of subscribers) {
        fct(state)
    }
}

const subscribe = (subscriberFct) => {
    subscribers.push(subscriberFct);
}

subscribe((state) => {
    if (state.owner) {
        console.log('Le propriétaire est ajouté', state.owner)
         document.getElementById('header').textContent = `Le propriétaire du restaurant est ${state.owner.firstName}`
    }
})

dispatch({
    company: {
        name: 'Burger du Pré'
    }
})

document.getElementById('addForm').addEventListener("submit", (evt) => {
    evt.preventDefault()
    const firstNameInput = evt.currentTarget.firstName
    dispatch({
        company: {
            name: 'Burger du Pré'
        },
        owner: {
            firstName: firstNameInput.value,
        }
    })
})

À vous de jouer !

Et si on mettait tout de suite en place cette architecture dans le cadre de notre projet de borne de commande ?

Pour rappeler le contexte de notre projet fil rouge, nous souhaitons créer une application pour une borne de commande de burger. On devrait donc pouvoir ajouter une liste de produits à une commande, et c’est ce que nous allons réaliser dans cette première étape.

Dans cette partie, je vous laisse travailler sur une architecture qui nous permettra de stocker un panier de burgers sélectionnés pour la commande.

L’objectif est d’afficher en console, de votre navigateur, une liste actualisée de burgers sélectionnés à chaque nouvelle sélection.

D'abord, un fichierflux_s2.js :

const DoubleCantal = {
    title: 'Double Cantal',
    price: 15.99,
}

const SuperCremeux = {
    title: 'Super Crémeux',
    price: 14.99,
}
const PouletCroquant = {
    title: 'Poulet Croquant',
    price: 17.99,
}

Et un fichierflux_s2.html :

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <div id="header">
            Aucun propriétaire configuré
        </div>
        <form id="addForm" action="#">
            <input name="firstName" />
            <button>Enregistrer</button>
        </form>
        <div>
                        <button class="orderButton" data-id="PouletCroquant">Poulet Croquant</button>
            <button class="orderButton" data-id="DoubleCantal">Double Cantal</button>
            <button class="orderButton" data-id="SuperCremeux">Super Cremeux</button>
        </div>
        <div id="command"></div>
        <script src="flux_s2.js" defer></script>
    </body>
</html>

Vous avez tout implémenté ? Suivez-moi dans le screencast ci-dessous pour la correction :

En résumé

Les différents éléments qui composent l’architecture Flux sont le dispatcher, le state global et les actions d’abonnement ( subscribe ).
Il est possible d’implémenter de manière simple cette architecture.
Nous avons commencé à mettre en place une méthode de gestion de state centralisé grâce à ce type d’architecture.

Voyons maintenant comment assurer la viabilité des données de notre state centralisé avec des outils dédiés.