Redux 的 mapStateToProps 如何触发 React 组件更新答案

【问题标题】：How Redux's mapStateToProps triggers a React component updateRedux 的 mapStateToProps 如何触发 React 组件更新
【发布时间】：2016-05-09 19:50:47
【问题描述】：

在我的 react/redux 项目中，我有一个对数组进行排序的操作：

case 'SORT_BY_NAME':  
  var newList = state.list; //.slice() 
  newList.sort(function(a,b){
    if (a.name > b.name){
      return 1;
    } else if (a.name < b.name){
      return -1;
    } else {
      return 0;
    }
  });    
  return Object.assign({}, state, { list: newList } );

该操作成功地根据所需字段对数组进行了排序，状态对象的形状符合我的预期，并且在我的反应组件 mapStateToProps 中被击中，并且在 mapStateToProps 中，状态值准确地反映了数组的排序状态。

初始渲染很好。但是排序操作未能导致我的组件的渲染方法再次被调用，因此 UI 中的数据从未出现排序。

我的项目的架构类似于 Redux 文档中的 Reddit example。但是，我也使用 react-redux 与 mapStateToProps 的连接。下面是我的组件设计的精简版：

class MyComponent extends React.Component{
	render(){
		<ul> 
		    {list.map(item =>
		      <li key={item.id}> 
			        {item.name}  
		      </li>
		    )}
	  	</ul>  
	}
} 

function mapStateToProps(state){  
  return {
	list: state.list;
	}
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(MyComponent)

最终我意识到解决我的问题的简单方法是在使用 slice() 对其进行排序之前克隆列表。因此我的问题不是如何解决问题，而是为什么会出现这个问题。是 redux 的 mapStateToProps 没有调用 render() 的问题吗？或者反应组件没有看到新的状态对象？

通过在 mapStateToProps 中设置断点，看起来状态正在被正确设置/更改；根据 Chrome 调试器中的 Redux devtools，商店看起来和我想的一样。

我的项目太大，无法创建一个完全重现我的问题的演示小提琴。当我尝试创建一个最小尺寸的小提琴来重现该问题时，我更加困惑，因为当我不使用 Redux 的连接时问题不会发生。 Link to fiddle.

总而言之，我的问题是为什么在使用 mapStateToProps 时排序没有生效。我最好的猜测是，如果我的排序操作改变了先前的状态，以便新状态与先前的状态匹配，那么就没有需要重新渲染的差异。也许 mapStateToProps 比较了以前的状态和新的状态，它不会将新的道具与道具在 DOM 中的表示进行比较。

【问题讨论】：

您的假设是正确的，并在此处文档的第一段中得到确认：redux.js.org/docs/Troubleshooting.html

标签： reactjs redux react-redux

【解决方案1】：

React Redux connect() 进行了大量优化，并在 mapStateToProps 是纯函数的假设下运行。

通过调用state.list.sort()，您将改变存储状态，Redux 中不允许这样做。 通常最好记住哪些方法正在改变，哪些方法不改变。例如，splice() 是突变，但 slice() 不是； push() 正在变异，但 concat() 没有。永远不要对从 store 中获得的状态使用变异方法。

您还可以查看 redux-immutable-state-invariant 之类的内容以使这些情况更易于检测，或使用 Immutable collections for JavaScript 或 seamless-immutable 来强制执行不变性。这是可选的，由您决定。

【讨论】：