Question

遇到了这个代码学习redux并做出反应。

我的问题是使用扩散oeprator时的最终结果。如果我理解正确，它基本上可以迭代或数组变成单独的参数。

所以我希望输出只是使用通过...运算符获得的所有字段创建另一个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应用程序的状态是否存在反模式？含义＆＃34;如果存在此密钥，请执行此操作＆＃34;而不是＆＃34;如果键值为null，请执行此操作＆＃34;

为什么不通过数组键更改密钥的值？ INITIAL_STATE [＆＃39; postsList＆＃39;] = {... postsObject}

或正在使用扩展运算符新模式？

Answer 1

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

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

话虽如此，除了作为reducer定义中的state的默认值之外，你根本不应该使用INITIAL_STATE。

Answer 2

Object.assign和... spread运算符适用于浅层复制。对于深度复制，我更喜欢这样的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' });

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

2 个答案: