Komponentenstatus vs Redux Store

Wenn ich mit React und Redux arbeite, verwende ich ein einfaches Muster, um meine Komponenten wiederverwendbar zu machen und zu überlegen. Während der letzten anderthalb Jahre, in denen ich mit React und Redux arbeite, habe ich festgestellt, dass jeder, der anfängt, mit React und Redux zu arbeiten, immer verwirrt ist zu entscheiden, welche Komponente mit dem Redux-Speicher interagieren soll und welche Komponenten nur von dort abhängig sein sollen, hängt vom eigenen Zustand ab.

In diesem Artikel werde ich versuchen, diese Unterscheidung zwischen dem Zeitpunkt der Auswahl des Komponentenstatus und dem Zeitpunkt der Auswahl des Redux-Speichers zu vereinfachen.

Konzentrieren wir uns zunächst auf "Reagieren".

React hat zwei Arten von Komponenten: -

  1. Intelligente Komponenten
  2. Dumme Komponenten - Auch als Präsentationskomponenten bezeichnet

Ich unterscheide die beiden folgendermaßen:

Wenn eine Komponente den Status halten muss, wird sie als Smart Component klassifiziert.
Wenn eine Komponente nur Daten anzeigen muss und diese Daten von der übergeordneten Komponente empfangen kann, werden diese als Präsentationskomponenten oder dumme Komponenten klassifiziert.

Zum Beispiel: - Nehmen wir an, wir haben eine E-Commerce-Anwendung, auf der auf der Produktlistenseite eine Liste der Produkte angezeigt wird.

In diesem Szenario würde ein Skelett oder ein nacktes Layout die folgenden übergeordneten Komponenten aufweisen:


 
     

Die ProductsContainer-Komponente konzentriert sich hier darauf, eine Liste der Produkte abzurufen und dann die einzelnen Produkte zu durchlaufen und die einzelnen Produktkomponenten zu rendern.

Hier können wir ProductsContainer als Smart Component aufrufen, da diese Komponente den Status enthält, der in diesem Fall eine Liste von Produkten ist.

Der Beispielcode für die Produktkomponente, die unsere Präsentationskomponente ist, würde ungefähr so ​​aussehen:

Dies ist eine Präsentationskomponente, da sie nur für die Anzeige von Daten zuständig ist und diese Daten in Form von Requisiten von der übergeordneten Komponente erhält.

Wenn also eine Komponente den Status hält und manipuliert, ist sie eine intelligente Komponente. Wenn eine Komponente nur Daten anzeigt, die sie in Form von Requisiten empfängt, wird sie als Präsentationskomponente klassifiziert.

Ein goldenes Zitat von Dan Abramov, das dies hervorhebt, ist:

Wenn Sie feststellen, dass einige Komponenten die empfangenen Requisiten nicht verwenden, sondern nur weiterleiten und Sie all diese Zwischenkomponenten immer dann neu verkabeln müssen, wenn die Kinder mehr Daten benötigen, ist es ein guter Zeitpunkt, um einige Containerkomponenten vorzustellen.

Das war über den Komponentenzustand, die nächste Frage, die uns einfällt, ist, welche Daten in den Redux-Speicher gelangen sollen.

Die Art und Weise, wie ich es klassifiziere, ist, wann immer ein Zustand von mehreren Komponenten oder mehreren Seiten geteilt werden muss und wir einige Daten über Routenänderungen hinweg beibehalten müssen, sollten alle diese Daten in den Redux-Speicher gelangen.

Um mit dem gleichen Beispiel fortzufahren, nehmen wir an, dass alle diese Produkte über eine Schaltfläche "Jetzt kaufen" verfügen und dass wir über einen Warenkorb verfügen, in dem alle Artikel gespeichert werden, für die die Schaltfläche "Jetzt kaufen" angeklickt wurde.

Diese Warenkorbinformationen müssen auf vielen Seiten und über Komponenten wie der Kopfzeilenkomponente, auf der die Anzahl der Einkaufswagen, die Checkout-Seite und die Zahlungsseite angezeigt werden, beibehalten werden.

Dies ist ein klarer Hinweis darauf, dass die im Einkaufswagen hinzugefügten Produkte in den Redux-Store und nicht in den Komponentenstatus verschoben werden sollen.

Dies bringt uns zu einer weiteren Unterscheidung zwischen Komponenten:

  1. Jede Komponente, die mit dem Redux-Speicher verbunden ist, wird als Container-Komponente klassifiziert. Sie kann Aktionen auslösen und den Redux-Speicher über die Reduzierungen aktualisieren.
  2. Die Komponenten, die nicht mit dem Redux-Speicher verbunden sind, werden im Komponentenordner abgelegt. Diese Komponenten können jetzt auch als intelligent und stumm klassifiziert werden, da sie zwar nicht mit dem Redux-Speicher verbunden sind, jedoch den Status durch Aufrufen einer API beibehalten können und diese Daten nur bis zur Lebensdauer dieser Komponente beizubehalten.

Zum Beispiel:-

Die ShoppingApp-Komponente kann als Containerkomponente klassifiziert werden und für das Abrufen der anfänglichen Anzahl von Einkaufswagen und Anmeldeinformationen verantwortlich sein.

Wir werden nicht näher auf die Funktionsweise von Redux und die verschiedenen Redux-Funktionen wie mapStateToProps, Aktionsersteller und Dispatcher eingehen.

All diese Dinge können in Redux Docs gelesen werden.

Das Modell für die endgültige App, die wir erstellen werden, sieht ungefähr so ​​aus:

Nach dem Hinzufügen von Reduzierungen, Komponenten, Containern und Aktionen lautet ein Beispiel für meine Verzeichnisstruktur:

Hier wird ShoppingApp mit dem Redux-Store verbunden und sendet eine Aktion, um die anfänglichen Warenkorbdaten abzurufen. Dadurch wird ShoppingApp zur Containerkomponente.

ShoppingApp würde diese Daten an die Header-Komponente übergeben.

Dies macht den Header nur zu einer Komponente und da er keinen eigenen Komponentenzustand hat, wird er weiter in eine Präsentationskomponente klassifiziert.

In Redux-Begriffen gilt ProductsContainer nicht als Containerkomponente, da es nicht mit dem Redux-Store verbunden ist, sondern über einen eigenen Komponentenstatus verfügt, der es als intelligente Komponente klassifiziert.

Den vollständigen Code für das obige Beispiel finden Sie auf der folgenden Codesandbox-URL:

Für ein bisschen Styling habe ich React Material-UI hinzugefügt.

Wenn Ihre Komponente also mit dem Redux-Speicher interagieren, Daten verarbeiten und Aktionen auslösen muss, sollte sie sich in Containern befinden, ansonsten in Komponenten.

Weitere Lektüre

  • Präsentations- und Containerkomponenten
  • Redux-Dokumentation
  • Behälterkomponenten