Wie React.js Komponenten miteinander kommunizieren können 

Viele Webapplikationen, die mit React.js gecoded sind haben ein einziges, ganz bestimmtes Host-Element (<div id=”root”>…</div>) in dem dann die gesamte Applikation gerendert wird. Wird eine Website geplant und hat man als Entwickler Mitspracherecht ist das ja auch kein Problem. Nur kommt es eben auch mal vor, dass man nicht in der Hand hat wie die Umgebung aussieht… 

…dann findet man sich schonmal in einem .NET Core CMS wieder, in dem hauptsächlich mit C# und Razor Templates gearbeitet wird, die Hälfte schon fertig ist und man sich die Frage stellen muss ob man nun React.js einsetzen kann, um eine komplexe Komponente zu erstellen oder ob man bei Vanilla.js bleibt und die Schmerzen in Kauf nimmt, die man sich damit einkauft. Vor allem wird es interessant, wenn klar wird, dass mehrere komplett voneinander getrennte Entitäten miteinander kommunizieren sollen.

Denn ein allgemein bekanntes Prinzip bei React.js ist: Daten fließen von oben nach unten! Nicht von unten nach oben und schon gar nicht zur Seite. Und getrennt gerenderte Elemente sind, zumindest was React.js angeht, isoliert und kennen sich nicht.

Jetzt stelle man sich mal vor, man hat irgendwo auf irgendeiner Seite irgendeine Komponente — sagen wir eine Image Gallery — oder um es zu vereinfachen, einen stinknormalen Button. Mal angenommen, wenn man auf diesen Button klickt, soll etwas ganz wo anders passieren. Als Beispiel könnte ein Button dienen, welcher Assets in einer Gallery zu einem Warenkorb hinzufügt.

Nur, dass dieser Warenkorb sich möglicherweise im Header auf einer Seite befindet und die Gallery eben irgendwo im Content niedergelassen ist.

Vergessen wir nicht, es handelt sich hier um ein .NET CMS, welches die meisten Komponenten bereits serverseitig rendert. Hier jetzt alles in einem React.js Renderpunkt rein zu friemeln ist eine Möglichkeit, kann aber hohen Aufwand bedeuten und muss nicht unbedingt zielführend sein. Warum? Weil es auch viel einfacher geht.

Mit Custom Events ermöglichen wir React.js Komponenten miteinander zu kommunizieren, ohne einen gemeinsamen Renderpunkt zu haben.

Zuerst muss man ein Custom Event erstellen.

Diesem Custom Event vergibt man einen beliebigen Namen auf den man später einen Listener binden kann. Ist das Custom Event erstellt, kann man es mit der dispatchEvent Methode versenden. Erstmal ziemlich einfach.

Jetzt kann man in einer anderen Komponente auf das Event hören, völlig egal wo sich diese Komponente auf der Seite befindet.

Man bemerke, dass als Custom Payload das detail aus dem event, in unserem Fall z.B. eine itemId, übergeben wird.

Gut, gut. Soweit das Prinzip. Aber wenn man das Ganze etwas umschreibt, bekommt man schon eher eine Vorstellung, wie man das sinnvoll benutzen kann.

In React.js würde man dann vermutlich sowas in der Art schreiben können:

In einem useEffect fügt man den Listener hinzu und kann entsprechend auf ein Custom Event reagieren. Nicht vergessen das Custom Event wieder zu entfernen, wenn sich die Komponente unmounted.

Wenn man jetzt noch das ganze etwas eleganter und aufgeräumter im Code haben möchte, kann man das Handling auch in einen Hook auslagern.

Dem Hook übergeben wir den eventName, welcher unserem Custom Event seinen Namen gibt. Dann unsere handler Funktion, in der die Business Logik abgehandelt wird. Nun könnte man auch noch das eigentliche Element auf dem wir den Listener binden wollen mitgeben. So ist der Hook etwas flexibler einsetzbar. Für unseren Fall belassen wir es aber einfach bei window als Default-Wert und müssen so nichts übergeben.

Die Benutzung sieht dann so aus.

Soweit so gut. Jetzt kann man schon mal anständig auf Custom Events reagieren. Aber vielleicht wäre es jetzt noch angebracht, sowas wie einen kleinen Service für das Versenden von Events zu haben. Just to be fancy!

Das ist nur ein einfaches Beispiel und könnte natürlich auch eine Klasse sein. Jetzt kann man sehr einfach ein Custom Event versenden.

Mit React.js und Custom Events können wir relativ einfach auch mit Komponenten kommunizieren, welche isoliert existieren. Man sollte sich also durchaus nicht scheuen über eine React-Integration in bestehende Systeme nachzudenken.