陣營 - 終極版 - 如何在一成不變的方式

Question

我的API返回的形式節點列表處理這種狀態的改變：

[ 
    {id: '2', parentId: '1', name: 'baz' }, 
    {id: '3', parentId: '1', name: 'bar' }, 
    {id: '4', parentId: '5', name: 'foo' }, 
    ... 
] 

，我使用該信息顯示一個樹形結構。

當前我的實現將給定列表保存爲狀態，我的reducer首先創建一個現有狀態的克隆，然後不斷增加/更新/刪除節點。

但是，我的反應組件希望將一列兒童作爲道具傳遞給它們（而不是api響應的一部分），所以在我最上面的組件中，我將狀態轉換爲所需的形式並傳遞給它改爲降低組件。轉換後的樹具有以下形式：

{ 
    id: 0, name: 'root', 'children': [ 
     {id: '2', parentId: '1', name: 'baz', children: [{..., children: [...]}, {..., children: [...]}, ... }, 
    ...] 
} 

即與存儲在自己的父列表中的每個子樹的哈希地圖版本，和樹是最外的對象，然後將其通過根下。

現在，在每一次狀態改變時，存儲狀態都被轉換爲這種形式，但是由於節點數量很大，這種重構會導致每個狀態改變的延遲，所以我打算直接以這種形式存儲狀態（即state = root），並且只重構API響應一次。

我不確定如何以不可變的方式對此進行狀態更改。比方說，我想要添加一個新的子節點到節點層次結構深處的特定節點，以一種可變的方式做到這一點很簡單：我只需將子節點推入父節點的子節點列表中，但我怎麼做到這一點不變呢？

還有什麼是另一種方式呢？

Answer 1

我會建議使用immutablejs和treeutils