この還元剤の状態を変えていますか？

Question

私は状態を変えるのを避けるために、さまざまな方法について読んできました。これらのメソッドの1つはスプレッド演算子（...）を使用しており、使用を避ける方法の1つはプッシュです。スプレッド演算子とプッシュ：、私は両方を使用していますので、

export default function (state=[],action){ 
if (action.type === 'SELECTED_DROP') { 
    let updated = [ ...state]; 
    updated[action.payload.queryIndex].items.push(action.payload.item) ; 
    return updated; 
    } 
return state; 
} 

：しかし、私の減速に私は連結を実装couldn't、ネストされた構造体の内部配列に項目を追加する必要がありますが、正しくので、私は次のコードを試してみました。私はその状態を変えていますか？

はあなたが

Answer 1

はい、あなたは状態を変異されているありがとうございます。私が収集したものからは、配列でもあるプロパティ項目を含むオブジェクトを持つ配列があります。 items配列を変更しているので、状態を変更しています。

は、ここにあなたが何をすべきかです：それは正しいインデックスかどう

は

export default function (state=[], action) { 
    switch (action.type) { 
    case 'SELECTED_DROP': 
     return state.map((item,ix) => 
     ix===action.payload.queryIndex ? 
      {...item, items:[...item.items, action.payload.item]} : 
      item 
    ); 
    case default: 
     return state; 
    } 
} 

マップ機能は基本的に新しいアイテムの配列を変更しない場合は、古いアイテムや新アイテムを返します。

Answer 2

あなたは本当にあります。最上位配列の浅いコピーを作成していますが、内部配列を直接変更しています。

immutablyデータを更新するには二つの基本的なルールがあります。

• コピーを持っているために、ネストのニーズのすべてのレベルあなたが変異を使用することができます
• をしたが、だけあなたは、実際のコピーを変異している場合

は、このケースでは、トップの配列、そのインデックス位置にあるアイテム、とitems配列自体のコピーを作成する必要があります。入れ子にされた更新は一種の醜いものになることがありますが、それはそうです。

https://github.com/markerikson/react-redux-links/blob/master/immutable-data.mdに不変の更新コードを正しく書き込む方法に関する記事へのリンクと、https://github.com/markerikson/redux-ecosystem-links/blob/master/immutable-data.md#immutable-update-utilitiesでこれらの更新を抽象化するための多数のユーティリティライブラリへのリンクがあります。