돌연변이가없는 감속기의 객체 속성 업데이트

Question

감속기가 작동해야한다고 생각하지만 상태를 변경한다고 계속 주장합니다.

Uncaught Error: A state mutation was detected inside a dispatch, in the path: output.outputList.0.composition . Take a look at the reducer(s) handling the action {"type":"SET_OUTPUT_COMPOSITION",

나는 몇 시간 전에 무언가 비슷한 것을 게시했지만, 내 redux 상태가 너무 복잡하다고 생각했습니다. 이것은 내 단순화 된 버전이고 나는 아직도 돌연변이 오류를 얻고있다. 내가 뭘 잘못하고 있니? 내 redux 상태에서 수업을 사용하지 않아야합니까? 어떤 종류의 불변 라이브러리를 사용해야합니까? 도와주세요.

내 초기 돌아 오는 주

output: { 
    outputList: [], //composed of Output class objects 
    position: 0 
    } 

출력 클래스 특성

case types.SET_OUTPUT_COMPOSITION: { 
     let outputListCopy = Object.assign([], [...state.outputList]); 
     outputListCopy[state.position].composition = action.composition; 
     return Object.assign({}, state, {outputList: outputListCopy}); 

액션

export function setOutputComposition(comp) { 
return { type: types.SET_OUTPUT_COMPOSITION, composition: comp} 
} 

업데이트

class Output { 

    constructor(output) { 
     this.id = output.id; 
     this.composition = output.getComposition(); 
     this.outputObj = output; 
     this.name = output.name; 
     this.url = output.getUrl();  
    } 
} 

export default Output; 

감속기

Answer 1

spread operator하지 깊은 사본 원본 목록에서 개체를 않습니다 당신의 의견은이 문제를 해결하기 위해 슬라이스/스플 라이스를 사용하여 배열의 새로운 인스턴스를 만드는 몇 가지 방법이 있습니다.

t는 ImmutableJS을 사용합니다. 일반적으로 redux 저장소에 클래스를 저장하면 이해하기가 어려워집니다. 필자는 redux-tools를 사용하여 쉽게 검사 할 수있는 간단한 구조를 선호하는 경향이 있습니다.

Answer 2

dispatch에서 오류가 발생했습니다. 따라서 심지어 reducer까지 도달하지 못합니다. 나는 당신이 class을 사용하여 output을 정의하는 것을 좋아하지 않을 것으로 기대합니다. 대신 const output ={ ... }을 입력하십시오. 당신이 말한대로 당신은 실제로 이전 상태 개체를 돌연변이 있습니다

let outputListCopy = Object.assign([], [...state.outputList]); 

그것은 얕은 복사본입니다, 그러므로

outputListCopy[state.position].composition = action.composition; 

: