Redux要求始终从还原器返回新状态。例如,我具有以下状态:

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


以及修改internalReferenceProp的减速器。该reducer可以实现为仅更改state对象引用或同时更改stateinternalProperty

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是否已更改,但是为什么要更改内部引用?

最佳答案

第一个显然是不正确的,因为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

关于javascript - 为什么要求总是返回带有新内部引用的新对象,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/34516894/

10-11 12:27
查看更多