在 JavaScript ES6 中，什么 'return { ..状态，全部:action.payload.data

Question

简短的问题是：这条线是什么

return { ...state, all: action.payload.data };

做？(特别是all:部分(。

如果您不使用 ES6，并且state

1. 2个类似下面的属性
2. 10 个属性而不是 2 个属性
3. 未知数量的属性

那怎么写呢？

---

细节：它是React/Redux的一部分。在化简器函数中，给定先前的状态和动作，它确实：

const INITIAL_STATE = {
  all: [],
  post: null
};
export default function(state = INITIAL_STATE, action) {
  switch(action.type) {
    case FETCH_POSTS:
      return { ...state, all: action.payload.data };
    default:
      return state;
  }
}

Answer 1

从技术上讲，这与调用

：

return Object.assign({}, state, {all: action.payload.data});

这意味着生成的对象：

1. 不是原始对象
2. 它包含来自state的所有属性
3. 它包含属性all的新值。

Answer 2

return { ...state, all: action.payload.data };所做的是解构状态以获取其中的所有属性，然后通过使用键all仅修改所有对象来返回对象

假设在你的情况下

state={
  all: [],
  post: null
};

然后

...state会将all:[], post:null作为单独的值返回。因此，使用 { ...state, all: action.payload.data } 将all的值设置为action.payload.data，并返回包装为对象的整个值。在您的情况下，如果action.payload.data = ["hello", "world"]，它将返回

{
    all: ["hello", "world"],
    post: null
}