1

Redux 要求总是从 reducer 返回新的状态。例如，我有以下状态：

let initialState = {
   prop: 3,
   internalReferenceProp: {a:3}
}

以及修改的reducer internalReferenceProp。这个 reducer 可以被实现为仅更改state对象引用或两者state兼而有之internalProperty：

function(state=initialState, action) {
  // changing only state reference
  let newState = Object.assign({}, state);
  newState.internalReferenceProp.a = 7;
  return newState;

  // changing both state and internalReferenceProp reference
  return Object.assign({}, state, {internalReferenceProp: {a:7}})
}

正如我被告知第一种方法是不正确的，所以我的问题是要求也更改内部引用的原因是什么？我知道我应该更改state参考，因为它可以轻松比较以检测是否已state更改，但为什么要更改内部参考？

4

1 回答 1

2

第一个显然不正确，因为Object.assign是浅拷贝，而不是深拷贝。

// changing only state reference
let newState = Object.assign({}, state);

newState === state // false
newState.internalReferenceProp === state.internalReferenceProp // true

state.internalReferenceProp.a // 3
newState.internalReferenceProp.a = 7 // 7
state.internalReferenceProp.a // 7

你可以这样看，如果我们改变其中的一些东西，newState它也会被改变state。如果组件只对internalReferenceProp. 这也称为“副作用”，是一种不好的做法。

简而言之，如果您的输入（state在这种情况下）发生任何变化，则称为副作用并且在 redux 中是错误的。

这是一个为什么不好的例子：

let data = getData(); // from redux

return (
  <ChildComponent someProp={data.internalReferenceProp} />
);

如果我们使用带有副作用的版本，ChildComponent将永远不会重新渲染，因为它的道具没有改变。oldData.internalReferenceProp === newData.internalReferenceProp.

于 2015-12-29T20:58:55.937 回答