zoukankan      html  css  js  c++  java
  • React-记connect的几种写法

    第一种

      最普通,最常见,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);
  • 相关阅读:
    河工大玲珑校赛重现の 饶学妹的比赛
    河工大玲珑杯校赛随笔
    河南省第四届ACM省赛(T1) 序号互换
    河南省第四届ACM省赛(T3) 表达式求值
    debian系统下安装ssh
    戴尔poweredge r730服务器配置以及系统安装
    win10环境下安装Ubantu双系统(超详解)
    debian服务器解决中文安装后出现乱码的问题
    debian系统下安装ssh
    如何在ubuntu上搭建hustoj?
  • 原文地址:https://www.cnblogs.com/superlizhao/p/9549248.html
Copyright © 2011-2022 走看看