记React connect的几种写法(小结)


Posted in Javascript onSeptember 18, 2018

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

连接 React 组件与 Redux store。

连接操作不会改变原来的组件类,反而返回一个新的已与 Redux store 连接的组件类。

参数

[mapStateToProps(state, [ownProps]): stateProps] (Function): 如果定义该参数,组件将会监听 Redux store 的变化。任何时候,只要 Redux store 发生改变,mapStateToProps 函数就会被调用。该回调函数必须返回一个纯对象,这个对象会与组件的 props 合并。如果你省略了这个参数,你的组件将不会监听 Redux store。如果指定了该回调函数中的第二个参数 ownProps,则该参数的值为传递到组件的 props,而且只要组件接收到新的 props,mapStateToProps 也会被调用。

[mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function): 如果传递的是一个对象,那么每个定义在该对象的函数都将被当作 Redux action creator,而且这个对象会与 Redux store 绑定在一起,其中所定义的方法名将作为属性名,合并到组件的 props 中。如果传递的是一个函数,该函数将接收一个 dispatch 函数,然后由你来决定如何返回一个对象,这个对象通过 dispatch 函数与 action creator 以某种方式绑定在一起(提示:你也许会用到 Redux 的辅助函数 bindActionCreators())。如果你省略这个 mapDispatchToProps 参数,默认情况下,dispatch 会注入到你的组件 props 中。如果指定了该回调函数中第二个参数 ownProps,该参数的值为传递到组件的 props,而且只要组件接收到新 props,mapDispatchToProps 也会被调用。

[mergeProps(stateProps, dispatchProps, ownProps): props] (Function): 如果指定了这个参数,mapStateToProps() 与 mapDispatchToProps() 的执行结果和组件自身的 props 将传入到这个回调函数中。该回调函数返回的对象将作为 props 传递到被包装的组件中。你也许可以用这个回调函数,根据组件的 props 来筛选部分的 state 数据,或者把 props 中的某个特定变量与 action creator 绑定在一起。如果你省略这个参数,默认情况下返回 Object.assign({}, ownProps, stateProps, dispatchProps) 的结果。

[options] (Object) 如果指定这个参数,可以定制 connector 的行为。

[pure = true] (Boolean): 如果为 true,connector 将执行 shouldComponentUpdate 并且浅对比 mergeProps 的结果,避免不必要的更新,前提是当前组件是一个“纯”组件,它不依赖于任何的输入或 state 而只依赖于 props 和 Redux store 的 state。默认值为 true。

[withRef = false] (Boolean): 如果为 true,connector 会保存一个对被包装组件实例的引用,该引用通过 getWrappedInstance() 方法获得。默认值为 false

返回值

根据配置信息,返回一个注入了 state 和 action creator 的 React 组件。

第一种

最普通,最常见,delllee和官网第写法。

import React, { Component } from 'react';
import {connect} from 'react-redux';
import { Button } from 'antd-mobile';
import { addGunAction , removeGunAction , removeGunAsync}from './store/actionCreators'
class App extends Component {
 render() {
  console.log();
  return (
   <div className="App">
    <p>{this.props.gun}</p>
    <Button type="ghost" size="small" inline onClick={this.props.handeladd}>+</Button>
    <Button type="ghost" size="small" inline onClick={this.props.handeljian}>-</Button>
    <Button type="ghost" size="small" inline onClick={this.props.handelmanjian}>慢-</Button>
   </div>
  );
 }
}
const mapStateToProps=(state)=>({
  gun:state.gun
})
const mapDispachToProps=(dispatch)=>({
  handeladd(){
   dispatch(addGunAction())
  },
  handeljian(){
   dispatch(removeGunAction())
  },
  handelmanjian(){
   dispatch(removeGunAsync())
  }
})
export default connect(mapStateToProps,mapDispachToProps)(App);

第二种

初次接触,感觉有点绕,不太好理解,为什么点击了,直接就派发action了?

