React-Redux - Senden einer Aktion an Komponenten

Question

Ich habe zur Zeit ein Problem, von dem ich mir nicht sicher bin, ob ich nur das größere Bild nicht sehe (oder vielleicht gar nicht mache) oder ob das in redux gilt ...

Ich habe ein SVG-Diagramm mit einer festen Größe. Es kann passieren, dass der Benutzer ein Panel auf meiner Seite öffnet, was die Breite des Diagramms reduziert. Dies führt dazu, dass mein Diagramm komprimiert aussieht. Um dies zu beheben, sollte das Diagramm mit aktualisierten Dimensionen neu gerendert werden, damit alles wieder gut aussieht.

Also ... Ich habe eine Komponente, die der Benutzer klickt, um das Panel zu öffnen. Diese Komponente sollte eine Aktion auslösen, idealerweise etwas allgemein und wiederverwendbar wie "rerenderSVG". Ich könnte den Standard-Redux-Workflow verwenden und meinen Reducer dazu bringen, eine Flagge in meinem Zustand zu setzen und alle meine SVG-Komponenten darauf hören zu lassen. Aber das fühlt sich an wie Overkill. Das ist nichts, was ich in meinem Zustand will, ich will nur eine Aktion, die an alle meine montierten Komponenten gesendet wird, wie "Hey, Komponenten, das ist gerade passiert, wenn es dich betrifft: bitte reagiere".

Dies kann leicht in Flussmittel, aber in Redux getan werden ... Ich weiß es nicht. Kann dieses Muster implementiert werden und trotzdem dem Redux-Weg entsprechen?

Und wenn dieses Problem so alltäglich ist, gibt es bereits Tausende von Beiträgen: Sorry! Aber ich wusste nicht wirklich, für welche Schlüsselwörter zu schauen ...

Answer 1

Alle Aktionen werden standardmäßig an alle Reduzierungen in flux/redux gesendet. Sie müssen diese bestimmte Aktion in jedem der Reduzierungen behandeln, für die dieser Status aktualisiert werden soll.

Wenn Sie nicht alle Komponenten aktualisieren und nur die Komponente aktualisieren möchten, die gerade angezeigt wird, können Sie setState verwenden, um diese spezifische Komponente erneut zu rendern.

Answer 2

Wenn ich habe, was Sie richtig meinten, so denke ich nicht, dass Sie Redux für diesen Zweck überhaupt brauchen. Was Sie suchen, ist ein lokaler Zustand der übergeordneten Komponente (in der Regel Container).

Warum nicht einfach im redox speichern die Rohdaten, die für Diagramm benötigt werden, um seinen Inhalt (Koordinaten/Datasets für Graphen/etc ..), aber keine Flags oder was auch immer Daten bezogen zu machen Änderung der Höhe/Breite der Diagrammbox. Da der Redox-Speicher die Rohdaten selbst speichert, sollte die Form Ihrer Daten dem lokalen Status Ihrer verbundenen Containerkomponente entsprechen. Und sobald die Daten für die Größenanpassung "geformt" sind, können Sie sie mithilfe von Requisiten, in denen diese Daten dargestellt werden, an Ihre "Dummy" -Designkomponenten übergeben. Ich nehme an, Sie wissen es gut the difference between smart/dumb or container/presentational components.

Sobald Ihr Benutzer irgendwie (absichtlich oder unabsichtlich), um die Größe der Box Diagramm zu ändern, können Sie dieses resize Ereignis behandeln und eine Funktion (z rerenderCharts) ausführen, die die Form Ihrer Daten neu berechnet und rufen setState auf dem Bauteil. Das würde dazu führen, dass die gesamte Kette Ihrer Komponenten neu gerendert wird, wenn die Größe des Containers geändert wird.

Here Sie können einige Beispiele sehen, wie resize-Ereignis auf der Komponentenebene zu behandeln.

Ich hoffe, dass alles einen Sinn ergibt.