Apollo vs Redux - Rendern mit Daten

Apollo und Redux sind zwei beliebte Bibliotheken, die mit React verwendet werden. Sie sind aus verschiedenen Gründen enthalten, hauptsächlich jedoch aus folgenden Gründen:
1. Verwalten eines Geschäfts
2. Unterstützung beim Abrufen von Daten
3. Auslösen eines erneuten Renderns mit aktualisierten Requisiten

Aber welche Mechanismen verwenden sie unter der Haube, und wie unterscheiden sie sich im Umgang mit Requisiten und Rendering?

Ich entschied mich zu untersuchen und unten ist das Produkt davon.

TLDR;

Apollo verwendet ein Observable und erzwingt manuell ein erneutes Rendern. Dabei wird das aktuelle Observable für Daten am Renderpunkt gelesen.

Redux verwendet ebenfalls eine Observable, aktualisiert jedoch den lokalen Status seiner Abonnenten mithilfe von Observer-Benachrichtigungen.

Observables

Als Erstes sollten Sie Observables ansprechen. Sie sind ein neues asynchrones Grundelement mit einigen leistungsstarken Eigenschaften. Ein grundlegendes Beispiel ist unten.

  1. Erstellen Sie Ihre Observable aus einer Abonnementfunktion
const subscriptionFunction = (Beobachter) => {
   // mach ein paar Sachen, könnte asynchron sein.
   observer.next ("Call with some data");
   observer.complete ();
   return () => console.log ("Abbestellen")
}
const ourObservable = new Observable (subscriptionFunction);

2. Abonnieren Sie Ihre Observable. Dies ruft die subscriptionFunction auf.

const subscriber = ourObservable.subscribe ({
   next (x) {console.log (x)}, // "Anruf mit einigen Daten"
   error (err) {console.log ("Fehler beim Beenden der
   Sequenz. ")},
   complete () {console.log ("Stream wurde erfolgreich beendet.")}
});
subscriber.unsubscribe (); // "Abbestellen"

Grundsätzlich können wir eine 1-zu-viele-Beziehung zwischen Objekten definieren. Wenn sich der Status für das übergeordnete beobachtbare Element ändert, werden seine abhängigen Elemente (die Beobachter) benachrichtigt und aktualisiert.

Sie haben mehrere leistungsstarke Eigenschaften, einschließlich Faulheit, Abbruchfähigkeit und können mehrere Male in einer Sequenz ausgeführt werden.

Schauen Sie sich zen-observable an, um sie noch heute spezifikationsgerecht zu nutzen.

Beginnen wir mit Apollo

Apollo nutzt das Abrufen in einer Observables-Abonnementfunktion (Einzelheiten zu den internen Funktionen von Apollo finden Sie in einem Vortrag, den ich kürzlich hier gehalten habe). Das Observable dient auch als Speicher für normalisierte Daten.

Beim Empfang der Antwort von einer HTTP-Anforderung wird der Store aktualisiert und anschließend ein "forceRender ()" ausgelöst (Reacts-Methode zum manuellen Auslösen eines erneuten Renderns innerhalb einer bestimmten Komponente).

Zuletzt werden unter Verwendung des "Render-Requisiten-Musters" Kinder mit Daten aus dem aktuellen Observable gerendert. Erwähnenswert ist, dass der React-Status hier überhaupt nicht verwendet wurde.

Im Folgenden finden Sie eine Aufschlüsselung der Ereignisse beim Laden einer Seite mit einer grundlegenden Abfragekomponente.

Volle Anatomie eines Seitenladens mit Apollo

Jetzt auf Redux

Mit Redux ignorieren wir den eigentlichen HTTP-Abrufmechanismus (vorausgesetzt, es werden Thunks oder Sagas verwendet) und konzentrieren uns auf Speicheraktualisierungen und das Rendern von Komponenten.

Wenn eine Komponente "connected ()" ist, wird sie der Liste der Abonnenten für das Store Observable hinzugefügt (weitere Informationen zum Redux Store Observable finden Sie hier).
Wenn ein Reduzierer den Status im Store ändert, werden alle Abonnenten benachrichtigt und führen einen "setState ()" aus.

Das Ergebnis ist die verbundene Komponente, und ihre untergeordneten Elemente werden mit aktualisierten Requisiten neu gerendert.

Eine vereinfachte Version von Redux 'Connect ist unten aufgeführt:

Klasse Connect erweitert Komponente {
     trySubscribe () {
        this.unsubscribe =
          this.store.subscribe (this.handleChange.bind (this))
        this.handleChange ()
     }
     componentDidMount () {
       this.trySubscribe ()
     }
     handleChange () {
       const storeState = this.store.getState ()
       const prevStoreState = this.state.storeState
       // Logik, die den Speicher- und Reaktionsstatus verwendet
       // Wenn sich der Speicherstatus geändert hat, aktualisiere den Status von Reacts
       this.setState ({storeState})
     }
}

Zusammenfassung

Ich finde es faszinierend, dass beide Bibliotheken Observables verwenden, obwohl sie mit unterschiedlichen Mechanismen arbeiten.

Ich denke, es zeigt nicht zuletzt, welche Rolle Observables in der Zukunft von Javascript spielen werden. Sie befinden sich derzeit in Phase 1 des offiziellen Vorschlags (alle Details finden Sie unter tc39 hier) und landen hoffentlich bald. In Anbetracht der Art der Macht, die sie auf den Tisch bringen (Probleme zu lösen, bei denen es sich bei Versprechen manchmal um Streams handelt, ist dies nicht möglich), scheint es eine gute Anzahl von Szenarien zu geben, die für sie gut geeignet sind.

Ein guter Weg, um mehr über sie zu erfahren, ist es, Arbeitsbeispiele von ihnen in freier Wildbahn zu lesen, wie das bei Redux und Apollo.

Als nächstes möchte ich die Vor- und Nachteile dieser Ansätze untersuchen und versuchen zu begründen, warum diese Bibliotheken den Ansatz gewählt haben, den sie gewählt haben.

Wenn Ihnen das gefallen hat, ersparen Sie sich bitte einen Klatsch. Alternativ lassen Sie es mich wissen, wenn Sie irgendwelche Gedanken oder Rückmeldungen haben. Vielen Dank :)