redux在react-native上使用(四)--connect使用

普通写法

原来在组件中connect连接redux的写法是:http://www.jianshu.com/p/5659e3edc45c

import { connect } from 'react-redux';
import { start, stop, reset } from './actions';

class Home extends Component {

    ...

    // dispatch一个action
    this.props.dispatch(reset());

    ...

    const mapStateToProps = state => ({
        timer: state.timer
    })
}

export default connect(mapStateToProps)(Home);

或者

import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as actions from './actions';

class Home extends Component {

    ...

    // dispatch一个action
    this.props.dispatch.reset();

    ...

    const mapStateToProps = state => ({
        timer: state.timer
    })

    const mapDispatchToProps = dispatch => ({
      dispatch: bindActionCreators(actions, dispatch)
    });
}

export default connect(mapStateToProps, mapDispatchToProps)(Home);

文艺写法

因为@connect()是超前的ES7写法, 所以需要使用babel转码. 在react-native项目目录下创建.babelrc文件, 内容:

{
  "presets": ["react-native"],
  "plugins": ["transform-decorators-legacy"]
}

因为connect是超前的ES7写法, 所以需要使用babel转码. 在react-native项目目录下创建.babelrc文件, 内容:

{
  "presets": ["react-native"],
  "plugins": ["transform-decorators-legacy"]
}

在组件中使用:

import { connect } from 'react-redux';
import { start, stop, reset } from './actions';

@connect(state => ({ timer: state.timer }))
class Home extends Component {

    ...

    // dispatch一个action
    this.props.dispatch(start());

    ...
}

export default Home;

或者:

import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as actions from './actions';

@connect(
  state => ({ timer: state.timer }),
  dispatch => bindActionCreators(actions, dispatch),
)
class Home extends Component {

    ...

    // dispatch一个action
    this.props.reset();

    ...
}

export default Home;

其中异同, 可以console.log(this.props);一下就能更清晰了.

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值