2015-08-17 11 views
9

Ich versuche, eine komplexe voll dynamische App mit Redux zu erstellen. Ich meine, meine App hat viele dynamisch generierte Formulare mit generierten Feldern - Komponenten on-the-fly. Ich möchte in meinem Redux-Shop auch visuelle Daten über meine Komponenten speichern. Aber wie soll ich das machen, ohne reale Daten mit visuellen Komponentendaten zu mischen?Redux Datenstrukturierung

Zum Beispiel, wenn ich Struktur wie diese

Store { 
    visual: {...deeply nested visual-data-tree...}, 
    data: {...deeply-nested real-data-tree...} 
} 

Es ist schwer Komponente zu machen, weil ich erste visuelle Daten suchen müssen, dann Komponente „Wert“ in zwei Bäume reagieren.

Aber wenn eine ähnliche Struktur wie diese haben:

Store { 
    form { 
    visual: {...form visual data...}, 
    data: { 
     //Ok here the form "data" - widgets. Or it must to be visual? :) 
     widget1 { 
     visual: {type:"ComboBox", opened: true}, 
     data: 1 
     } 
    } 
    } 
} 

Sie sehen das Problem, jetzt habe ich visuelle Daten in realen Daten von Form-Widget.

(Form - Daten - Bedienelement1 - visuelle)

Visuelle Daten innerhalb der realen Daten aus dem Konzept.

Wie lösen Sie die gleichen Probleme beim Mischen von Daten?

Tut mir wirklich leid für mein schlechtes Englisch. Ich hoffe, ich habe das Problem klar erklärt.

+1

Dies wird derzeit in der Redux-Community diskutiert - Sie können den Fortschritt/die Diskussion hier https://github.com/rackt/redux/issues/159 verfolgen. –

+0

Danke für die Antwort, also werde ich es verfolgen – Hassaki

Antwort

14

Ist die Unterscheidung nicht oberflächlich? Ich denke, eine wichtigere Regel ist, dass die Daten im Zustand normalisiert werden sollten. Zum Beispiel, wenn Sie Combobox Widget haben lassen Sie wählen Benutzer, Ihre Daten besser

{ 
    chosenUserId: 10, // Good! 
    users: { 
    10: { name: 'Alice' } 
} 

statt

{ 
    chosenUser: { name: 'Alice' }, // Bad! 
    users: { 
    10: { name: 'Alice' } 
} 

sein formen Wenn die Daten in dem Zustandsbaum dupliziert wird, ist es schwer, es richtig zu aktualisieren und vermeiden Sie Inkonsistenzen.

Solange Sie die Daten normalisiert halten, sehe ich keine echte Notwendigkeit zu teilen visual und data. Möglicherweise möchten Sie den Entitätscache auf oberster Ebene haben, der wie eine Datenbank aussieht (z. B. entities, einschließlich users, posts oder andere Datenobjekte, die in Ihrer App verwendet werden). Ansonsten sollten Sie die Statusform verwenden, die am bequemsten ist Zustand.

+0

Gibt es dann einen einfachen Weg, wie man von normalisierten Daten zu einer verschachtelten Struktur zurückgeht, wenn die Daten tatsächlich zu DOM gerendert werden? –

+0

Ich würde einfach ["Selektoren"] (http://redux.js.org/docs/recipes/ComputingDerivedData.html) manuell schreiben und sie aus 'mapStateToProps' der Komponenten verwenden. –

+0

Ja, das ist im Grunde das, was ich gerade mache. Ich habe mich gefragt, ob das irgendwie automatisiert werden könnte. Zum Beispiel durch die Implementierung von etwas wie 'normalizr.denormalize()', das die Entitäts-IDs durch die tatsächlichen Objekte ersetzt (wird nur direkt vor der Übergabe an die Ansicht zum Rendern verwendet). –