动手实现 React-redux(五):Provider
我们要把 context 相关的代码从所有业务组件中清除出去,现在的代码里面还有一个地方是被污染的。那就是 src/index.js
里面的 Index
:
...
class Index extends Component {
static childContextTypes = {
store: PropTypes.object
} getChildContext () {
return { store }
} render () {
return (
<div>
<Header />
<Content />
</div>
)
}
}
...
其实它要用 context 就是因为要把 store
存放到里面,好让子组件 connect
的时候能够取到 store
。我们可以额外构建一个组件来做这种脏活,然后让这个组件成为组件树的根节点,那么它的子组件都可以获取到 context 了。
我们把这个组件叫 Provider
,因为它提供(provide)了 store
:
在 src/react-redux.js
新增代码:
export class Provider extends Component {
static propTypes = {
store: PropTypes.object,
children: PropTypes.any
} static childContextTypes = {
store: PropTypes.object
} getChildContext () {
return {
store: this.props.store
}
} render () {
return (
<div>{this.props.children}</div>
)
}
}
Provider
做的事情也很简单,它就是一个容器组件,会把嵌套的内容原封不动作为自己的子组件渲染出来。它还会把外界传给它的 props.store
放到 context,这样子组件 connect
的时候都可以获取到。
可以用它来重构我们的 src/index.js
:
..
// 头部引入 Provider
import { Provider } from './react-redux'
... // 删除 Index 里面所有关于 context 的代码
class Index extends Component {
render () {
return (
<div>
<Header />
<Content />
</div>
)
}
} // 把 Provider 作为组件树的根节点
ReactDOM.render(
<Provider store={store}>
<Index />
</Provider>,
document.getElementById('root')
)
这样我们就把所有关于 context 的代码从组件里面删除了。
下一节:动手实现 React-redux(六):React-redux 总结
上一节:动手实现 React-redux(四):mapDispatchToProps
动手实现 React-redux(五):Provider的更多相关文章
- 【React.js小书】动手实现 React-redux(五):Provider - 方志
我们要把 context 相关的代码从所有业务组件中清除出去,现在的代码里面还有一个地方是被污染的.那就是 src/index.js 里面的 Index: 1234567891011121314151 ...
- 前端笔记之React(五)Redux深入浅出
一.Redux整体感知 Redux是JavaScript状态管理容器,提供了可被预测状态的状态管理容器.来自于Flux思想,Facebook基于Flux思想,在2015年推出Redux库. 中文网站: ...
- react+redux教程(五)异步、单一state树结构、componentWillReceiveProps
今天,我们要讲解的是异步.单一state树结构.componentWillReceiveProps这三个知识点. 例子 这个例子是官方的例子,主要是从Reddit中请求新闻列表来显示,可以切换reac ...
- webpack+react+redux+es6开发模式
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
- webpack+react+redux+es6
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
- React Redux Sever Rendering实战
# React Redux Sever Rendering(Isomorphic JavaScript) 
今天分享一个react应用,应在第一篇作品中说要做一个react+redux+xxx的应用.已经做完一部分,拿出来分享.github地址为:点我就可以咯~ 这里实现了一个新闻移动站的spa.本来想写p ...
- react + redux 完整的项目,同时写一下个人感悟
先附上项目源码地址和原文章地址:https://github.com/bailicangd... 做React需要会什么? react的功能其实很单一,主要负责渲染的功能,现有的框架,比如angula ...
- react + redux 实现幻灯片
写在前面: 这一篇是我 使用scss + react + webpack + es6实现幻灯片 的进阶篇,效果请点我,将会使用上redux的基础用法,因为一开始没有理解好redux的用法,单纯看文档, ...
- react+redux教程(六)redux服务端渲染流程
今天,我们要讲解的是react+redux服务端渲染.个人认为,react击败angular的真正“杀手锏”就是服务端渲染.我们为什么要实现服务端渲染,主要是为了SEO. 例子 例子仍然是官方的计数器 ...
随机推荐
- Axure Base 09 带遮罩层的弹出框
示例原型下载:小楼Axure原创元件-带遮罩层的弹出框 实现目标: 1. 点击按钮弹出带遮罩层的对话框: 2. 页面上下左右滚动时,弹出的对话框水平和垂直始终居中. 实现步骤如下: 1. 拖入 ...
- Spring Boot 整合Filter
两种方法 方法一: 正常创建好Filter类,配置完成 package clc.user.filter; import javax.servlet.Filter; import javax.servl ...
- 数据库连接池-配置 wallfilter问题解决-UncategorizedSQLException
wallFilter对sql有着严格的校验,会对有风险的sql过滤,抛出异常信息: org.springframework.jdbc.UncategorizedSQLException: ### Er ...
- 怎么整合小图标,组合到一张png里面
1.将切出来的图片,一个个打开,用动工具组合到新的图片中: 2.将新建的图片,背景选为透明,保存为png格式: 3.通过css的background-position属性设置元素的背景图片.
- MyEclipse注释配置
MyEclipse注释配置 配置路径 1.1. JAVA 打开MyEclipse,选择Window>Preferences>Java>Code Style>Code ...
- 【POJ 3461】 Oulipo
[题目链接] 点击打开链接 [算法] KMP [代码] #include <algorithm> #include <bitset> #include <cctype&g ...
- JAVA线程同步 (三)信号量
一个信号量有且仅有3种操作,且它们全部是原子的:初始化.增加和减少 增加可以为一个进程解除阻塞: 减少可以让一个进程进入阻塞. 信号量维护一个许可集,若有必要,会在获得许可之前阻塞每一个线程: ...
- node mkdirSync 创建多级目录
提供一个实用的一次性同步创建多级目录的方法,收藏一下. function makeDir(dirpath) { if (!fs.existsSync(dirpath)) { var pathtmp; ...
- JS按字节截取字符长度实例
处理过长的字符串,截取并添加省略号 * 注:半角长度为1,全角长度为2 * * pStr:字符串 * pLen:截取长度 * * return: 截取后的字符串 * 代码如下: function ...
- View Programming Guide for iOS ---- iOS 视图编程指南(一)
Next About Windows and Views 关于窗口和视图 In iOS, you use windows and views to present your application’s ...