1、connect

connect用于连接React组件与 Redux store,其使用方法如下

connect([mapStateToProps], [mapDispatchToProps], [mergeProps],[options])

[mapStateToProps(state, [ownProps]): stateProps]是connect的第一个参数,其类型为function,允许我们将 store 中的数据作为 props 绑定到组件上。

const mapStateToProps = (store) => {
return {
count:store.count
}
}

(1)这个函数的第一个参数就是 Redux 的 store,我们不必将 store中的数据原封不动地传入组件,可以根据 state 中的数据,动态地输出组件需要的(最小)属性。

(2)函数的第二个参数 ownProps,是组件自己的 props。有的时候,ownProps 也会对其产生影响。

当 state 变化,或者 ownProps 变化的时候,mapStateToProps 都会被调用,计算出一个新的 stateProps,(在与 ownProps merge 后)更新给组件。

[mapDispatchToProps(dispatch, ownProps): dispatchProps]将 action 作为 props 绑定到组件上,也会成为 MyComp 的 props。

stateProps 和 dispatchProps,都需要和 ownProps merge 之后才会被赋给组件。connect 的第三个参数就是用来做这件事。如果不传这个参数,connect 就会使用 Object.assign替代该方法。

connect 的第四个参数[options] (Object) 如果指定这个参数,可以定制 connector 的行为,一般不用。

connect核心代码:

export default function connect(mapStateToProps, mapDispatchToProps, mergeProps, options = {}) {
return function wrapWithConnect(WrappedComponent) {
class Connect extends Component {
constructor(props, context) {
// 从祖先Component处获得store
this.store = props.store || context.store
this.stateProps = computeStateProps(this.store, props)
this.dispatchProps = computeDispatchProps(this.store, props)
this.state = { storeState: null }
// 对stateProps、dispatchProps、parentProps进行合并
this.updateState()
}
shouldComponentUpdate(nextProps, nextState) {
// 进行判断,当数据发生改变时,Component重新渲染
if (propsChanged || mapStateProducedChange || dispatchPropsChanged) {
this.updateState(nextProps)
return true
}
}
componentDidMount() {
// 改变Component的state
this.store.subscribe(() = {
this.setState({
storeState: this.store.getState()
})
})
}
render() {
// 生成包裹组件Connect
return (
<WrappedComponent {...this.nextState} />
)
}
}
Connect.contextTypes = {
store: storeShape
}
return Connect;
}
}

可以看到connect是一个高阶函数
首先,传入mapStateToProps、mapDispatchToProps
然后,返回一个生产Component的函数(wrapWithConnect)
最后,将真正的Component作为参数传入wrapWithConnect
这样就生产出一个经过包裹的Connect组件,该组件具有如下特点:

通过props.store获取祖先Component的storeprops包括stateProps、dispatchProps、parentProps,合并在一起得到nextState,作为props传给真正的Component
componentDidMount时,添加事件this.store.subscribe(this.handleChange),实现页面交互
shouldComponentUpdate时判断是否有避免进行渲染,提升页面性能,并得到nextState
componentWillUnmount时移除注册的事件this.handleChange

2、Provider

Provider组件主要有以下两个作用:

1、在原应用组件上包裹一层,使原来整个应用成为Provider的子组件
2、接收Redux的store作为props,通过context对象传递给子孙组件

其代码如下

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
}

从上面的代码可以看出Provider是通过context传递给子组件的,子组件通过connect获得数据,实现过程如下,可以看到在没有定义props的情况下,通过context直接取得store中的数据。

...
constructor(props, context) {
this.store = props.store || context.store
this.stateProps = computeStateProps(this.store, props)
this.dispatchProps = computeDispatchProps(this.store, props)
this.state = { storeState: null }
this.updateState()
}
...

转自:https://www.jianshu.com/p/5726bb042bda

