JavaScript：a = Object.assign（{}，a，{k：v}）会变异a吗？

Question

I have a object stored as key, value pairs in a url as query params. The keys of that object may change, and I want to use each of the key, value pairs in that object to update the key, value pairs of a state object in a redux app. I need to do so in a way that doesn't mutate the state object, and am currently attempting to achieve this goal as follows:

case 'LOAD_SEARCH_FROM_URL':
  let _state = Object.assign({}, state);
  const args = action.obj.substring(1).split('&');
  args.map((arg) => {
    const split = arg.split('=');
    _state = Object.assign({}, _state, {
      [split[0]]: JSON.parse( decodeURIComponent( split[1] ) )
    })
  })
  return _state;

This works fine in simple tests, but I wanted to make sure that this is not in fact performing any mutations. I'd be grateful for any insights others can offer on this question!

Answer 1

No, Object.assign will only mutate the target (the first argument), which in your case is a newly created empty object. The sources (all subsequent arguments) will not be modified.

Answer 2

Be very careful, Object assign mutate object if they are deeply nested. And it's written in the documentation, so you should check your data structures.

For deep cloning, we need to use other alternatives because Object.assign() copies property values. If the source value is a reference to an object, it only copies that reference value. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

If you have nested state like, { a: 0 , b: { c: 0}}, trying something like this will not be detected by redux after change:

const mapStateToProps = state => {
  return {
    value: state[YOUR_REDUCER_NAME].a.b
  }
}
connect(mapStateToProps)(Component)