对于react-redux的理解
一、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.函数名()
对于react-redux的理解的更多相关文章
- webpack+react+redux+es6开发模式
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
- react+redux官方实例TODO从最简单的入门(6)-- 完结
通过实现了增-->删-->改-->查,对react结合redux的机制差不多已经了解,那么把剩下的功能一起完成吧 全选 1.声明状态,这个是全选状态 2.action约定 3.red ...
- react+redux官方实例TODO从最简单的入门(1)-- 前言
刚进公司的时候,一点react不会,有一个需求要改,重构页面!!!完全懵逼,一点不知道怎么办!然后就去官方文档,花了一周时间,就纯react实现了页面重构,总体来说,react还是比较简单的,由于当初 ...
- react+redux教程(四)undo、devtools、router
上节课,我们介绍了一些es6的新语法:react+redux教程(三)reduce().filter().map().some().every()....展开属性 今天我们通过解读redux-undo ...
- React + Redux 入坑指南
Redux 原理 1. 单一数据源 all states ==>Store 随着组件的复杂度上升(包括交互逻辑和业务逻辑),数据来源逐渐混乱,导致组件内部数据调用十分复杂,会产生数据冗余或者混用 ...
- 【原】react+redux实战
摘要:因为最近搞懂了redux的异步操作,所以觉得可以用react+redux来做一个小小的项目了,以此来加深一下印象.切记,是小小的项目,所以项目肯定是比较简单的啦,哈哈. 项目效果图如图所示:(因 ...
- webpack+react+redux+es6
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
- react+redux构建淘票票首页
react+redux构建淘票票首页 描述 在之前的项目中都是单纯的用react,并没有结合redux.对于中小项目仅仅使用react是可以的:但当项目变得更加复杂,仅仅使用react是远远不够的,我 ...
- React+Redux开发实战项目【美团App】,没你想的那么难
README.md 前言 开始学习React的时候,在网上找了一些文章,读了官网的一些文档,后来觉得React上手还是蛮简单的, 然后就在网上找了一个React实战的练手项目,个人学完之后觉得这个项目 ...
- 详解react/redux的服务端渲染:页面性能与SEO
亟待解决的疑问 为什么服务端渲染首屏渲染快?(对比客户端首屏渲染) react客户端渲染的一大痛点就是首屏渲染速度慢问题,因为react是一个单页面应用,大多数的资源需要在首次渲染前就加载 ...
随机推荐
- Hadoop-2.9.2单机版安装(伪分布式模式)(一)
一.环境 硬件:虚拟机VMware.win7 操作系统:Centos-7 64位 主机名: hadoopServerOne 安装用户:root软件:jdk1.8.0_181.Hadoop-2.9.2 ...
- 2018-2019-2 20165311《网络对抗技术》Exp5 MSF基础应用
<网络对抗技术>Exp5 MSF基础应用 实验目的 实验内容 一个主动攻击实践(ms08_067) 一个针对浏览器的攻击(ms11_050) 一个针对客户端的攻击(adobe_toolbu ...
- Spring Boot2.1.3全局跨域
/** * 配置跨域访问 * * @author Terwer */ @Bean public WebMvcConfigurer corsConfigurer() { return new WebMv ...
- STREAMING HIVE流过滤 官网例子 注意中间用的py脚本
Simple Example Use Cases MovieLens User Ratings First, create a table with tab-delimited text file f ...
- pandas(一)
import numpy as py import pandas as pd Series对象 data= pd.Series([0.25,0.5,0.75,1.0]) 默认索引是数字 data= ...
- vue-cli +echarts-amap集成echarts和高德地图TypeError: Cannot read property 'dataToPoint' of null解决方案
由于项目的需求,需要做一种迁徙效果, 最后我们采用了组件化开发,可以说这个坑自己一个人踩,有点累,但也收获不少. vue-cli +echarts-amap集成echarts和高德地图,出现报错,错误 ...
- Ztree节点增加删除修改和Icheck的用法
简介 官方文档:http://www.treejs.cn/v3/api.php zTree 是一个依靠 jQuery 实现的多功能 “树插件”, 而且拥有较好的浏览器兼容性,有着丰富的功能以及可以自定 ...
- OC获取ip地址
+(NSString *)getIp{ NSError *error;NSURL *ipURL = [NSURL URLWithString:@"http://pv.sohu.com/cit ...
- java项目对jar包加密流程,防止反编译
Java 开发语言以其安全性高.代码优化.跨平台等特性,迅速取代了很多传统高级语言,占据了企业级网络应用开发等诸多领域的霸主地位.特别是近年来大数据.互联网+.云计算技术的不断发展,Java 开发语言 ...
- MATLAB矩阵运算
1. 矩阵的加减乘除和(共轭)转置 (1) 矩阵的加法和减法 如果矩阵A和B有相同的维度(行数和列数都相等),则可以定义它们的和A+B以及它们的差A-B,得到一个与A和B同维度的矩阵C,其中Cij=A ...