我见过很多次有人将redux连接到组件,并使用mapStateToProps中的第二个参数。
function mapStateToProps(state, ownProps) {
return {
rowData: state.table.rows[0],
};
}
里面没用吗?如果子组件已经从父组件传递了道具,为什么我们要在mapStateToProps中再次映射/传递它们?
这样做有什么好处?
问候
mapStateToProps
中第二个参数的使用完全取决于应用程序。大多数情况下,您可能不需要它,但在某些情况下,选择器依赖于props来过滤结果,使用mapStateToProps
中的props值是有用的
你可能需要使用道具的场景是
- 假设您有一个名为used的redux状态数据,并且您只需要显示作为组件道具的特定区域中的用户。您可以在mapStateToProps中使用此道具值并返回过滤后的结果,而不是返回整个结果并在渲染中进行过滤,这可能会降低性能
您可以通过在一些道具的帮助下保留一些可能很小的存储数据子集来避免不必要的渲染。
例如,您有一个幻灯片放映应用程序,Redux存储所有幻灯片,而您的组件负责一张幻灯片。道具值包含幻灯片编号。通过只提取特定幻灯片的存储数据,React和React Redux可以更容易地避免不必要的重新发送。也许商店发生了变化,是因为其他用户在您的协作演示编辑器中编辑了另一张幻灯片——没有理由重新绘制您的幻灯片。
https://react-redux.js.org/api/connect#ownprops
此外,Redux是全局状态,而您的组件可以使用该组件所需的数据。如果你计划重用你的组件,或者考虑从Redux(甚至React(切换到其他东西,或者只想遵循良好的实践,将Model与View解耦,那么尽可能地将你的组件与本质上是单个全局变量的东西分离是有意义的。通过只提取您需要的数据,并可能根据组件的需要对其进行调整,您可以执行全局模型到本地ViewModel的映射,并且可以很容易地将组件带到其他地方,而不必担心实现时的全局模型是什么。通过使用e.g.Recompose,您可以更进一步,使事情可以自由移动。
可能会覆盖上一个字段,因此它为您提供了一个选择。
例如:return Object.assign({},state,ownProps);
当您想从props
中提取一些值或使用props
中的值在mapStateToProps
的返回中赋值时,第二个参数通常会出现,然后第二个自变量就会出现。典型的用法是编写选择器,该选择器使用传递给组件的store
和props
中的值。