React-redux源码解析

2018-09-14 admin
  • Provider

       //最后导出的是createProvider()。所以一开始storeKey应该是以默认值‘store’传进去的
       function createProvider(storeKey = 'store', subKey) {
       const subscriptionKey = subKey || `${storeKey}Subscription`
    
       class Provider extends Component {
           //设置context,能让子组件拿到store
           //相当于返回 {store: this.store}
           getChildContext() {
             return { [storeKey]: this[storeKey], [subscriptionKey]: null }
           }
    
           constructor(props, context) {
             super(props, context)
             //this.store = props.store
             this[storeKey] = props.store;
           }
    
           render() {
             //只能有一个子组件
             return Children.only(this.props.children)
           }
       }
    
       //props和context类型验证
       Provider.propTypes = {
           store: storeShape.isRequired,
           children: PropTypes.element.isRequired,
       }
       Provider.childContextTypes = {
    
             [storeKey]: storeShape.isRequired,
            [subscriptionKey]: subscriptionShape,
        }

            return Provider
    }

通常的做法是我们先通过redux创建好store,然后赋给Provider组件的store属性。在Provider组件内部,拿到这个store,设置为context属性,这样就能让它的所有组件都能通过context拿到store。

   <Provider store={store}>
       <App />
   </Provider>

原文链接:https://segmentfault.com/a/1190000016400050

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-40285.html

文章标题:React-redux源码解析

相关文章
深入理解JavaScript的React框架的原理
如果你在两个月前问我对React的看法,我很可能这样说: 我的模板在哪里?javascript中的HTML在做些什么疯狂的事情?JSX开起来非常奇怪!快向它开火,消灭它吧! 那是因为我没有理解它. 我发誓,React 无疑是在正确的轨道...
2017-03-26
解析JavaScript的ES6版本中的解构赋值
什么是解构赋值? 解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性值赋给一系列变量。这个语法非常简洁,而且比传统的属性访问更加清晰。 在不使用解构赋值的情况下,访问数组的前三项: var first = someArray[0...
2017-03-27
javascript解析xml实现省市县三级联动的方法
本文实例讲述了javascript解析xml实现省市县三级联动的方法。分享给大家供大家参考。具体实现方法如下: (该方法适用于任何常用浏览器) &lt;body&gt; &lt;div&gt; &lt;span&gt; &lt...
2017-03-27
JavaScript实现俄罗斯方块游戏过程分析及源码分享
观摩一下《编程之美》:“程序虽然很难写,却很美妙。要想把程序写好,需要写好一定的基础知识,包括编程语言、数据结构与算法。程序写得好,需要缜密的逻辑思维能力和良好的梳理基础,而且熟悉编程环境和编程工具。” 学了几年的计算机,你有没有爱上编程。...
2017-03-21
JS使用parseInt解析数字实现求和的方法
本文实例讲述了JS使用parseInt解析数字实现求和的方法。分享给大家供大家参考。具体如下: 在网页上使用JavaScript函数中的parseInt解析数字,并求和,有才吧,有空了研究一下。 运行效果如下图所示: 具体代码如下: &l...
2017-03-29
JS解析XML文件和XML字符串详解
JS解析XML文件 &lt;script type=&#x27;text&#x2F;javascript&#x27;&gt; loadXML = function(xmlFile){ var xmlDoc=null; &#x2F;&#x2F...
2017-03-22
Backbone.js 0.9.2 源码注释中文翻译版
&#x2F;&#x2F; Backbone.js 0.9.2 &#x2F;&#x2F; (c) 2010-2012 Jeremy Ashkenas, DocumentCloud Inc. &#x2F;&#x2F; Backbone ma...
2017-03-25
webpack入门+react环境配置
本文介绍了react.js使用webpack搭配环境的入门教程,分享给大家,也给自己做个笔记 如果你想直接上手开发,而跳过这些搭配环境的繁琐过程,推荐你使用官方的create-react-app命令 npm install -g creat...
2017-03-20
node.js依赖express解析post请求四种数据格式
node.js依赖express解析post请求四种数据格式 分别是这四种: www-form-urlencoded form-data application/json text/xml 1、www-form-urlencoded 这...
2017-02-27
JavaScript Base64 作为文件上传的实例代码解析
例如我们用某些 裁剪插件 得到的图片是 &lt;img src=&quot;data:image&#x2F;png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHR...
2017-03-17
回到顶部