Partie 2 / Blogs / Perficient

Dans la première partie de cette série, nous avons exploré les bases de la gestion d’état dans les composants Web Lightning (LWC), en nous concentrant sur la gestion d’état locale au sein de composants individuels. Si vous ne l’avez pas encore lu, je vous recommande de commencer par la première partie pour saisir les concepts fondamentaux. Dans cette deuxième partie, nous plongerons dans un territoire plus avancé : la gestion partagée et globale des États. Ces techniques sont essentielles lorsque vous devez gérer des données sur plusieurs composants, voire sur l’ensemble de l’application.

Gestion d’état partagée dans LWC

La gestion de l’état partagé implique la gestion de l’état auquel plusieurs composants doivent accéder ou mettre à jour. Dans une application Salesforce typique, les composants doivent souvent partager des données pour garantir une expérience utilisateur cohérente et transparente.

Cas d’utilisation : communication parent-enfant

L’un des scénarios les plus courants dans lesquels un état partagé est nécessaire est la communication entre composants parent-enfant. Considérons un cas d’utilisation dans lequel un composant parent doit mettre à jour l’état d’un composant enfant en fonction de l’interaction de l’utilisateur.

Exemple:

Disons que nous avons un composant parent qui permet aux utilisateurs de sélectionner un produit et un composant enfant qui affiche des détails sur le produit sélectionné.

javascript

// parentComponent.js

import { LightningElement } from 'lwc';

export default class ParentComponent extends LightningElement {

    selectedProductId;


    handleProductSelect(event) {

        this.selectedProductId = event.detail.productId;

    }

}

html

<! parentComponent.html >

<template>

    <productlist onproductselect={handleProductSelect}></productlist>

    <productdetails productid={selectedProductId}></productdetails>

</template>

javascript

// childComponent.js (ProductList)

import { LightningElement, api } from 'lwc';

export default class ProductList extends LightningElement {

    products = [ / some product data / ];

    selectProduct(event) {

        const productId = event.target.dataset.productId;

        this.dispatchEvent(new CustomEvent('productselect', {

            detail: { productId }

        }));

    }

}

html

<! productList.html >

<template>

    <template for:each={products} for:item="product">

        <div key={product.id} dataproductid={product.id} onclick={selectProduct}>

            {product.name}

        </div>

    </template>

</template>

Explication:

Le ParentComponent écoute un événement productselect de ProductList et met à jour son état selectedProductId.

Le composant ProductDetails utilise la propriété productid transmise par le parent pour afficher les détails du produit sélectionné.

Débogage des problèmes d’état partagé :

1. Gestion des événements : assurez-vous que les événements personnalisés sont correctement distribués et gérés. Utilisez console.log pour vérifier la charge utile de l’événement.
2. Liaison de données : vérifiez à nouveau que les données transmises du composant parent au composant enfant sont correctement liées et mises à jour.
3. Réactivité : rappelez-vous que la réactivité dans LWC est basée sur la mutation des propriétés. Si la propriété d’un composant ne semble pas être mise à jour, assurez-vous qu’elle est directement mutée (par exemple, this.property = newValue).

Gestion de l’État global dans LWC

La gestion globale de l’état devient nécessaire lorsque vous devez partager des données entre plusieurs composants qui peuvent ne pas avoir de relation parent-enfant directe. Ceci peut être réalisé grâce au Lightning Message Service (LMS), qui permet aux composants de communiquer sans avoir besoin de se connaître.

Cas d’utilisation : notifications à l’échelle de l’application

Imaginez une application dans laquelle plusieurs composants doivent être informés du statut de connexion d’un utilisateur. Par exemple, une fois connecté, les informations de profil de l’utilisateur doivent être disponibles pour tous les composants qui en ont besoin.

Exemple:

Voici comment utiliser Lightning Message Service pour gérer l’état global :

javascript

// loginPublisher.js

import { LightningElement } from 'lwc';

