Redux的 connect 与 @connect_redux中的connect不传参数-CSDN博客

本文链接：https://blog.csdn.net/yjjjjz/article/details/103427277

本文详细介绍了React-Redux中connect函数的作用及使用方法，包括如何将store数据映射到组件props，以及如何处理dispatch操作。通过实例展示了mapStateToProps和mapDispatchToProps的用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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）了。