es6：使用扩展运算符的结果值是多少？

Question

偶然发现这段代码学习redux和react。

我的问题是使用传播操作符时的最终结果如何。如果我理解正确，它基本上会将可迭代或数组转换为单独的参数。

所以我希望输出只是使用通过 ... 运算符获得的所有字段创建另一个 JSON 对象。

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} }; 

这是 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, },

所以基本上它足够聪明，知道存在postsList 键并覆盖它？

现在依赖检查 react.js 应用程序的状态是否存在是反模式？意思是“如果这个键存在做这个”而不是“如果键值为空做这个”

你为什么不直接通过数组键来改变键的值呢？ INITIAL_STATE['postsList'] = {...postsObject}

或者使用扩展运算符是新模式？

Answer 1

使用 Redux 时，您希望将状态视为不可变的。 reducer 应该返回一个新的状态对象，而不是修改现有的。如果你运行 INITIAL_STATE['postLists'] = somethingNew;您正在修改 INITIAL_STATE 引用的对象。

在这种情况下不使用扩展运算符是使用Object.assign，它将基于现有对象创建一个新对象并重载一些属性。

话虽如此，你根本不应该真正使用 INITIAL_STATE，除非在 reducer 定义中作为 state 的默认值。

Answer 2

Object.assign 和 ... 扩展运算符适用于浅拷贝。对于深度复制，我更喜欢这样的 lodash/deepClone 或 deepCopy util。

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;
  }
}

我盲目地将我的状态深度复制到一个新状态。然后将 Object.assign 应用于各种对象。所以，我的代码是：

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