Javascript 如何在 React 中使用 Redux 的 Provider
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35864957/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use Redux's Provider with React
提问by Jacob Mason
I've been following the ReduxJS documentation here: Usage with React
我一直在关注这里的 ReduxJS 文档：Using with React
At the end of the document it mentions usage of the provider object, I have wrapped my App component in the provider like so:
在文档的末尾，它提到了提供程序对象的使用，我将我的 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')
)
However, that's where the documentation ends. How do I pickup the store provided by provider within the components?
然而，这就是文档结束的地方。如何在组件内取货提供者提供的商店？
回答by Joe Clay
The best way to access your store through a component is using the connect()function, as described in the documentation. This allows you to map state and action creators to your component, and have them passed in automatically as your store updates. Additionally, by default it will pass in dispatchas this.props.dispatch. Here's an example from the docs:
通过组件访问您的商店的最佳方式是使用该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
Note that connectactually creates a new component that wraps around your existing one! This pattern is called Higher-Order Components, and is generally the preferred way of extending a component's functionality in React (over stuff like inheritance or mixins).
请注意，connect实际上创建了一个新组件来环绕您现有的组件！这种模式称为高阶组件，通常是在 React 中扩展组件功能的首选方式（通过继承或混合之类的东西）。
Due to it having quite a few performance optimizations and generally being less likely to cause bugs, the Redux devs almost always recommend using connectover accessing the store directly - however, if you have a verygood reason to need lower level access, the Providercomponent makes it so all its children can access the store through this.context:
由于有它不少性能优化，一般是不太可能导致错误的终极版开发者几乎总是建议使用connect在直接访问商店-但是，如果你有一个非常充分的理由需要更低级别的访问权限，该Provider组件使得所以它的所有孩子都可以通过以下方式访问商店this.context：
class MyComponent {
someMethod() {
doSomethingWith(this.context.store);
}
}
回答by amahfouz
Thanks for the answer, but it is missing one crucial bit, which is actually in the documentation.
感谢您的回答，但它缺少一个关键的部分，实际上在文档中。
If contextTypes is not defined, then context will be an empty object.
如果未定义 contextTypes，则 context 将是一个空对象。
So I had to add the following for it to work for me:
所以我必须添加以下内容才能为我工作：
static contextTypes = {
store: PropTypes.object.isRequired
}
