還元状態ツリー内に新しいデータを追加

Question

私は入れ子にされたノードのツリーを持つアプリを持っています。すべてのノードは同じタイプです。ユーザは、いくつかのノードを展開

{ 
id: 1, 
title: "node_1", 
children: [ 
    { 
     id: 2, 
     title: "node_2", 
     children: [] 
    }, 
    { 
     id: 3, 
     title: "node_3", 
     children: [] 
    } 
] 

}

（idで、例えばノードの=== 3）私が「子」ノードのプロパティの内部データベースに要求を行い、応答（配列子供）を挿入しなければなりませんid === 3で。だから、結果として、アプリの状態は次のようにする必要があります：

{ 
id: 1, 
title: "node_1", 
children: [ 
    { 
     id: 2, 
     title: "node_2", 
     children: [] 
    }, 
    { 
     id: 3, 
     title: "node_3", 
     children: [ 
      { 
       id: 4, 
       title: "node_4", 
       children: [] 
      }, 
      { 
       id: 5, 
       title: "node_5", 
       children: [] 
      } 
     ] 
    } 
] 

}

私はnode_3の子供プロパティ内の子の配列を貼り付けることができますか？

Answer 1

は考える：

const layer1Id = 1; 
const layer2Id = 3; 
const newArray = [ 
    { 
    id: 4, 
    title: "node_4", 
    children: [], 
    }, 
    { 
    id: 5, 
    title: "node_5", 
    children: [], 
    } 
]; 

を次に、あなたがやる減速中：

return Object.assign({}, state, { children: state.children.map(child => { 
    if (child.id !== layer1Id) return child; 
    return Object.assign({}, child, { children: child.children.map(node => { 
    if (node.id !== layer2Id) return node; 
    return Object.assign({}, node, { children: node.children.concat(newArray) }); 
    })}); 
})}); 

を以前の状態を変化させませんことを確認するために。 動的にまたは深くネストされている場合は、再帰関数を記述して代わりに使用することをお勧めします。

編集：サンプルの再帰的ソリューション（未テスト）。 indicesはレベルによって順序になっている（すなわち：indices[0]が第1レベルのidを指し、indices[1]は、第二のレベルのIDを参照）：

const state = { ... }; 
const indices = [1, 3, 4, 5, 6]; 
const newArray = [ ... ]; 

const recursion = (node, ids, newChildren) => { 
    let children; 
    if (ids.length === 0) { 
    children = newChildren; 
    } else { 
    children = node.children.map(child => { 
     if (child.id !== ids[0]) return child; 
     return Object.assign({}, child, { children: recursion(child, ids.slice(1), newChildren) }); 
    }); 
    } 
    return Object.assign({}, node, { children }); 
}; 

recursion(state, indecies, newArray); 

私は非常にこのReduxのツリーの例を見てお勧めします

Answer 2

アレイを反復してchildrenアレイを修正して修正します。

var id = expandedItemId; 
for(var i = 0; i < obj.children.length; i++){ 
    if(obj.id == expandedItemId){ 
    obj.children.push(`data got from server`); 
    } 
} 

Answer 3

Reduxのストア内のリレーショナルまたは正規化されたデータの推奨アプローチは、データベーステーブルと同様に、「正規化」方法でそれを整理することです。これにより、更新プログラムの管理が容易になります。 http://redux.js.org/docs/FAQ.html#organizing-state-nested-data,How to handle tree-shaped entities in Redux reducers?、およびhttps://github.com/reactjs/redux/pull/1269を参照してください。