es6: what is the value of result using spread operator?

Question

came across this code learning redux and react.

my question is what the final result looks like when the spread oeprator is used. if I understand it correctly it basically turns iterable or array into individual arguments.

so I expect that the output is just creating another JSON object using all the fields obtained via the ... operator.

const INITIAL_STATE = { postsList: {posts: [], error:null, loading: false},  
                        newPost:{post:null, error: null, loading: false}, 
                        activePost:{post:null, error:null, loading: false}, 
                        deletedPost: {post: null, error:null, loading: false},
                    };

export default function(state = INITIAL_STATE, action) {
  let error;
  switch(action.type) {

  case FETCH_POSTS:// start fetching posts and set loading = true
    return { ...state, postsList: {posts:[], error: null, loading: true} }; 

so is this the result of FETCH_POSTS:

{ 
postsList: {posts: [], error:null, loading: false},  
                            newPost:{post:null, error: null, loading: false}, 
                            activePost:{post:null, error:null, loading: false}, 
                            deletedPost: {post: null, error:null, loading: false, },

so basically it was smart enough to know that there existed the postsList key and overwritten it?

now is it anti-pattern to rely on checking the existence of the state for the react.js app? meaning "if this key exists do this" instead of "if key value is null do this"

why don't you just change the value of the key via array key? INITIAL_STATE['postsList'] = {...postsObject}

or is using the spread operator the new pattern?

Answer 1

When using Redux you want to treat the state as immutable. The reducer should return a new state object, not modify the existing one. If you run INITIAL_STATE['postLists'] = somethingNew; you are modifying the object referenced by INITIAL_STATE.

Instead of using the spread operator in this case is to use Object.assign, which will create a new object based on an existing object and overload some properties.

That being said, you should not really use INITIAL_STATE at all except as the default value of state in the reducer definition.

Answer 2

Object.assign and ... spread operator is good for shallow copying. For deep copying, I prefer lodash/deepClone or deepCopy util like this.

export default function deepCopy(obj) {
  if (typeof obj === 'object' && Object.prototype.toString.call(obj) === '[object Array]') {
    let finalObj = [];
    for (let i = 0, len = obj.length; i < len; ++i) {
      finalObj.push(deepCopy(obj[i]));
    }
    return finalObj
  } else if (typeof obj === 'object') {
    let finalObj = {};
    for (let prop in obj) {
      if (obj.hasOwnProperty(prop)) {
        finalObj[prop] = deepCopy(obj[prop]);
      }
    }
    return finalObj;
  } else {
    return obj;
  }
}

I blindly deep-copy my state to a new state. And then apply Object.assign to various objects. So, my code will be:

const newState = deepCopy(state);
Object.assign(newState.prop1, { innerProp: 'val' });