Modèle d'abonné de l'éditeur dans React

Ce modèle a été demandé par de nombreuses organisations lors d'entretiens frontaux et est également l'un des modèles que je suis habituellement chaque fois que je dois mettre en œuvre un mécanisme de relation un-à-plusieurs.

Certaines personnes l'appellent également Observer Pattern. Pour moi, Publisher Subscribe semble plus intuitif, c'est pourquoi je préfère m'y référer de cette façon.

Qu'est-ce que le modèle d'abonné de l'éditeur ?

Il s'agit d'un modèle de conception comportemental qui vous permet de définir un mécanisme d'abonnement pour notifier plusieurs objets de tout événement qui se produit sur l'objet qu'ils observent ou auquel ils sont abonnés.

C'est utile lorsque vous êtes intéressé par l'état d'un objet et que vous souhaitez être averti chaque fois qu'il y a un changement.

Le mécanisme d'événements et de gestionnaires d'événements en JavaScript est la manifestation du modèle de conception Publisher Subscription/Observer.

De même, il se compose de 4 concepts importants :

1. subscribers : une carte d'abonnés où la clé est le event nameet la valeur est un tableau des abonnés de cet événement. Je préfère l'approche d'une Carte des Cartes d'abonnés. J'en expliquerai la raison plus loin dans cet article.
2. émet (eventName, data): Une méthode pour informer tous les abonnés de l'occurrence de l'événement. Certaines personnes préfèrent également l'appeler publish/notify. Cela dépend généralement de votre cas d'utilisation, quel que soit le nom de la méthode qui vous semble le plus intuitif
3. subscribe(eventName, handler): Une méthode pour ajouter un abonné au tableau des abonnés
4. unsubscribe(eventName, handler): Une méthode pour supprimer l'abonné respectif du tableau des abonnés

Nous allons comprendre le fonctionnement de ce pattern en prenant un exemple de création d'un composant de notification Toast dans React.

1. Créons notre mécanisme d'abonnement éditeur pour le composant Toast Notification :

2. De plus, nous allons créer notre composant Toast Notification , où nous ajouterons les abonnés pour deux événements particuliers : showToastet hideToast.

3. Nous importerons notre notification Toast dans le composant de niveau supérieur de notre application.

4. Maintenant, nous pouvons invoquer notre composant toast pour afficher/masquer la notification de n'importe quel composant de notre application.

J'ai essayé d'expliquer le fonctionnement avec le meilleur exemple que je connaisse. Si vous en connaissez d'autres, partagez dans les commentaires pour tout le monde !

Merci d'avoir lu, suivez-moi pour en savoir plus