在React Redux中建模狀態樹

Question

我正在嘗試學習redux，但我不清楚的一件事是如何在狀態樹中對數據建模。在有許多筆記本的情況下，使用簡單的Evernote類型的應用程序，每個筆記本都有很多筆記。狀態樹的一種可能表示是這樣的：

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

但後來我也看到了it's not good to have a deeply nested state tree，而是國家應存放在一個更加標準化的方式，幾乎好像它是一個結構化的數據庫。那麼在這種情況下，像這樣建模數據會更好嗎？

{ 
    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" 
    } 
    ] 
} 

還是有第三種甚至更好的方法？

Answer 1

你說得對。如果您選擇正常化數據，請查看Normalizr library。

Answer 2

關閉。對於嵌套/關係型數據，您希望將您的Redux狀態視爲具有「表」的數據庫。它通常是最容易的，如果你把所有的「真實的」對象通過ID鍵入查詢表，然後所有其他引用只需要使用相應ID：

{ 
    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"} 
     } 
    } 
} 

每其他評論，該Normalizr庫可以在這方面幫助。我也非常喜歡一個名爲redux-orm的圖書館，它有助於保持關係。

最後，您可能想參考organizing nested state上的Redux常見問題解答。