Question

我试图了解在Redux状态下散布运算符会做什么？

我遇到了这个问题Purpose of the Spread syntax in React-Redux Reducers，但是由于某种原因，我对“答案”不满意。

有人可以用非常简单的方式向我解释为什么我们要这样做吗

  case WHATEVER:
      return {
        ...state,
        DateSucess: action.payload,

不只是

 case WHATEVER
  return {
   DataSucess: action.payload

Answer 1

spread运算符与ES6中的操作相同，仍然是相同的行为（请检查MDN docs）。

关于使用...状态的动机，这个想法很简单：保留旧状态并添加或覆盖DateSucess属性。

所以我们说：

const state = {foo: 'bar', DateSucess: 'oldDateSuccess', zip: 'zap'}

如果您不使用传播，则state的新值将仅为DateSucess，并且会丢失foo和zip值，使用传播，您将覆盖DateSucess，保持其余值不变。

此点差等于Object.assign的以下点差

return Objet.assign(oldState, {DateSucess: 'newDateSucess'})

Answer 2

spread运算符仅返回与is关联的数组或obj的副本。看下面的例子

const abc = {
  'first_key':1,
  'second_key':2,
}

const newObj={...abc} //will COPY abc

const newObjWithNewKey = {...abc,  'first_key':'01 first','new_key':'007'} // will COPY abc and value of first_key will be replaces with new value as it exists. will add new keyvalue pair new_key.

console.log("abc",abc,"newObj",newObj,"newObjWithNewKey",newObjWithNewKey)

如果您只是return new payload，则现在处于还原状态，那么您将丢失其他状态值。但是如果您使用...，则表示您告诉js复制现有状态并更新指定keys的值（如果没有密钥），然后添加新密钥

Answer 3

假设您的状态结构如下：

const initialState = {
    DateSucess: ' ',
    DateFailure: ' '
}

那么，在这种状态下，现在我们编写一个reducer，然后..

reducer是一个纯函数，它具有先前的状态和一个操作，然后返回下一个状态。

在化简器中，我们进行一些计算并返回下一个状态。请记住，我们不会改变状态。我们使用Object.assign（）创建一个副本。

Object.assign(state, { DateSucess: action.payload})也是错误的：它将改变第一个参数。您必须提供一个空对象作为第一个参数。像这样：

return Object.assign({}, state, { DateSucess: action.payload})

您还可以启用对象散布运算符建议来改为编写{... state，... newState}。就您而言，它看起来像：

return {...state, DateSucess: action.payload}

有关更多信息：https://redux.js.org/basics/reducers

Answer 4

如果您正在使用 react 并询问 react-redux，这可能是您的答案-

我们不应该改变reducer内部的状态。使用扩展运算符，我们复制先前状态并更新它的副本。所以，我们不会改变我们的 prev 状态，同时更新它。这是扩展运算符的功能。

现在，可能会出现另一个问题。为什么我们不能在减速器中变异。嗯，这对我来说是一种“反应”。 React 创建虚拟 dom 来处理 dom 的操作。如果你改变内部状态，dom 和虚拟 dom 的同步可能会中断，事情会变糟。

希望这个描述对你有帮助。

Redux reducer中的传播算子

4 个答案: