Immutable.js 允许改变对象

Question

这是一个 Redux reducer 示例：

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 = 'baz'; 重新赋值，因为 a 是一个常量。但是您可以更改 a.foo 的值，因为它不是 constant/immutable。您可以使用 a.foo = 'baz'; 并且它会起作用。所以你在用 immutableJs 做同样的事情。如果您想拥有完整的不可变结构，请将您的有效负载也转换为不可变结构。你已经更新了值，因为 immutablejs 持有一个指向源变量的指针，而不创建该值的新本地实例。

简而言之 - 在使用 payload 之前使用 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

Immutable.js 允许改变对象

Immutable.js allows mutating of objects

javascript

immutable.js