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);

 

转载于:https://www.cnblogs.com/superlizhao/p/9549248.html