在组件中访问 Store 的最佳方法是使用connect()
函数,该函数创建一个包裹现有组件的新组件。此模式称为高阶组件,通常是在 React 中扩展组件功能的首选方式。这允许您将状态和 Action 创建者映射到组件,并在 Store 更新时自动传递它们。
- 使用 connect 的
<FilterLink>
组件:
import { connect } from 'react-redux' import { setVisibilityFilter } from '../actions' import Link from '../components/Link' const mapStateToProps = (state, ownProps) => ({ active: ownProps.filter === state.visibilityFilter }) const mapDispatchToProps = (dispatch, ownProps) => ({ onClick: () => dispatch(setVisibilityFilter(ownProps.filter)) }) const FilterLink = connect( mapStateToProps, mapDispatchToProps )(Link) export default FilterLink
- 由于它具有相当多的性能优化并且通常不太可能导致错误,因此 Redux 开发人员几乎总是建议使用
connect()
直接访问 Store(使用上下文API)。
class MyComponent { someMethod() { doSomethingWith(this.context.store) } }
标签:const,React,connect,组件,ownProps,Redux,Store From: https://www.cnblogs.com/qinlinkun/p/18183586