文档章节

redux provider源码解析

l
 lovelan1314
发布于 2017/09/11 16:24
字数 421
阅读 12
收藏 0
点赞 0
评论 0

provider 源码

import { Component, Children } from 'react'
import PropTypes from 'prop-types'
import storeShape from '../utils/storeShape'
import warning from '../utils/warning'
let didWarnAboutReceivingStore = false

function warnAboutReceivingStore() {
  if (didWarnAboutReceivingStore) {
    return
  }
  didWarnAboutReceivingStore = true
  warning(
    '<Provider> does not support changing `store` on the fly. ' +
    'It is most likely that you see this error because you updated to ' +
    'Redux 2.x and React Redux 2.x which no longer hot reload reducers ' +
    'automatically. See https://github.com/reactjs/react-redux/releases/' +
    'tag/v2.0.0 for the migration instructions.'
  )
}

export default class Provider extends Component {
  getChildContext() {
    return { store: this.store }
  }

  constructor(props, context) {
    super(props, context)
    this.store = props.store
  }

  render() {
    return Children.only(this.props.children)
  }
}

if (process.env.NODE_ENV !== 'production') {
  Provider.prototype.componentWillReceiveProps = function (nextProps) {
    const { store } = this
    const { store: nextStore } = nextProps

    if (store !== nextStore) {
      warnAboutReceivingStore()
    }
  }
}

Provider.propTypes = {
  store: storeShape.isRequired,
  children: PropTypes.element.isRequired
}
Provider.childContextTypes = {
  store: storeShape.isRequired
}

首先学习react数据传递三种方法,props,state,context

props:一般用于将父组件数据传递到子组件,不能跨组件传递

state:state是内部状态或者局部状态
           es6数据解析操作,let {xxx ,xx, x} = this.state;

context: 和props相比,context可以跨组件传递信息

声明context步骤一:

constructor(props, context) {
    super(props, context)
    this.store = props.store
  }

getChildContext() {
    return { store: this.store }
  }

更具react生命周期,首先constructor方法获取属性store,getChildContext()将store放入context中

步骤二:

Provider.propTypes = {
  store: storeShape.isRequired,
  children: PropTypes.element.isRequired
}

验证组件信息

步骤三:

Provider.childContextTypes = {
  store: storeShape.isRequired
}

声明了childrenContextTypes。如果不声明的话,将无法在组件中使用getChildContext()方法;

获取context:

子树中的任何组件都可以通过定义ContextTypes 去访问它。

connect中通过

  Connect.contextTypes = {

      store: storeShape

    }

然后通过constructor获取store 

constructor(props, context) {

        super(props, context)

        this.version = version

        this.store = props.store || context.store

         const storeState = this.store.getState()

        this.state = { storeState }

        this.clearCache()

      }

最后执行render渲染,返回一个react子元素。Children.only是react提供的方法,this.props.children表示的是只有一个root的元素。

© 著作权归作者所有

共有 人打赏支持
l
粉丝 1
博文 23
码字总数 23601
作品 0
南京
如何在非 React 项目中使用 Redux

本文作者:胡子大哈 原文链接:https://scriptoj.com/topic/178/如何在非-react-项目中使用-redux 转载请注明出处,保留原文链接和作者信息。 目录 1、前言 2、单纯使用 Redux 的问题 2.1、问...

胡子大哈 ⋅ 2017/06/28 ⋅ 0

Redux-thunk快速入门

前言 最近刚刚完成了毕业答辩,我的毕设内容是基于React系列技术栈开发的一个类似Instagram的Web App,戳此看看。开发完后,我惊奇的发现:咦,之前就听说有个叫做redux-thunk的东西,我怎么没...

Guohjia ⋅ 05/22 ⋅ 0

react-redux源码学习笔记

react-redux源码结构 -- index.js -- utils shallowEqual.js storeShape.js warning.js wrapActionCreators.js --components Provider.js connect.js 为了方便解读,先从基础方法开始 index.......

chapin ⋅ 2016/07/10 ⋅ 0

react-redux一点就透,我这么笨都懂了!

1. 目录 redux简介 案例 react-redux核心介绍 2. redux简介 redux是react全家桶的一员,它试图为 React 应用提供「可预测化的状态管理」机制。 Redux是将整个应用状态存储到到一个地方,称为...

wallaceyuan ⋅ 05/07 ⋅ 0

react-navigation之TabNavigator, StackNavigator使用配合redux

我在react-navigation的组件StackNavigator 和TabNavigator组合使用在加上redux,出现如下问题 there is no route defined for key ***must be one of 这个类似的在 react-navigation的githu......

唐朝和尚 ⋅ 2017/07/09 ⋅ 0

Struts2初始化源码分析

