Question

我试图了解传播运营商的目的。根据我从文档中理解的，传播语法复制现有对象，并在传入新对象时被覆盖。在下面的代码中：

export default function reducer(state={
    user: [],
    fetching: false,
    fetched: false,
    error: null,
  }, action) {

    switch (action.type) {
      case "FETCH_USER_FULFILLED": {
        return {
          ...state,
          fetching: false,
          fetched: true,
          user: action.payload,
        }
      }
    }

    return state
}

因此，如果我的理解是正确的，这意味着'... state'返回对象：

 {
    user: [],
    fetching: false,
    fetched: false,
    error: null,
  }

所以如果我用对象替换'... state'我应该得到这个：

 {
    user: [],
    fetching: false,
    fetched: false,
    error: null,
    fetching: false,
    fetched: false,
    user: user.payload
  }

这不是多余的吗？

Answer 1

Redux的核心概念之一就是永远不会改变状态。当您开始变异您的状态对象时，App的可预测性和可靠性会受到影响。

Redux希望您使用reducer：

每次都必须返回新的状态对象。
即使您不使用像Immutable这样的库，也需要完全避免变异。

所以关于不变性保证。为了实现这一目标，我们可以使用Immutable这样的库，或者使用Object.assign()自行完成。

Object spread syntax是Object.assign()的优雅而干净的选择。

考虑：

var x = { a: 1, b: 2 };

现在，

var y = Object.assign({}, x, { b: 3, c: 4 });

相当于：

var y = { ...x, b: 3, c: 4 };

无论哪种方式y获取值{ a: 1, b: 3, c: 4 }。

所以在我们的减速机中我们可以写：

return Object.assign({}, state, {
    product: Object.assign({}, state.product, {
        amount: action.calculated_price
    })
});

或传播方式（提供更好的可读代码）：

return {
    ...state,
    product: {
        ...state.product,
        amount: action.calculated_price
    }
};

了解更多here。

Answer 2

对象只能有一个对应于一个键的东西，因此对象不能有两个用户属性。扩展运算符的想法是它传播它所应用的对象。对于上面相同代码的上述示例，您可能不知道状态的所有属性，并且您只想更改某些特定属性，如抓取，提取和用户。

使用spread运算符与使用Object.assign

相同

Object.assign({}, state, {
      fetching: false,
      fetched: true,
      user: action.payload
})

但是扩展运算符为您提供了一种更清晰的语法，使一个对象具有一些与其他对象具有相同属性和值的对象

React-Redux Reducers中传播语法的目的

2 个答案: