Redux的 connect 与 @connect

connect

connect函数的主要作用就是将store中的数据传递到props中。在组件中使用connect后就可以在this.props中访问到store中的数据了。

例子如下：

//MyApp.jsx
import React from 'react';
import action from ‘action’
import { connect } from 'react-redux';

function mapStateToProps(state) {
  return { todos: state.todos };
}

function mapDispatchToProps(dispatch) {
  return { actions: action();
}

class MyApp extends React.Component {

}

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

connect()函数的参数为：

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
           

其中后两个参数一般被忽略。

• [mapStateToProps]是一个函数，返回值必须为一个纯对象，这个对象会被合并到组件的props中。当Redux store发生变化时，mapStateToProps就会被调用。
• [mapDispatchToProps]一般是一个对象（或者是一个函数，函数的返回值为对象），对象的值是函数，当这些函数执行时，返回值会被合并到组件的props中。

@connect

@称为 装饰器（Decorator），是ES6中的语法，主要用来注释或修改类和类方法。

装饰器是一种函数，写成@ + 函数名。它可以放在类和类方法的定义前面。

使用装饰器之后：

//MyApp.jsx
import React from 'react';
import action from ‘action’
import { connect } from 'react-redux';

function mapStateToProps(state) {
  return { todos: state.todos };
}

function mapDispatchToProps(dispatch) {
  return { actions: action();
}

@connect(mapStateToProps, mapDispatchToProps)
export default class MyApp extends React.Component {
  
}
           

在使用了@之后就不需要在connect()(MyApp)后再加一个参数：组件名(MyApp）了。