Modellieren des Zustandsbaums in React Redux

Question

Ich versuche redux zu lernen, und eines der Dinge, die mir nicht klar sind, ist, wie man die Daten im State Tree modelliert. Nehmen Sie eine einfache Anwendung von evernote, wo es viele Notizbücher gibt und jedes Notizbuch viele Notizen enthält. Eine mögliche Darstellung des Zustandsbaum würde wie folgt sein:

{ 
    notebooks:[ 
    { 
     id: 0 
     notes:[ 
     "hey", 
     "ho", 
     "let's go" 
     ] 
    }, 
    { 
     id: 1 
     notes:[ 
     "another", 
     "notebook" 
     ] 
    } 
    ] 
} 

Aber dann habe ich auch gelesen it's not good to have a deeply nested state tree und stattdessen Staat sollte in einer normalisierten Weise gespeichert werden, fast, als ob es sich um eine strukturierte Datenbank waren. Also wäre es in diesem Fall besser, die Daten so zu modellieren?

{ 
    notebooks: [ 
    { 
     id: 0 
    }, 
    { 
     id: 1 
    } 
    ] 
    notes: [ 
    { 
     notebook_id: 0, 
     note: "hey" 
    } 
    { 
     notebook_id: 0, 
     note: "ho" 
    }, 
    { 
     notebook_id: 0, 
     note: "let's go" 
    }, 
    { 
     notebook_id: 1, 
     note: "another" 
    }, 
    { 
     notebook_id: 1, 
     note: "notebook" 
    } 
    ] 
} 

Oder gibt es einen dritten und noch besseren Weg?

Answer 1

Sie haben es richtig gemacht. Wenn Sie sich für die Normalisierung Ihrer Daten entscheiden, werfen Sie einen Blick auf die Normalizr library.

Answer 2

Schließen. Für verschachtelte/relationale Daten möchten Sie sich Ihren Redux-Zustand als eine Datenbank mit "Tabellen" vorstellen. Es ist in der Regel am einfachsten, wenn Sie alle „echten“ Objekten in einer Lookup-Tabelle von ID eingegeben halten, und dann alle anderen Referenzen einfach die entsprechende ID verwenden:

{ 
    notebooks : { 
     byId : { 
      0 : { notes : [0, 4]}, 
      1 : { notes : [1, 2, 3]} 
     }, 
     ordered : [0, 1] 
    }, 
    notes : { 
     byId : { 
      0 : {notebook : 0, note : "hey"}, 
      1 : {notebook : 1, note : "ho"}, 
      2 : {notebook : 1, note : "let's go"}, 
      3 : {notebook : 1, note : "another"}, 
      4 : {notebook : 0, note : "notebook"} 
     } 
    } 
} 

Per anderen Kommentar, die Normalizr Bibliothek kann dabei helfen . Ich mag auch eine Bibliothek namens redux-orm, die hilft, die Beziehungen zu pflegen.

Schließlich möchten Sie vielleicht auf die Redux FAQ Antwort auf organizing nested state verweisen.