ReactNative 进阶（八）：connect

2022 年 1 月 08 日
本文字数：978 字
阅读完需：约 3 分钟

一、普通写法

原来在组件中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;