react-redux中的数据传递的更多相关文章

  1. 在react/redux中使用Immutable

    在redux中使用Immutable 1.什么是Immutable? Immutable是一旦创建,就不能被更改的数据. 对Immutable对象的任何修改或添加删除操作都会返回一个新的Immutab ...

  2. web开发-前端到服务器Controller中的数据传递

    一, ajax方式 1. ajax获取页面中的数据,包括表单中的数据, 然后封装成对象,数组, 字符串, 或其他基本类型的数据. 2. 将封装得到的数据通过ajax传递到controller中(注:在 ...

  3. OpenGL进阶(十一) - GLSL4.x中的数据传递

    in out 对于 vertex shader,每个顶点都会包含一次,它的主要工作时处理关于定点的数据,然后把结果传递到管线的下个阶段. 以前版本的GLSL,数据会通过一些内建变量,比如gl_Vert ...

  4. 将Controller中的数据传递到View中显示

    如何将Controller 中的数据传送到View 步骤: (1)要有数据,如果要用到对象可以在Model 中定义对应的类 (2)要有装数据的容器: System.Text.StringBuilder ...

  5. 后端list集合中的数据传递到前台HTML中显示(表格形式)

    关键字:web项目中前后台数据传递问题 在学习web项目的过程中,我们肯定会遇到前后台数据交换问题.这个问题我也思考了很久,今天借此总结一下.由于博主水平有限,如有不当之处,还请大家多多指正,,废话不 ...

  6. 剖析 Rails 3 MVC 中的数据传递

    引用链接:https://www.ibm.com/developerworks/cn/web/1108_linhx_rails3mvc/ 如果读者已经开发过基于 Rails 的应用,但对其 MVC 间 ...

  7. Android笔记——Activity中的数据传递案例(用户注冊)

    1.创建程序activity_main: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/andro ...

  8. web开发-服务器Controller到前端中的数据传递

    一, ajax方式 (一)controller中 1. 定义AjaxResponse类 成员有: status , message, data.  其中 status是成功或失败状态, message ...

  9. springmvc中的数据传递

    import javax.servlet.http.HttpServletRequest; import org.springframework.stereotype.Controller; impo ...

随机推荐

  1. Visual Studio 2010 集成 SP1 补丁 制作 Visual Studio 2010 Service Pack 1 完整版安装光盘的方法

    Now that Visual Studio 2010 SP1 has been released, administrators and developers may wish to install ...

  2. redis(一主两从三哨兵模式搭建)记录

    转自:http://www.cnblogs.com/fly-piglet/p/9836314.html 目的: 让看看这篇文章的的人能够知道:软件架构.软件的安装.配置.基本运维的操作.高可用测试.也 ...

  3. react中对于context的理解

    一.context旧版的基本使用 1.context的理解 当不想在组件树中通过逐层传递props或state的方式来传递数据时,可使用context来实现跨层级的组件数据传递. 2.context的 ...

  4. Python爬虫与一汽项目【综述】

    项目来源 这个爬虫项目是 去年实验室去一汽后的第一个项目(基本交工,现在处于更新维护阶段).内容大概是,获取到全国31个省份政府的关于汽车的招标公告,再用图形界面的方式展示爬虫内容.在完成政府招标采购 ...

  5. 程序员 面试题【前端,java,php】

    跬步客 网址:https://www.kuibuke.com/wall/index

  6. IDEA中Git的更新、提交、还原方法

    第一步:在提交项目之前必须先对项目进行更新,此项特别重要,如果不进行更新,别人有项目提交到服务器上,那么你的项目将会提交不上去,使用git解决冲突会比较麻烦,即使你解决了冲突,但是有时候不注意会冲掉别 ...

  7. 物理层PHY 和 网络层MAC

    PHY模块简介 物理层位于OSI最底层,物理层协议定义电气信号.线的状态.时钟要求.数据编码和数据传输用的连接器. 物理层的器件称为PHY. 上图里的灰色方框图里的就是PHY芯片内部模块图. MAC器 ...

  8. 机器学习总结(一) Adaboost,GBDT和XGboost算法

    一: 提升方法概述 提升方法是一种常用的统计学习方法,其实就是将多个弱学习器提升(boost)为一个强学习器的算法.其工作机制是通过一个弱学习算法,从初始训练集中训练出一个弱学习器,再根据弱学习器的表 ...

  9. line-height的定义

    line-height 定义: 即行高,两行文字基线之间的距离 三问: 什么是基线? 形象可理解为字母x的下边缘 为什么是基线? 在css中基线乃各种线的基础 需要两行吗? 实例: <!doct ...

  10. 【做题】ECFinal2018 J - Philosophical … Balance——dp

    原文链接 https://www.cnblogs.com/cly-none/p/ECFINAL2018J.html 题意:给出一个长度为\(n\)的字符串\(s\),要求给\(s\)的每个后缀\(s[ ...