一、redux与组件
React-Redux提供connect方法,用于从UI组件生成容器组件
二、react-redux的基本使用
1.引入
import {Provider} from "react-redux"
在根组件外层嵌套一个Provider。Provider的作用就是将store传递给每一个子组件,每一个子组件就都可以使用store了,不需要重复地在组件中引入store
2.connect进行连接
(1)在子组件中引入connect
import {connect} from "react-redux"
(2)进行连接
export default connect(mapStateToProps,mapDispatchToProps)(组件名称)
(3)connect()()
第一个括号内有三个参数:
第一个参数:mapStateToProps:把store里的state映射到当前组件的props中
第二个参数:mapDispatchToProps:
1)该方法用来修改数据,其中有一个参数为dispatch
2)该方法提供了一些方法来进行数据的修改(需手动书写方法,依旧要把action返回给Store),该方法被映射到了this.props中。dispatch是用来发送action的。
第二个括号:绑定的组件名称
三、mapStateToProps
1.作用:建立一个从外部state对象到UI组件的props对象的映射关系。
2.mapStateToProps会订阅Store,每当state更新时,就会自动执行,重新计算UI组件的参数,从而触发UI组件的重新渲染。调用时通过this.props.[key值]来使用。
四、mapDispatchToProps
1.作用:用来建立UI组件的参数到store.dispatch方法的映射。即它定义了哪些用户的操作应该当做Action传给Store。它可以是一个函数,也可以是一个对象。
2.用法:
const mapDispatchProps = (dispatch)=>({
函数名称:function(){
dispatch(action)
}
})
mapDispatchProps函数需要返回出去一个函数,这个函数中用dispatch传递一个action
最终子组件变成了UI组件,connect返回最终的容器组件,react-redux建议我们把所有的数据都放在store中
3.调用:this.props.函数名()

最新文章

  1. 如何用 MEF 扩展应用程序
  2. 我们平时是怎么写html和css的?
  3. token详解(转载)
  4. .NET小细节
  5. 超酷震撼 HTML5/CSS3动画应用及源码
  6. 历史疑团之EJB
  7. IOS开发--仿制网易新闻
  8. [摘录]quarts:Quartz Quick Start Guide
  9. Ubuntu的LTS版本
  10. About GAC
  11. Windows Azure中的Affinity Group
  12. 通过改变viewport 实现网站自适应
  13. 解析java泛型(二)
  14. Let's Encrypt,免费好用的 HTTPS 证书
  15. 微信小程序wx.previewImage实用案例(交流QQ群:604788754)
  16. tomcat编译项目后,classes文件没有相应的改变;
  17. css3新属性运用
  18. mysql主从配置思路
  19. Spring JDBC对象批量操作
  20. JavaScript之with语句

热门文章

  1. 什么是Hash?Hash有哪些特性?
  2. [LeetCode] Generate Random Point in a Circle 生成圆中的随机点
  3. AJAX-wamp安装的“橙色”问题
  4. thinkPHP3.2使用__ROOT__显示为空,为什么
  5. assert()函数总结 (转)
  6. 抓包分析、多线程爬虫及xpath学习
  7. 微信小程序--地图组件与api-模拟器上返回的scale 与真机上不同--bindregionchange触发图标一直闪现问题
  8. canvas画圆角矩形的方法
  9. mysql--实现oracle的row_number() over功能
  10. Yarn 组件的指挥部 – 调度器Scheduler