은 ... 확산을 사용하지만, REDUX 여전히

Question

돌아 오는 파견에 경고 던졌습니다 상태 변이에 대한 경고 예외 :

는

Error: A state mutation was detected inside a dispatch, in the path: 
roundHistory.2.tickets. Take a look at the reducer(s) handling the action {"type":"ARCHIVE_TICKETS","roundId":"575acd8373e574282ef18717","data":[{"_id":"575acd9573e574282ef18718","value":7,"user_id":"574c72156f355fc723ecdbbf","round_id":"575acd8373e574282ef18717","__v":0},{"_id":"575acd9573e574282ef18719","value":9,"user_id":"574c72156f355fc723ecdbbf","round_id":"575acd8373e574282ef18717","__v":0},{"_id":"575acd9573e574282ef1871a","value":8,"user_id":"574c72156f355fc723ecdbbf","round_id":"575acd8373e574282ef18717","__v":0},{"_id":"575acdac73e574282ef1871b","value":19,"user_id":"574c72156f355fc723ecdbbf","round_id":"575acd8373e574282ef18717","__v":0},{"_id":"575ad50c4c17851c12a3ec23","value":29,"user_id":"57522f0b1f08fc4257b9cbc6","round_id":"575acd8373e574282ef18717","__v":0},{"_id":"575ad50c4c17851c12a3ec24","value":28,"user_id":"57522f0b1f08fc4257b9cbc6","round_id":"575acd8373e574282ef18717","__v":0},{"_id":"575ad 

ARCHIVE_TICKETS 조치를 처리하는 유일한 감속기이 하나입니다

case 'ARCHIVE_TICKETS' : 
    var archive = [...state.roundHistory]; 
    for (var i in archive) { 
    if (archive[i]._id === action.roundId) { 
     archive[i].tickets = action.data; 
    } 
    } 
    return Object.assign({}, state, { 
    roundHistory: archive 
    }); 

어떻게 그것을 할 수 내가 ... [확산]을 사용하면 상태를 돌연변이합니까?

Answer 1

여기 [...state.roundHistory]이 [].concat(state.roundHistory) 유사하다 : 돌연변이를 방지하기 위해, 나는이 라인을 추가했다. 새 배열을 만들지 만 의 배열에있는 배열은 state.roundHistory과 공유됩니다. 이들을 돌연변이 화하려면 각 항목의 사본을 만들어야합니다.

당신은 당신이 당신의 반환 값 무슨 짓을하는 방법과 유사한 Object.assign를 사용하여이 작업을 수행 할 수 있습니다, 당신은 객체 확산 표기법을 사용할 수 있습니다 (당신이 당신의 자신의 대답에 제안)

var archive = state.roundHistory.map(value => Object.assign({}, value)); 

또는 :

var archive = state.roundHistory.map(value => {...value}); 

Answer 2

알았어. 객체들의 배열을 분산시키는 것은 새로운 배열을 제공하지만 동일한 객체에 대한 링크를 제공합니다. archive[i] = {...state.roundHistory[i]};

case 'ARCHIVE_TICKETS' : 
    var archive = [...state.roundHistory]; 
    for (var i in archive) { 
    archive[i] = {...state.roundHistory[i]}; 
    if (archive[i]._id === action.roundId) { 
     archive[i].tickets = action.data; 
    } 
    } 
    return Object.assign({}, state, { 
    roundHistory: archive 
    });