Gérez votre application React avec Redux et Redux Toolkit

Créez un second composant

Maintenant que nous pouvons modifier notre store et consulter son état à chaque fois que c’est nécessaire, allons apprendre à le gérer à travers plusieurs composants. Ça tombe bien, c’est notre objectif principal !

Pour cela, rien de plus simple. Chaque composant de notre application peut avoir accès au store. Comme dans le chapitre précédent, nous allons créer un composant dédié au montant total de la commande.

Ainsi, nous allons retirer de notre composant Cart.js  le calcul du total de commande et utiliser useStore  pour accéder au store.

Nous rajoutons un abonnement au changement de valeur du store pour nous assurer que notre composant sera bien à jour à l’ajout ou à la suppression de produit dans la liste des produits sélectionnés.

Nous créons donc notre composant  Total.js  dans le dossier  features/total/  et nous l’ajoutons à notre composant  app/App.js  comme suit :

Vous vous dites que c’est plutôt simple, et c’est effectivement le cas.

Nous sommes capables de diffuser les valeurs de notre store à plusieurs composants :

import { useStore } from "react-redux";
import { useEffect, useState } from "react";



export const Total = () => {
    const store = useStore();
    const [list, setList] = useState(store.getState().list)

    const totalCommand = list.reduce((prv, cur) => cur.price + prv, 0)
useEffect(() => {
        store.subscribe(() => setList(store.getState().list))
    })

    return <div className="TotalCommand">
            {list.length === 0 ? <div>Aucun produit sélectionné</div> : <div>Total commande {totalCommand} euros</div>}
    </div>
};

Échangez des valeurs du state grâce au store

Et si on rajoutait un composant supplémentaire pour appliquer notre bon promo ?

Pour cela, nous créons un composant Voucher, que nous allons ajouter à notre composant  app/App.js  et auquel nous donnerons accès à notre store  . Le store nous fournit la méthode dispatch()  qui va nous servir à appliquer des actions.

Si on ajoute une action de type APPLY_VOUCHER  , en passant en payload la valeur  { price: 2}   , nous allons pouvoir appliquer notre réduction.

Sans plus tarder, ajoutons notre nouveau composant voucher :

Vous trouverez ci-dessous une implémentation dans le fichier  features/voucher/Voucher.js  :

import { useStore } from "react-redux";
import { useEffect, useState } from "react";



export const Voucher = () => {
    const store = useStore();
    const [list, setList] = useState(store.getState().list);

    const available = list.find(product => product.title === 'Super Crémeux');

    useEffect(() => {
        store.subscribe(() => setList(store.getState().list));
    })

    return <div className="Voucher">
            {available && <button onClick={() => store.dispatch({type: 'APPLY_VOUCHER', payload: { price: 2 }})}>Appliquer ma promo Super crémeux à 2 euros</button>}
    </div>
};

À vous de jouer

Vous savez à présent manipuler le store dans vos composants React et faire communiquer ces composants entre eux via le store. Je vous propose donc de continuer sur cette voie et de mettre tout de suite en application ce que vous venez d’apprendre en reprenant une fonctionnalité développée sur la version simplifiée de notre application : la gestion de nom du propriétaire du restaurant.

Pour cela, vous allez créer un composant feature/owner/Owner.js  qui va permettre de répondre au cas suivant, et l’ajouter au composant app/App.js :

1- En tant qu’utilisateur,

• tant que le prénom du propriétaire n’est pas renseigné,

• je peux voir qu’il est indiqué : Le propriétaire n’a pas été configuré.

2 - En tant qu’utilisateur,

• si le prénom du propriétaire est renseigné,

• Je peux voir qu’il est indiqué : Le propriétaire du restaurant est PRENOM_DU_PROPRIETAIRE  .

3 - En tant qu’utilisateur,

• je peux renseigner un formulaire en indiquant le prénom du propriétaire ;

• je peux valider le formulaire, en cliquant sur un bouton “Configurer le propriétaire”, ce qui met à jour la configuration du restaurant et renseigne le prénom du propriétaire.

Une fois que vous avez ajouté ces fonctionnalités, suivez-moi dans le screencast ci-dessous pour la solution :

En résumé

• Partager les données du state revient à brancher chaque composant au store.

• Cela permet de gérer l'état de l'application de manière cohérente et centralisée à travers différents composants.

• Les composants peuvent interagir avec le store en dispatchant des actions.

• Le mécanisme est identique, qu’il s’agisse d’une application React ou non.       

Passons au chapitre suivant pour améliorer la qualité de notre implémentation avec les selectors et useSelector  .