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

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

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