import { createMessageContext, releaseMessageContext, publish } from 'lightning/messageService';

import USER_LOGIN_CHANNEL from '@salesforce/messageChannel/UserLoginChannel__c';
export default class LoginPublisher extends LightningElement {

    context = createMessageContext();
    handleLogin() {

        const message = {

            userId: '0017F00000PqWPE',

            userName: 'John Doe'

        };

        publish(this.context, USER_LOGIN_CHANNEL, message);

    }

    disconnectedCallback() {

        releaseMessageContext(this.context);

    }

}

javascript

// profileComponent.js

import { LightningElement, wire } from 'lwc';

import { subscribe, MessageContext } from 'lightning/messageService';

import USER_LOGIN_CHANNEL from '@salesforce/messageChannel/UserLoginChannel__c';
export default class ProfileComponent extends LightningElement {

    userId;

    userName;
    @wire(MessageContext)

    messageContext;

    connectedCallback() {

        this.subscribeToMessageChannel();

    }

    subscribeToMessageChannel() {

        this.subscription = subscribe(

            this.messageContext,

            USER_LOGIN_CHANNEL,

            (message) => this.handleMessage(message)

        );

    }

    handleMessage(message) {

        this.userId = message.userId;

        this.userName = message.userName;

    }

}

Explication:

Le composant LoginPublisher publie un message sur UserLoginChannel lorsque l’utilisateur se connecte.

Le ProfileComponent s’abonne à ce canal et met à jour son état en fonction du message reçu.

Débogage des problèmes d’état global :

1. Erreurs d’abonnement : assurez-vous que l’abonnement est correctement configuré dans la méthodeconnectedCallback et que le canal de message est correctement configuré dans Salesforce.
2. Gestion du contexte : veillez à gérer le contexte du message, en particulier lorsque des composants sont supprimés du DOM (disconnectedCallback).
3. Charge utile du message : vérifiez que la structure de la charge utile du message correspond entre les composants éditeur et abonné.

Meilleures pratiques pour la gestion de l’État dans LWC

1. Gardez l’État aussi local que possible :

Gérez l’état localement au sein des composants chaque fois que cela est possible. Élevez l’état au niveau partagé ou global uniquement lorsque plusieurs composants ont réellement besoin d’y accéder.

2. Utilisez Lightning Message Service pour les composants découplés :

LMS est idéal pour les scénarios dans lesquels les composants doivent communiquer sans relation directe, favorisant le couplage lâche et la modularité.

3. Gérer l’état de manière réactive :

Tirez parti du modèle de réactivité de LWC en modifiant directement les propriétés. Utilisez @api, @track et @wire de manière appropriée pour garantir que les composants réagissent aux changements d’état.

4. Déboguer tôt et souvent :

Utilisez une combinaison de console.log, du mode de débogage Salesforce LWC et des outils de développement de navigateur pour détecter les problèmes rapidement. Les bogues de gestion d’état peuvent être difficiles à déboguer, des vérifications fréquentes sont donc vitales.

Conclusion

La gestion d’état est, sans aucun doute, la pierre angulaire de la création d’applications évolutives et maintenables dans LWC. En maîtrisant la gestion des états locaux, partagés et globaux, vous pouvez garantir que vos composants communiquent efficacement et que vos applications fonctionnent correctement. De plus, grâce aux techniques et aux meilleures pratiques décrites dans cette série, vous êtes désormais bien équipé pour relever même les défis de gestion d’état les plus complexes dans LWC. Par conséquent, vous pouvez créer plus facilement des applications Salesforce plus robustes et plus efficaces.

Pour une compréhension plus approfondie de la gestion de l’État local, n’oubliez pas de revisiter la première partie, où nous avons jeté les bases de tout ce qui est discuté ici.

Bon codage et que la gestion de votre état soit toujours aussi fluide !

Lectures complémentaires et références
Gestion de l’état dans LWC : meilleures pratiques
Naviguer dans JavaScript avec un court-circuit