import React, { Component } from 'react';
import {connect} from 'react-redux';
import { Button } from 'antd-mobile';
import { addGunAction , removeGunAction , removeGunAsync}from './store/actionCreators'
class App extends Component {
 render() {
  console.log();
  return (
   <div className="App">
    <p>{this.props.gun}</p>
    {/*不用像第一种那样,点击调用一个方法,方法里再派发action
    这种直接点击派发action就可以*/}
    <Button type="ghost" size="small" inline onClick={this.props.addGunAction}>+</Button>
    <Button type="ghost" size="small" inline onClick={this.props.removeGunAction}>-</Button>
    <Button type="ghost" size="small" inline onClick={this.props.removeGunAsync}>慢-</Button>
   </div>
  );
 }
}
const mapStateToProps=(state,ownProps)=>({
  gun:state.gun
})
//这些action已经自动有了dispatch的功能
const actionCreators={ addGunAction , removeGunAction , removeGunAsync}
export default connect(mapStateToProps,actionCreators)(App);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 贪吃蛇实现代码
Nov 22 Javascript
jquery中动态效果小结
Dec 16 Javascript
jQuery解析Json实例详解
Nov 24 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
Jun 12 Javascript
Bootstrap框架的学习教程详解(二)
Oct 18 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
Jan 27 Javascript
js仿小米手机上下滑动效果
Feb 05 Javascript
vue将对象新增的属性添加到检测序列的方法
Feb 24 Javascript
vue组件中使用props传递数据的实例详解
Apr 08 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
Sep 13 Javascript
详解VUE单页应用骨架屏方案
Jan 17 Javascript
使用layui定义一个模块并使用的例子
Sep 14 Javascript
Vue循环组件加validate多表单验证的实例
Sep 18 #Javascript
vue2.0 + ele的循环表单及验证字段方法
Sep 18 #Javascript
JavaScript指定断点操作实例教程
Sep 18 #Javascript
对VUE中的对象添加属性
Sep 18 #Javascript
微信小程序适配iphoneX的实现方法
Sep 18 #Javascript
小程序兼容安卓和IOS数据处理问题及坑
Sep 18 #Javascript
解决vue attr取不到属性值的问题
Sep 18 #Javascript
You might like
YUI 读码日记之 YAHOO.util.Dom - Part.1
2008/03/22 Javascript
js 省地市级联选择
2010/02/07 Javascript
关于js注册事件的常用方法
2013/04/03 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
javascript中直接写php代码的方法
2013/07/31 Javascript
jQuery带箭头提示框tooltips插件集锦
2014/11/17 Javascript
浅谈Javascript中匀速运动的停止条件
2014/12/19 Javascript
jQuery validate插件功能与用法详解
2016/12/15 Javascript
超全面的javascript中变量命名规则
2017/02/09 Javascript
JavaScript实现的XML与JSON互转功能详解
2017/02/16 Javascript
详解解决使用axios发送json后台接收不到的问题
2018/06/27 Javascript
webuploader实现上传图片到服务器功能
2018/08/16 Javascript
Vue使用watch监听一个对象中的属性的实现方法
2019/05/10 Javascript
layui radio点击事件实现input显示和隐藏的例子
2019/09/02 Javascript
JsonProperty 的使用方法详解
2019/10/11 Javascript
构建大型 Vue.js 项目的10条建议(小结)
2019/11/14 Javascript
详解js中的原型,原型对象,原型链
2020/07/16 Javascript
Vue实现点击导航栏当前标签后变色功能
2020/08/19 Javascript
[01:45]绝对公平!DOTA2队长征召模式详解
2014/04/25 DOTA
[06:44]2018DOTA2亚洲邀请赛4.5 SOLO赛 MidOne vs Sumail
2018/04/06 DOTA
python调用cmd命令行制作刷博器
2014/01/13 Python
python输入整条数据分割存入数组的方法
2018/11/13 Python
Python3实现的回文数判断及罗马数字转整数算法示例
2019/03/27 Python
使用django的objects.filter()方法匹配多个关键字的方法
2019/07/18 Python
opencv之颜色过滤只留下图片中的红色区域操作
2020/06/05 Python
深入浅析Python代码规范性检测
2020/07/31 Python
python用700行代码实现http客户端
2021/01/14 Python
CSS3弹性布局内容对齐(justify-content)属性使用详解
2017/07/31 HTML / CSS
自我评价范文点评
2013/12/04 职场文书
教学个人的自我评价分享
2014/02/16 职场文书
小学运动会入场式解说词
2014/02/18 职场文书
2014年创卫实施方案
2014/02/18 职场文书
营销部内勤岗位职责
2014/04/30 职场文书
2014年学生工作总结
2014/11/20 职场文书
2015年基层党支部工作总结
2015/05/21 职场文书
Html5调用企业微信的实现
2021/04/16 HTML / CSS