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);
  • 相关阅读:
    实例教程五:采用SharedPreferences保存用户偏好设置参数
    实例教程四:采用Pull解析器解析和生成XML内容
    实例教程六:创建数据库与完成数据添删改查第一种写法
    实例教程二:短信发送器
    实例教程九:采用ContentProvider对外共享数据
    带手势滑动的日历Demo
    实例教程三:文件的保存与读取
    短信快速回复(源码)
    实例教程八:采用ListView实现数据列表显示
    javascript中的变量申明
  • 原文地址:https://www.cnblogs.com/superlizhao/p/9549248.html
Copyright © 2011-2022 走看看