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
- react-redux中的<Provider>
- react -redux之provider作用小析
- React+Redux中的MVC
- react-redux中的数据传递
- React×Redux——react-redux库connect()方法与Provider组件
- React×Redux——react-redux库connect()方法与Provider组件
- React实战-深入源码了解Redux用法之Provider
- react-redux提供了connect和Provider有什么作用?
- React深入源码--了解Redux用法之Provider
- react+redux+react-redux
- (十)Redux:官方react-redux的初步使用(Provider组件、connect函数)
- redux在react-native中的使用
- redux在react-native中的运用
- react-redux中的connect方法解析
- redux 在 React-Native 工作中的使用
- react-app-redux项目中的运用
- redux react-redux
- Redux(三: React-Redux)
- html 超文本标记语言
- html 语义化标签记录
- com.sun.mail.smtp.SMTPSendFailedException: 554 DT:SPM 163 smtp10,DsCowABX3qJtagRZBXMsBA--.8416S2 149
- python学习(0)
- 给Java程序员的几条建议
- react-redux中的<Provider>
- python第一天,基本知识
- python第二天-函数
- Nginx1.9.2学习
- 程序执行过程 变量
- java的动态代理机制详解
- 程序员写作能赚多少钱,怎么赚
- 4-2 顺序表操作集 (20分) PTA
- Vijos P1848 记数问题【进制】