Immutable.js 여기 객체

Question

의 돌연변이를 허용하는 것은 예를 들어 돌아 오는 감속기입니다 :

case REDUCE_ME: 
    const newState = state.setIn(['a', 'b', 'c'], payload); 
    payload.id = 'I MANIPULATE STORE!'; 
    return newState; // newState.a.b.c.id is 'I MANIPULATE STORE!' 

예상되는 동작 : id를 변경할 수 없습니다.

도우미 덕분에.

Answer 1

모든 점은 페이로드가 변경 불가능한 개체가 아니기 때문입니다. 적은 상황과 똑같은 :

const a = {'foo': 'bar}; 

당신은 a은 일정한 같은 a = 'baz'; 때문에 값을 다시 할당 할 수 없습니다. 그러나 상수/불변이 아니기 때문에 a.foo의 값을 변경할 수 있습니다. a.foo = 'baz';을 사용할 수 있으며 효과가 있습니다. 그래서 당신은 불변의 것들로 똑같은 일을합니다. 완전 불변 구조를 원한다면 페이로드를 불변으로 변환하십시오. 그리고 immutablejs가 그 값의 새로운 로컬 인스턴스를 생성하지 않고 소스 변수에 대한 포인터를 보유하기 때문에 값을 업데이트했습니다.

페이로드를 사용하기 전에 payload = Immutable.fromJS(payload)을 짧게 사용하면 모든 구조가 변경되지 않아도됩니다.

const state1 = new Immutable.fromJS({ 
    a: { 
     b: { 
      c: 'foo' 
     } 
    } 
}); 

console.log('State 1', state1.toJS()); 

let payload = 'bar'; 
const state2 = state1.setIn(['a','b','c'], payload); 
console.log('state2 after 1st change',state2.toJS()); 

payload = 'baz'; 

console.log('state2 adter 2nd change',state2.toJS()); // c will be still bar 

let payload2 = {'a': 'bar'}; 
// attaching payload2 which can not be changed from object to something else but it's inside values can be changed. 
// same like with const a = {'foo': 'bar}; you cant re-assign value to a, but you can modify a.foo = 'whatever else'; 
const state3 = state1.setIn(['a','b','c'], payload2); 
console.log('state3 after 1st change',state3.toJS()); 

payload2.a = 'baz'; 
console.log('state3 after 2nd change (switched to baz)',state3.toJS()); 

payload2 = 'baz'; 
console.log('state3 after 3rd change (tried to set payload2 to string)',state3.toJS()); 

https://codepen.io/anon/pen/bYNWNr