我一直在这里关注ReduxJS文档:React的用法
在文档末尾提到了提供程序对象的用法,我将App组件包装在提供程序中,如下所示:
import React from 'react' import ReactDOM from 'react-dom' import { createStore } from 'redux' import { Provider } from 'react-redux' import RootReducer from './app/reducers' import App from './app/app' const store = createStore(RootReducer) ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') )
但是,这就是文档的结尾。如何在组件内提取提供商提供的商店?
通过组件访问商店的最佳方法是使用connect()功能,如文档中所述。这使您可以将状态和动作创建者映射到您的组件,并在商店更新时自动将它们传递给他们。此外,默认情况下,它将dispatch作为传入this.props.dispatch。这是文档中的一个示例:
connect()
dispatch
this.props.dispatch
import { connect } from 'react-redux' import { setVisibilityFilter } from '../actions' import Link from '../components/Link' const mapStateToProps = (state, ownProps) => { return { active: ownProps.filter === state.visibilityFilter } } const mapDispatchToProps = (dispatch, ownProps) => { return { onClick: () => { dispatch(setVisibilityFilter(ownProps.filter)) } } } const FilterLink = connect( mapStateToProps, mapDispatchToProps )(Link) export default FilterLink
请注意,connect实际上创建了一个新组件,将您现有的组件包裹起来!这种模式称为高阶组件,通常是在React中扩展组件功能的首选方法(优于继承或mixins之类的东西)。
connect
由于有它不少性能优化,一般是不太可能导致错误的终极版开发者几乎总是建议使用connect在直接访问商店-但是,如果你有一个 非常 充分的理由需要更低级别的访问权限,该Provider组件使得因此所有子公司都可以通过以下方式访问商店this.context:
Provider
this.context
class MyComponent { someMethod() { doSomethingWith(this.context.store); } }