Reactの配列から項目を削除するために、フィルタ上に$ splice（immutability-helperから）を使用する利点は何ですか？

Question

状態データのCRUD操作にimmutability-helperを使用していますが、データを削除するのに常に$spliceを使用する必要があるかどうかを知りたい場合、またはfilterを使用しても問題ありません（破壊的でないため）。例えば

、のは、私はオブジェクトの配列を持っているとしましょう：

：

todos = [ 
{id: 1, body: "eat"}, 
{id: 2, body: "drink"}, 
{id: 3, body: "sleep"}, 
{id: 4, body: "run"} 
] 

は、アイテムIDを考えると、私は2つの方法でそれを削除することができます。

index = todos.findIndex((t) => { return(t.id === id) }); 
newtodos = update(todos, { $splice: [[index, 1]] }) 

OR

B：そのindexと使用$spliceを見つけます。 filter使用：

newtodos = todos.filter((t) => { return(t.id === id) }); 

filterは、より簡潔であるが、私はそれがこのケースで$spliceを使用する場合と比較していずれかの欠点を持っているかはわかりません。

Answer 1

使用immutability-helper：それはcollectionとcollection[2]のために、あなたに新しいコピーを与える、

const collection = [1, 2, {todos: [...todos]}]; 

    const newCollection = update(collection, 
     { 
      2: { 
       todos: { 
        $apply: todos => todos.filter(t => t.id !== id) 
       } 
      } 
     } 
    ); 

と：：だから

console.log(newCollection === collection, newCollection[2] === collection[2]); 
    //false false 

、あなたがreact-reduxを使用する場合

それはnested collectionを処理するために便利です、connectコンポーネントへの状態、コンポーネントが必要な場合状態が変更されたときにを再描画する場合は、新しい状態のコピーを返す必要があります。

は古い方法で、このオペレータの操作を行います。

const todoList = collection[2].todos; 
    const idx = todoList.findIndex(t => t.id === id); 
    const newTodoList = update(todoList, {$splice: [[index, 1]]}); 
    const newCollectionTwo = [...collection]; 
    newCollectionTwo[2] = { 
     todos: newTodoList 
    }; 

とコンソールと見て取る：簡単なデータ構造とオペレータのため

console.log(collection, newCollectionTwo, collection === newCollectionTwo, collection[2] === newCollectionTwo[2]); 

を、私はそれがfilterと同じだと思います。

私の英語では申し訳ありませんが、これは私の意見です。