So strukturieren Sie den RXJS-Code

Question

Wie strukturiert man eine rxjs-App? Es gibt ungefähr hundert Beispiele für Spielzeug-Intro, aber nicht ein einziges Beispiel für eine vollständige App mit Widgets, Subwidgets usw., die den Datenfluss durch die gesamte Anwendung zeigen.

z. Angenommen, Sie haben eine beobachtbare Eigenschaft. Sie müssen es an ein Widget übergeben. Dieses Widget hat Subwidgets, die Teile dieses Status benötigen. Machst du ein Abo?

sub = state.subscribe(widget) 

Jetzt ist "Widget" außerhalb der Monade. Die Subwidgets können keine beobachtbaren Methoden für den Status verwenden. Sie haben das gleiche Problem, wenn Sie das Widget als Nebeneffekt ausführen.

state.doAction(widget) 

So übergeben Sie den Stream Widget? Wenn ja, was bekommst du zurück?

what = widget(state) 

Verbindet das Widget den Zustand und gibt einen Einwegartikel zurück? Gibt es einen vom Staat abgeleiteten Strom zurück? Wenn ja, was ist drin? Versuchen Sie, alle Streams zusammen aus allen Widgets/Subwidgets/Sub-Sub-Widgets mit extensiver Verwendung von selectMany (Identität) zu sammeln, um einen endgültigen Bewerbungsstrom zu erhalten, den Sie abonnieren, um das Ganze abzuschlagen?

Und wenn das Widget erstellt Sub-Widgets auf Anfrage, je nach Status, wie verwaltet Widget seine Subwidgets? Ich versuche weiterhin eine Lösung mit groupBy(), mit einer Gruppe pro Subwidget, aber die Verwaltung aller Abonnements oder Streams von der verschachtelten Observable ist ein unglaublicher Albtraum.

Auch ein Beispiel einer ganzen Anwendung wäre hilfreich.

Answer 1

Übergeben Sie die Observablen an den Konstruktor des Widgets als Argumente und lassen Sie das Widget subskribieren oder mit zusätzlichen Monaden transformieren, bevor Sie es an seine Unterwidget-Konstruktoren übergeben. Das Widget verwaltet seine eigenen Abonnements.

Wenn ein Widget Daten (z. B. Benutzereingaben) erzeugt, legen Sie sie als Observable-Eigenschaften im Widget offen.

Beachten Sie, dass die Widgets selbst nicht Teil des beobachtbaren Streams sind. Sie verbrauchen nur Eingabeströme und erzeugen Ausgabeströme.

// main app 
var someState = Rx.Observable....; 
var someWidget = createSomeWidget(someState, ...); 
var s = someWidget.userData.map(...).subscribe(...); 

// SomeWidget 
var SomeWidget = function ($element, state, ...) { 
    this.userData = $element 
     .find("button.save") 
     .onAsObservable("click") 
     .map(...collect form fields...); 

    // we need to do stuff with state 
    this.s = state.subscribe(...); 

    // we also need to make a child widget that needs some of the state 
    // after we have sanitized it a bit. 
    var childState = state.filter(...).map(...)...; 
    this.childWidget = new ChildWidget(childState, ...); 

    // listen to child widgets? 
} 

Und so weiter. Wenn Sie Knockout verwenden, können Sie ko.observable nutzen, um bidirektionale beobachtbare Streams zu erstellen, und manchmal müssen Sie keine Ausgabeeigenschaften auf Ihren Widgets hinzufügen, aber das ist ein ganz anderes Thema :)