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

普通写法

原来在组件中connect连接redux的写法是:

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写法,"plugins": ["transform-decorators-legacy"] }

在组件中使用:

import { connect } from 'react-redux';
import { start,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);一下就能更清晰了.