immutable.js - 複雑なオブジェクトとネストされたオブジェクトのノードを置き換えます

Question

immutable.jsを使用して、JSONオブジェクトのフラグメントを他の部分に更新/置換したいとします。

以下の例を見てください。もっと複雑でネストされたオブジェクトを見ることができます。 "id": "F"のノードの代わりに、別の編集済みノードで/ updateを置き換えたいとします。

docsによると、何とかkeyPathを配列として取得し、setIn(keyPath: Array<any>, value: any): Map<K, V>関数に渡す必要があります。

私は何とかF keypath：['children'、2、 'children'、0、 'children'、0]を見つける必要があります。

これは簡単な例です。私の場合、私のキーパスははるかに複雑な階層を持っています。どのようにimmutable.jsやプレーンJSによってそれを行うには？このアプローチは正しいですか？可能な場合はimmutable.js関数を使用して同じ動作を実現するには、より洗練されたソリューションですか？

敬具、

ラファウ

例：

{ 
    "id": "A", 
    "children": [ 
     { 
      "id": "B", 
      "children": [ 

      ] 
     }, 
     { 
      "id": "C", 
      "children": [ 

      ] 
     }, 
     { 
      "id": "D", 
      "children": [ 
       { 
        "id": "E", 
        "children": [ 
         { 
          "id": "F", // THIS NODE WILL BE UPDATED 
          "children": [ 

          ] 
         } 
        ] 
       }, 
       { 
        "id": "G", 
        "children": [ 

        ] 
       } 
      ] 
     } 
    ] 
} 

Answer 1

あなたが効率的に更新したいノードのkeyPathを決定する方法を持っている場合は、.setIn()は簡単です仕事を終わらせるソリューション。

これには他の方法で対処することもできますが、解決しようとしている正確な問題に依存します。

がidプロパティが真にユニークであれば、あなたの例を考えると、あなたは、あなたが.updateIn()で行くと、指定したノードを検索し、述語関数を作成することができます（どこかのツリーで例えば"id": "F"）探しているものを知っているとそれを更新します。スペックに応じて、DFSまたはBFSを実装します。リスト構造を扱っている場合は、.find()と.findIndex()もまた、構成上非常に貴重なツールとなります。

データをフラット化することも検討してください。それはお気に入りではありませんが、それは仕事を完了させることができますし、UIのものの多くを扱うのがずっと簡単かもしれません。

グラフの例では、マップのListにフラット化し、すべてのアイテムに子供や親のリファレンスを保持させます。このようにして、Listをたどり、単純な述語に基づいて更新する必要のある要素を見つけることができます。