Struts2 Web应用启动时,根据web.xml配置的核心过滤器FilterDispatcher,会初始化FilterDispatcher: 2. 正如我们知道的,过滤器初始化时,会自动调用init()方法进行初始化工作,所以在Filte...

陶邦仁 ⋅ 2012/09/27 ⋅ 0

《深入React技术栈》笔记

一、初入React世界 1.2 JSX语法 class 属性修改为className for 属性修改为 htmFor 展开属性 使用ES6 rest/spread 特性提高效率 自定义HTML 属性 如果要使用HTML自定义属性,要使用data- 前缀...

迷糊的浩二 ⋅ 2017/10/09 ⋅ 0

# react项目开发中重置redux state的思考与实践

# react项目开发中重置redux state的思考与实践 点我达技术2017-12-241 阅读 React 写在前面: 上个月开始写的文章,今天才写完,为什么?你猜啊! 阅读本文需要对redux有一定实践经验,对r...

点我达技术 ⋅ 2017/12/24 ⋅ 0

Redux 入门教程(三):React-Redux 的用法

前两篇教程介绍了 Redux 的基本用法和异步操作,今天是最后一部分,介绍如何在 React 项目中使用 Redux。 为了方便使用,Redux 的作者封装了一个 React 专用的库 React-Redux,本文主要介绍它...

阮一峰 ⋅ 2016/09/21 ⋅ 0

Redux理解

作者:Wang Namelos 链接:http://www.zhihu.com/question/41312576/answer/90782136 来源:知乎 著作权归作者所有,转载请联系作者获得授权。 1. React有props和state: props意味着父级分发...

Ethan-GOGO ⋅ 2016/08/24 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

那些证书相关的玩意儿(SSL,X.509,PEM,DER,CRT,CER,KEY,CSR,P12等)

之前没接触过证书加密的话,对证书相关的这些概念真是感觉挺棘手的,因为一下子来了一大堆新名词,看起来像是另一个领域的东西,而不是我们所熟悉的编程领域的那些东西,起码我个人感觉如此,且很长...

颖辉小居 ⋅ 17分钟前 ⋅ 0

利用有限制通配符提升API灵活性(28)

1、参数化类型是不可变的 List<String> 不是List<Object>的子类,但是二者是有联系的 利用有限制的通配符类型处理类似情况 List<? extends Object>(生产者) Collection<? super E>(消费者......

职业搬砖20年 ⋅ 23分钟前 ⋅ 0

ssm框架 +bootstrap分页

这里有两种方式 方式一:自己写分页 方式二:使用插件PageHelper 1.自己写分页 1.1 效果 1.2 实现过程 1.2.1 创建分页公共类 //---------------------------1.属性-------------------------...

Lucky_Me ⋅ 30分钟前 ⋅ 0

Istio

helm template install/kubernetes/helm/istio --name istio --namespace istio-system > $HOME/istio.yaml after $ kubectl create namespace istio-system$ kubectl create -f $HOME/ist......

openthings ⋅ 30分钟前 ⋅ 0

内核线程、轻量级进程、用户线程

线程与进程概念 在现代操作系统中,进程支持多线程。 进程是资源管理的最小单元; 线程是程序执行的最小单元。 即线程作为调度和分配的基本单位,进程作为资源分配的基本单位 一个进程的组成...

117 ⋅ 36分钟前 ⋅ 0

elasticsearch2.4.6升级为elasticsearch-5.5.0的经历

将elasticsearch-5.5.0 中的配置 path.data 指向原来的数据路径 即 path.data: /usr/local/src/elasticsearch-2.4.6/data 注意: elasticsearch-5.5.0 需要将jdk版本升级到1.8...

晨猫 ⋅ 36分钟前 ⋅ 1

lvm讲解 磁盘故障小案例

1

oschina130111 ⋅ 40分钟前 ⋅ 0

那些提升开发人员工作效率的在线工具

本文转载自公众号 Hollis 作为一个Java开发人员,经常要和各种各样的工具打交道,除了我们常用的IDE工具以外,其实还有很多工具是我们在日常开发及学习过程中要经常使用到的。 Hollis偏爱使用...

时刻在奔跑 ⋅ 53分钟前 ⋅ 0

restful风格 实现DELETE PUT请求 的web.xml的配置

import org.springframework.beans.factory.annotation.Autowired; import org.springframework.http.HttpStatus; import org.springframework.http.ResponseEntity; import org.springframe......

泉天下 ⋅ 58分钟前 ⋅ 0

Shell数组

Shell数组 Shell在编程方面比Windows批处理强大很多,无论是在循环、运算。 bash支持一维数组(不支持多维数组),并且没有限定数组的大小。类似与C语言,数组元素的下标由0开始编号。获取数...

蜗牛奔跑 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部