Verwendung des Klassenmodells mit Redux (mit einer Mobx-Option)

8

BEARBEITEN: Endlich habe ich Mobx.js gewählt, für Details siehe @mweststrate-Antwort.

Alle Lernressourcen zu redux zeigen, wie man es mit einfachen Objektmodellen verwendet. Aber ich kann nicht herausfinden, wie man es benutzt, wenn Sie einige es6 Klassenmodelle benutzen.

Nehmen wir zum Beispiel diese Zustandsform:

%Vor%

Und diese Klasse (nicht getestet)

%Vor%

Stellen Sie sich vor, ich hätte eine Sammlung von 100 Spielern in WorldCollection. Was ist der beste Weg?

Take 1: Kopieren aller Eigenschaften von der Instanz in die Statusbaumstruktur

%Vor%

Dies könnte getan werden, indem dispatch in den Konstruktor

injiziert wird %Vor%

Versende eine Aktion in jedem Setter.

%Vor%

Und setze die ganze Logik in Reduzierer (die Setterlogik ist deterministisch und atomar).

%Vor%

Pro:

  • IMHO Es scheint mir mehr redux Weg, nur einen Platz zu haben, wo der ganze Staat ist.

Nachteile:

  • Alle Logik ist dezentral vom Modell an einem anderen Ort. Ich mag es nicht, Dateien zu multiplizieren. Aber vielleicht ist es kein wirkliches Problem?
  • Redux sagt, die Logik muss in Aktionen umgesetzt werden, nicht in Reduzierungen.
  • Der Status benötigt zweimal mehr Speicher. Ich habe gesehen, dass immutables.js dies optimieren konnte, aber ich bin mir nicht sicher.

Take 2: Nur IDs im Reduction State Tree speichern

%Vor%

Dies könnte getan werden, indem auch dispatch in jedem setter verwendet wird und nach jedem Setzer eine Aktion ausgelöst wird

%Vor%

Wenn der neue Baumstatus geändert wird. Ich rufe mapStateToProps und WorldCollection.getPlayer() auf, um die richtige Instanz abzurufen und ihre Eigenschaften der Ansicht zuzuordnen.

Vorteile:

  • Der Redux-Weg wird respektiert, indem Logik nicht in Reducer gesetzt wird
  • Nicht "duplizierter Status" (wenn Immutables.js dies nicht optimieren kann)
  • Logik ist im Modell (macht mehr Sinn für mich)

Nachteile:

  • Redux-Status repräsentiert nicht den gesamten Status

Ich hoffe, ich habe den Fall nicht zu sehr vereinfacht. Mein Punkt ist zu klären, ob / wie Redux mit einigen Klassenmodellen verwendet werden könnte.

Take 3: Verwenden Sie stattdessen Mobx.js / mit Redux

--- sehr vor-experimentell hier ---

Ich habe Mobx.js vor einer Woche entdeckt und seine Einfachheit / Perf hatte mich.

Ich denke, wir könnten alle Klassenmitglieder beobachten (die zusammen den App-Status bilden)

%Vor%

und woanders haben eine Klasse, die den Zustandsbaum bildet, vielleicht könnte Redux hier Sinn machen? (Ich habe keine Ahnung, wie ich diesen Teil machen soll. Ich muss tiefer in Mobx eintauchen)

Das sind Vor- / Nachteile in einem reinen redox / mobx Vergleich für meinen Fall .

Pros:

  • Weniger ausführlich
  • Kein Modell zu vererbt von (wie in redux-orm)
  • Die Leistung wurde bewertet (also ich weiß kaum, wohin ich gehen würde)
  • Schreiben Sie nicht "erwünschte" Reduzierstücke im Klassenmodell (nur Mutatoren)

Nachteile:

  • Keine Ahnung, wie man einen Redo / Undo (oder einen Jitter-Puffer im Spiel-Entwickler) implementiert
  • Es scheint kein "Baum" wie in redux zu sein, um den ganzen Zustand in einem Blinzeln zu haben (für mich ist es das Mördermerkmal von redux)
dagatsoin 01.03.2016, 21:07
quelle

3 Antworten

3

Vielleicht möchten Sie sich redux-orm ansehen, was so ziemlich schon funktioniert. Es bietet eine schöne modellartige Fassade über die tatsächlichen einfachen Objektdaten in Ihrem Redux-Zustand und verarbeitet relationale Daten sehr gut.

    
markerikson 01.03.2016, 22:29
quelle
8

Ich möchte hinzufügen, dass Sie, wenn Sie Redux verwenden würden, den Status gar nicht in Klassen speichern würden . In Redux würde diese Logik in Reduzierern beschrieben, die anstelle von Klasseninstanzen auf einfachen Objekten arbeiten würden. Sie würden die Daten normalisiert halten, so dass jede Entität in einer Objektzuordnung durch ihre ID beibehalten wird, und jeder Verweis auf untergeordnete Entitäten wäre ein Array von IDs und keine echte Referenz. Sie würden dann Selektoren schreiben, um die Teile der Daten zu rekonstruieren, die Sie zum Rendern interessieren.

Sie können diese Diskussion hilfreich finden, ebenso wie diese zwei Beispiele:

Dan Abramov 05.03.2016 11:54
quelle
6

(MobX-Autor). Für eine kurze Antwort auf die Fragen zu MobX:

Wiederholen / Rückgängigmachen kann auf zwei Arten implementiert werden:

  1. Verwenden Sie das Action / Dispatcher-Modell von flux: Versenden Sie serialisierbare Aktionen und interpretieren Sie diese, um das Zustandsmodell zu aktualisieren. Auf diese Weise können Sie ein Aktionsprotokoll erstellen, das nur anhängig ist, und die Basis rückgängig machen / wiederherstellen.
  2. Automatisches Serialisieren des Zustandsmodells in eine Statushistorie (die strukturelle Freigabe verwendet). Die reactive-2015-Demo zeigt dies sehr schön: Ссылка . Während dieser Serialisierung können Sie anstelle eines vollständigen Zustandsbaums auch Deltapatches erzeugen, wenn dies einfacher zu verarbeiten ist.

Einzelner Statusbaum:

  1. In MobX sollte es auch eine einzige Quelle der Wahrheit geben. Der Hauptunterschied zu Redux besteht darin, dass es nicht vorschreibt, dass Sie es speichern sollten. Es erzwingt auch nicht, dass du einen Baum hast. Ein Graph würde auch gut funktionieren. Das Erstellen eines Snapshots dieses Diagramms kann einfach durch die Verwendung von mobx.toJson oder durch Verwenden von Lösung vorheriger Punkt 2. von Wiederholen / Rückgängig gemacht werden.
  2. Um sicherzustellen, dass alles in einem verbundenen Diagramm ist (was Ihnen gefällt), erstellen Sie einfach ein root state-Objekt, das zum Beispiel auf die Player- und World-Collection verweist. Aber im Gegensatz zu Redux müssen Sie von da an nicht normalisieren. Die Welt kann nur direkte Bezugnahmen auf Spieler haben und umgekehrt. Ein einzelnes Statusstammobjekt wird auch in der reactive-2015-Demo erstellt: Ссылка
mweststrate 02.03.2016 10:46
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Zusätzliche Zeichen am Anfang des Strings hinzugefügt?