我们要把 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的更多相关文章

  1. 【React.js小书】动手实现 React-redux(五):Provider - 方志

    我们要把 context 相关的代码从所有业务组件中清除出去,现在的代码里面还有一个地方是被污染的.那就是 src/index.js 里面的 Index: 1234567891011121314151 ...

  2. 前端笔记之React(五)Redux深入浅出

    一.Redux整体感知 Redux是JavaScript状态管理容器,提供了可被预测状态的状态管理容器.来自于Flux思想,Facebook基于Flux思想,在2015年推出Redux库. 中文网站: ...

  3. react+redux教程(五)异步、单一state树结构、componentWillReceiveProps

    今天,我们要讲解的是异步.单一state树结构.componentWillReceiveProps这三个知识点. 例子 这个例子是官方的例子,主要是从Reddit中请求新闻列表来显示,可以切换reac ...

  4. webpack+react+redux+es6开发模式

    一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...

  5. webpack+react+redux+es6

    一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...

  6. React Redux Sever Rendering实战

    # React Redux Sever Rendering(Isomorphic JavaScript) ![React Redux Sever Rendering(Isomorphic)入门](ht ...

  7. react案例->新闻移动客户端--(react+redux+es6+webpack+es6的spa应用)

    今天分享一个react应用,应在第一篇作品中说要做一个react+redux+xxx的应用.已经做完一部分,拿出来分享.github地址为:点我就可以咯~ 这里实现了一个新闻移动站的spa.本来想写p ...

  8. react + redux 完整的项目,同时写一下个人感悟

    先附上项目源码地址和原文章地址:https://github.com/bailicangd... 做React需要会什么? react的功能其实很单一,主要负责渲染的功能,现有的框架,比如angula ...

  9. react + redux 实现幻灯片

    写在前面: 这一篇是我 使用scss + react + webpack + es6实现幻灯片 的进阶篇,效果请点我,将会使用上redux的基础用法,因为一开始没有理解好redux的用法,单纯看文档, ...

  10. react+redux教程(六)redux服务端渲染流程

    今天,我们要讲解的是react+redux服务端渲染.个人认为,react击败angular的真正“杀手锏”就是服务端渲染.我们为什么要实现服务端渲染,主要是为了SEO. 例子 例子仍然是官方的计数器 ...

随机推荐

  1. 逼近法(例 poj3208、poj1037)

    ​ 逼近法是一种很奇妙的算法,以为"逼近"这一种思想在很多的算法中都有体现.诸如:像我们的二分答案,不断地排除决策集合的一半以接近我们的最终答案:我们的树上倍增求 \(LCA\) ...

  2. POJ3080 Blue Jeans —— 暴力枚举 + KMP / strstr()

    题目链接:https://vjudge.net/problem/POJ-3080 Blue Jeans Time Limit: 1000MS   Memory Limit: 65536K Total ...

  3. html5--3.2 input元素(2)

    html5--3.2 input元素(2) 学习要点 input元素及其属性 input元素 用来设置表单中的内容项,比如输入内容的文本框,按钮等 不仅可以布置在表单中,也可以在表单之外的元素使用 i ...

  4. codeforces 691D D. Swaps in Permutation(dfs)

    题目链接: D. Swaps in Permutation time limit per test 5 seconds memory limit per test 256 megabytes inpu ...

  5. codeforces 667C C. Reberland Linguistics(dp)

    题目链接: C. Reberland Linguistics time limit per test 1 second memory limit per test 256 megabytes inpu ...

  6. JS DOM1核心概要document

    Document类型: document对象表示整个html页面,而且,document对象是window对象的一个属性: 文档信息:document.title,表示当前页面的标题: documen ...

  7. [Selenium] 如何使用Chrome Options 定制测试Chrome 浏览器的特定属性 (类似FirefoxProfiles)

    Chrome Options 类似于FirefoxProfiles,用于定制待测试的Chrome 浏览器的特定属性 1)如果希望测试某个浏览器插件,可通过addExtensions方式提前加载以.cr ...

  8. 通过HttpservletRequest对象获取客户端的真实IP地址

    这篇文章主要介绍了Java中使用HttpRequest获取用户真实IP地址,使用本文方法可以避免Apache.Squid.nginx等反向代理软件导致的非真实IP地址,需要的朋友可以参考下 在JSP里 ...

  9. caffe 入门实例2 如何写一个模型

    占坑,记录如何写一个基于lenet5的模型,并进行测试.

  10. 039--CSS

    一.CSS定义 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. ''' selector { property: value; property: value; ... propert ...