读心悦

  • 读心随笔
  • 读心里话
  • 计算机
  1. 首页
  2. React
  3. 正文

React-Redux的connect

2020年09月29日 97点热度 0人点赞 0条评论

connect函数是连接React组件和Redux  Store,连接操作过程中不会改变原来的组件,而且返回一个已经与Store连接的新组件。

connect常见的两个参数:

1、mapStateToProps(state,[ownProps]),在定义该函数时,组件会监听Store的变化,只要Store发生变化,mapStateToProps函数就会被调用并且必须返回一个纯对象,该对象会和组件的Props合并。mapStateToProps的参数ownProps。表示传递到组件的Props,也就是每次更新Store状态,它接受整个存储状态并且返回一个该组件需要的数据对象。

2、mapDispatchToProps(dispatch,[ownProps]);该参数可以是函数也可以是对象。若是对象的话,那每次定义在该组件上的函数都被当作Redux  action creator,对象定义的方法名作为属性名,每个每个方法都会返回一个新函数,函数中的dispatch方法会把action Creator的返回值作为参数执行,这个参数被合并到组件的props中去。若是一个函数的话,那么在创建组件时调用一次,把dispatch作为参数执行然后再返回一个对象,该对象通过dispatch函数与action Creator以某种方式绑定一起,如果忽略mapDispatchToProps参数,dispatch默认会注入到组件的props中。





const  mapStateToProps = (state,ownProps) => ({})
const  mapDispatchToProps = {}
connect(mapStateToProps,mapDispatchToProps)(component)
 不订阅Store订阅Store
不注入action creatorconnect()(Component)Store发生变化时,不重新呈现,接受到的props.dispatch用在手动调度actionconnect(mapStateToProps)(Component)订阅的napStateToProps从商店中提取值,并且仅仅用在这些值发生改变时重新渲染接受到的props.dispatch用在手动调度action
注入action creatorconnect(null,mapDispatchToProps)(Component)Store发生变化时,不重新呈现把接收到的mapDispatchProps注入action creator作为props,并且在调用时自动发送action操作connect(mapStateToProps,mapDispatchToProps)(Component)订阅的napStateToProps从商店中提取值,并且仅仅用在这些值发生改变时重新渲染把接收到的mapDispatchProps注入action creator作为props,并且在调用时自动发送action操作
赞微海报分享
本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: react redux
最后更新:2020年09月29日

读心悦

自己从事开发也有一段时间了,总有一些迷茫,对未来有一点恐惧,不知道以后会不会继续从事开发的岗位。无论未来做出怎样的选择,这个网站就记录一下从事开发这段时间的一些笔记、阅读笔记吧,好歹也给自己留个纪念吧,你说呢! 写点代码,读点书,读点心,读点自己!

打赏 点赞
< 上一篇
下一篇 >

文章评论

取消回复

读心悦

自己从事开发也有一段时间了,总有一些迷茫,对未来有一点恐惧,不知道以后会不会继续从事开发的岗位。无论未来做出怎样的选择,这个网站就记录一下从事开发这段时间的一些笔记、阅读笔记吧,好歹也给自己留个纪念吧,你说呢! 写点代码,读点书,读点心,读点自己!

标签聚合
Nginx 阅读 canvas node Echarts redux 随笔 JavaScript CSS taro flutter hook 闲谈 小程序 vue 悦读 react git mysql
推荐文章
  1. react函数编程Hook笔记
  2. React组件传值
  3. useContext()组件状态共享或者传值
  4. 《React实战》阅读笔记
分类
  • flutter (11)
  • html/css (23)
  • Javascript (22)
  • Mysql (2)
  • node (2)
  • React (27)
  • vue (1)
  • 小程序 (40)
  • 悦读 (8)
  • 未分类 (2)
  • 读心里话 (9)

COPYRIGHT © 2020 读心悦

黔ICP备20005501号

黔公网安备52011502001078号