react-redux中的<Provider>

来源:互联网 发布:美橙域名查询 编辑:程序博客网 时间:2024/05/22 14:23

所有容器组件都可以访问 Redux store,所以可以手动监听它。一种方式是把它以 props 的形式传入到所有容器组件中。但这太麻烦了,因为必须要用 store 把展示组件包裹一层,仅仅是因为恰好在组件树中渲染了一个容器组件。

建议的方式是使用指定的 React Redux 组件 <Provider> 来 魔法般的 让所有容器组件都可以访问 store,而不必显示地传递它。只需要在渲染根组件时使用即可


<Provider store>使组件层级中的 connect()方法都能够获得 Redux store。正常情况下,你的根组件应该嵌套在 <Provider>中才能使用 connect()方法。

index.js

import React from 'react'import { render } from 'react-dom'import { Provider } from 'react-redux'import { createStore } from 'redux'import todoApp from './reducers'import App from './components/App'let store = createStore(todoApp)render(  <Provider store={store}>    <App />  </Provider>,  document.getElementById('root'))
<Provider>的原理:使用用了react中的context属性:
源码如下:
class Provider extends Component{
getChildContext(){
  retrun {
store:this.props.store
};
}
render(){
  return this.props.children;
}
}
Provider.childContextTypes = {
store:React.PropTypes.object
}
0 0
原创粉丝点击