Publisher-Abonnentenmuster in React

Dieses Muster wurde von vielen Organisationen in Frontend-Interviews gefragt und ist auch eines der Muster, denen ich normalerweise folge, wenn ich einen Eins-zu-Viele-Beziehungsmechanismus implementieren muss.

Manche bezeichnen es auch als Observer Pattern. Für mich klingt „Publisher Subscriber“ intuitiver, daher bezeichne ich es lieber so.

Was ist das Publisher-Subscriber-Muster?

Es handelt sich um ein Verhaltensentwurfsmuster, mit dem Sie einen Abonnementmechanismus definieren können, um mehrere Objekte über alle Ereignisse zu benachrichtigen, die mit dem Objekt geschehen, das sie beobachten oder das sie abonniert haben.

Dies ist nützlich, wenn Sie sich für den Zustand eines Objekts interessieren und bei jeder Änderung benachrichtigt werden möchten.

Der Ereignis- und Event-Handler-Mechanismus in JavaScript ist die Manifestation des Publisher Subscription/Observer-Entwurfsmusters.

Ebenso besteht es aus 4 wichtigen Konzepten:

1. Abonnenten: Eine Karte von Abonnenten, wobei der Schlüssel das Ereignis event nameund der Wert ein Array der Abonnenten dieses Ereignisses ist. Ich bevorzuge den Ansatz einer Map of Maps von Abonnenten. Den Grund dafür erkläre ich später in diesem Artikel.
2. emit(eventName, data): Eine Methode, um alle Abonnenten über das Auftreten des Ereignisses zu benachrichtigen. Manche nennen es auch lieber publish/notify. Es hängt im Allgemeinen von Ihrem Anwendungsfall ab, welcher Methodenname für Sie intuitiver klingt
3. subscribe(eventName, handler): Eine Methode zum Hinzufügen eines Abonnenten zum Abonnenten- Array
4. unsubscribe(eventName, handler): Eine Methode zum Entfernen des jeweiligen Abonnenten aus dem Abonnenten- Array

Wir werden die Funktionsweise dieses Musters anhand eines Beispiels für die Erstellung einer Toast-Benachrichtigungskomponente in React verstehen.

1. Lassen Sie uns unseren Publisher-Abonnentenmechanismus für die Toast- Benachrichtigungskomponente erstellen :

2. Darüber hinaus erstellen wir unsere Toast-Benachrichtigungskomponente , in der wir die Abonnenten für zwei bestimmte Ereignisse hinzufügen: showToastund hideToast.

3. Wir importieren unsere Toast-Benachrichtigung in die oberste Komponente unserer Anwendung.

4. Jetzt können wir unsere Toast-Komponente aufrufen, um Benachrichtigungen von jeder Komponente unserer Anwendung anzuzeigen/auszublenden.

Ich habe versucht, die Arbeitsweise anhand des besten Beispiels zu erklären, das ich kenne. Wenn Sie andere kennen, teilen Sie es allen in den Kommentaren mit!

Vielen Dank fürs Lesen, folgen Sie mir für mehr