Reagieren Komponenten Lebenszyklus, Zustand und Redux

8

Ich möchte redux verwenden, um den Status meiner gesamten reagieren Anwendung, aber ich bin mit einem bestimmten Fall fest:

  • Was ist mit redux zu tun, wenn die Komponente einen lokalen Zustand benötigt, modifiziert durch Lebenszyklusmethoden wie componentDidUpdate oder componentDidMount ?

Beispiel für eine reaktive Komponente, die "Karten" enthält, die von einer Isotop Layout-Bibliothek angeordnet sind:

%Vor%

Gibt es eine Möglichkeit, den lokalen Zustand in dieser Komponente zu entfernen und stattdessen redux zu verwenden? Ich kann nicht sehen, wie es geht

    
mguijarr 24.11.2015, 22:26
quelle

1 Antwort

15

Platziere deine items_list in deinem redux-Status. Ihr Reducer könnte so aussehen:

%Vor%

Oder für etwas etwas Komplexeres:

%Vor%

Nachdem Sie Ihren Shop und Provider konfiguriert haben (siehe Redux-Dokumente), richten Sie Ihre "Smart-Komponente" wie folgt ein:

%Vor%

Jetzt sind Ihre Objekte und Aktionen Requisiten für Ihre Root-Komponente. Wenn Ihre Artikel in einer Komponente niedrigerer Ordnung leben, geben Sie sie einfach als Requisiten in den Baum.

Ich hoffe, das gibt Ihnen die allgemeine Idee. Mit Redux finden Sie heraus, dass Ihre React-Komponenten viel weniger verbrauchen und viel mehr unterstützen.

Noch etwas ...

Das mag eine Nebensache sein, aber ich bitte Sie dringend, Ihr Isotopenobjekt NICHT im Komponentenzustand zu speichern. (Unabhängig davon, ob Sie Redux verwenden oder nicht.) Das Isotop-Objekt ist nicht wirklich ein Stück Staat, es ist Ihre Sicht. In React wird eine Komponente als Reaktion auf eine Zustandsänderung aktualisiert. Aber Ihr componentDidUpdate macht das Gegenteil: Es ändert den Zustand als Reaktion auf ein Komponenten-Update.

Speichern Sie es als Alternative einfach auf dem Objekt selbst. d. h.

%Vor%

(Während ich normalerweise empfehlen würde, diese Art von Instanzvariablen in React zu verwenden, sind DOM-Manipulationsbibliotheken wie Isotope eine gute Ausnahme.)

    
David L. Walsh 25.11.2015, 11:58
quelle

Tags und Links