状態を変更していない状態で、減速機の所定のインデックスに基づいてネストされた配列値を変更する

Question

私は、配列を持つオブジェクトを扱う減速器を持っています。私は与えられたインデックスに基づいてネストされた配列の値を変更したい。このコードは動作しますが、私は深い凍結を使用して動作するように私のテストを得ることができません。私は、.mapを使って、ここではreduxの例をhttp://redux.js.org/docs/basics/Reducers.htmlで見てみると、運がないインデックスを見つけることができました。何か案は？

export default function myReducer(state = { toDisplay: [] }, action) { 
    const { type, groupIndex, itemIndex } = action; 
    const newObject = Object.assign({}, state); 
    switch (type) { 
    case actionTypes.TOGGLE_GROUP: 
     newObject.toDisplay[groupIndex].isSelected = newObject.toDisplay[groupIndex].isSelected ? false : 'selected'; 
     return newObject; 
    case actionTypes.TOGGLE_ITEM: 
     newObject.toDisplay[groupIndex].values[itemIndex].isSelected = newObject.toDisplay[groupIndex].values[itemIndex].isSelected ? false : true; 
     return newObject; 
    default: 
     return state; 
    } 
} 

EDIT：好奇心旺盛な人のため

私はこの思い付いた便利redux videoを見た後：

export default function myReducer(state = { toDisplay: [] }, action) { 
    const { type, groupIndex, itemIndex } = action; 
    switch (type) { 
    case actionTypes.TOGGLE_GROUP: 
     return { 
     ...state, 
     toDisplay: [ 
      ...state.toDisplay.slice(0, groupIndex), 
      { 
      ...state.toDisplay[groupIndex], 
      isSelected: state.toDisplay[groupIndex].isSelected ? false : 'selected' 
      }, 
      ...state.toDisplay.slice(groupIndex + 1) 
     ] 
     }; 
    case actionTypes.TOGGLE_ITEM: 
     return { 
     ...state, 
     toDisplay: [ 
      ...state.toDisplay.slice(0, groupIndex), 
      { 
      ...state.toDisplay[groupIndex], 
      values: [ 
       ...state.toDisplay[groupIndex].values.slice(0, itemIndex), 
       { 
       ...state.toDisplay[groupIndex].values[itemIndex], 
       isSelected: state.toDisplay[groupIndex].values[itemIndex].isSelected ? false : true 
       }, 
       ...state.toDisplay[groupIndex].values.slice(itemIndex + 1) 
      ] 
      }, 
      ...state.toDisplay.slice(groupIndex + 1) 
     ] 
     }; 
    default: 
     return state; 
    } 
} 

示唆したように、ヘルパー/ライブラリを使用するには、おそらく最良のルートですが、私のチームは別の依存関係を追加しないことを望む。

Answer 1

まず、Object.assign(...)は、浅いコピーのみを行います。 hereを参照してください。

オブジェクトの中にネストされたオブジェクトの中にオブジェクトがネストされているので、私はリアファイルからimmutability helpersを推奨します（Rafaelの言葉通り）。

return list 
    .slice(0,index) 
    .concat([list[index] + 1]) 
    .concat(list.slice(index + 1)); 

（source）

：あなたは、あなたがこのようなものを使用することができ、生のjsを持つ配列内の単純な値を修正するために探している場合

case actionTypes.TOGGLE_GROUP: 
    return update(state, { 
    toDisplay: { 
     [groupIndex]: { 
     isSelected: {$set: newObject.toDisplay[groupIndex].isSelected ? false : 'selected'} 
     } 
    } 
    }); 

：これらは、あなたがこのような何かをすることができます