我一直在关注ReduxJS文档:Usage with React
在文档末尾提到了提供者对象的用法，我将我的应用程序组件包装在提供者中，如下所示:
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')
)
然而，这就是文档的结尾.如何在组件中提取供应商提供的存储？
通过组件访问store 的最佳方式是使用connect()函数as described in the documentation.这允许您将状态和操作创建者映射到组件，并在store 更新时自动传递它们.此外，默认情况下，它将以this.props.dispatch的形式传入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实际上创建了一个新组件，它围绕着现有组件！这种模式被称为Higher-Order Components，通常是在React中扩展组件功能的首选方式(在继承或混合等方面).
由于它有相当多的性能优化，并且通常不太可能导致错误，Redux开发人员几乎总是建议使用connect而不是直接访问存储——然而，如果你有very个很好的理由需要较低级别的访问，Provider组件会使其所有子代都可以通过this.context访问存储:
class MyComponent {
someMethod() {
doSomethingWith(this.context.store);
}
}