ReactNative之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"]
}

并在package.json中添加插件:

"devDependencies": {
    ...
    "babel-plugin-transform-decorators-legacy": "^1.3.4"
}

在组件中使用:

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);一下就能更清晰了。

三、语法学习

对于第一次接触ReactNative的同学，最痛苦的是什么时候使用{}，什么时候使用(),当然我也经历过那段时间，为此简单总结了下。

• ReactNative中，使用表达式的时候需要用{}包住；

style={styles.mainStyle}

• ReactNative中,在字符串中使用变量的时候，需要用{}包住;

var str = 'hello'
<Text>{str}</Text>

• ReactNative中，对象，字典需要用{}包住;

style = {}, // 最外层表达式，用{}包住
{flex:1}, // 对象，用{}包住
<View style={{flex:1}}></View>

• 创建组件<View></View>，必须要用()包住;
  因此只要返回组件，都需要用()。

render(){
    return (
        <View style={styles.mainStyle}>
        </View>
    )
}

四、拓展阅读

• 《React进阶（九）：React-Redux》
• React 教程
• ReactNative 教程