Bir dönüştürücüde belirli bir dizine bağlı olarak iç içe geçmiş dizi değerini değiştirmeden, değiştirilemiyor

Question

Dizilerle çalışan bir nesne ile çalışan bir redüktör var. Verilen bir dizine göre yuvalanmış dizilerdeki bir değeri değiştirmek istiyorum. Bu kod çalışıyor ama testimi derin dondurucu kullanarak çalışmaya başlayamıyorum. Şanssız endeksi bulmak için http://redux.js.org/docs/basics/Reducers.html kullanarak .map kullanarak redux örneğine bakmaya çalışıyordum. Herhangi bir fikir?

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; 
    } 
} 

DÜZENLEME: bu geldi yararlı bir redux video izledikten sonra meraklı herkes için

: Önerilen gibi

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; 
    } 
} 

bir yardımcı/kütüphane kullanma muhtemelen en iyi yoldur ama benim ekip başka bir bağımlılık eklememek istiyor.

Answer 1

İlk olarak, Object.assign(...) sadece sığ bir kopya yapar. Bakınız here.

Nesnelerin içine yerleştirilmiş nesnelerin içine yerleştirilmiş nesneleriniz olduğu için, immutability helpers tepkisini (Rafael tarafından belirtildiği gibi) şiddetle tavsiye ederim.

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

(source)

: o zaman böyle bir şey kullanabilirsiniz çiğ js ile bir dizi içinde basit bir değerini değiştirmek isteyen varsa

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

: Bunlar böyle bir şey yapmak için izin