ReactNative进阶（八）：redux在react-native上的connect使用

快来打我* 2023-01-16 14:26 261阅读 0赞

## 普通写法 ##

原来在组件中`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);`一下就能更清晰了。

## 拓展阅读 ##

*  《[React进阶（九）：React-Redux][React_React-Redux]》

[React_React-Redux]: https://shq5785.blog.csdn.net/article/details/105164813