React Redux Components Kommunikationsmuster

Question

Ich bin auf der Suche nach einem guten Code-Muster, um einige Kommunikation zwischen den Komponenten zu ermöglichen, wenn Sie React & Redux verwenden.

Wahrscheinlich sollte diese Kommunikation über redux erfolgen, wie viele Artikel vorschlagen. (zum Beispiel one).

Es gibt jedoch einige Situationen, in denen die Verwendung der store ein bisschen wie ein Hack wäre, anstatt es für die Zustandsverwaltung zu verwenden. Diese speziellen Fälle sind normalerweise, wenn Sie einer Komponente einen Befehl geben müssen, wie show oder hide.

Ich will ein Beispiel geben:

Lassen Sie uns sagen, dass wir eine <Tooltip /> Komponente haben, die alle tut es ist etwas Hilfe Symbol machen, dass beim Anklicken ein Tooltip Popup öffnet. Und lassen Sie uns sagen, dass wir mehr als eins in einer Seite haben, aber wir wollen sicherstellen, dass nur eine zu einer bestimmten Zeit geöffnet ist. Wenn Tooltip A geöffnet ist und der Benutzer auf Tooltip B klickt, sollte B geöffnet und A geschlossen werden.

Hier sind einige Muster, die ich dachte, relevant sein könnte, diese Anforderung zu implementieren:

Redux Mit:

{ 
    showTooltip: "A" // the ID of the tooltip to show 
} 

Das bedeutet: Wir sind in der store einige Zustand für diese Tooltips haben könnte wir müssen connect die Tooltips zum Redux-Speicher, und überprüfen Sie für jeden Tooltip, wenn es ID ist, die geöffnet werden sollte, und wenn der Benutzer auf das QuickInfo-Symbol klickt, senden wir eine Aktion zum Festlegen der geöffneten QuickInfo.

Verwendung zusätzlicher Ereignismechanismus: Wir können einen zusätzlichen Ereignismechanismus zu Redux verwenden, wie emitter.

In diesem Fall können wir ein Ereignis auslösen, sobald eine QuickInfo geöffnet wird, und alle anderen QuickInfos können zuhören und sich verstecken, sobald sie ein solches Ereignis erhalten.

Ich muss sagen, dass es scheint mir, dass vielleicht zwei Ereignismechanismen in der App ein wenig redundant zu sein scheint, aber auf der anderen Seite, erscheint die Verwendung von Redux-Store mit Komponenten kommunizieren ein bisschen übertrieben.

Würde gerne einige Meinungen zu diesem Thema hören.

Answer 1

Die React- und Redux-Welt regt im Allgemeinen dazu an, das Verhalten Ihrer App als Status darzustellen. Zum Beispiel könnten Sie anstelle eines imperativen Befehls $("#someModal").show() einen Flag-Wert speichern, der {modalVisible : true} lautet.

Es gibt zahlreiche Beispiele für die Verwendung von Statusmodellen und Popups. Eine typische Implementierung würde die Werte für ein einzelnes Modal oder eine Liste von Modals im Status irgendwo speichern (entweder in einer übergeordneten Komponente oder in Redux) und dann die modalen Komponenten basierend auf diesen Werten entsprechend rendern, wie zum Beispiel: {type : "notificationPopup", level : "warning", message : "Something happened!"}. Der grundlegende Ansatz funktioniert unabhängig davon, ob Sie die Daten in React, Redux, MobX oder etwas anderem speichern. Für spezifische Beispiele siehe Dan Abramovs Antwort auf "How can I display a modal dialog in Redux?", Dave Ceddias Artikel "Modal Dialogs in React", den Artikel "Scalable Modals with React and Redux".Ich habe auch andere Artikel, die Modal-Management in den React Component Patterns#Modal Dialogs und Redux Techniques#UI and Widget Implementations Abschnitte meiner React/Redux links list demonstrieren.