Redux@connect装饰器中的“@”（at符号）是什么？

Question

@connect((state) => {
  return {
    key: state.a.b
  };
})

它实际上是react-redux的一部分，用于将React组件连接到Redux存储。

Answer 1

@符号实际上是一个JavaScript表达式，目前建议用于表示修饰符：

修饰器使得在设计时注释和修改类和属性成为可能。

下面是不使用装饰器和使用装饰器设置Redux的示例：

import React from 'react';
import * as actionCreators from './actionCreators';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

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

function mapDispatchToProps(dispatch) {
  return { actions: bindActionCreators(actionCreators, dispatch) };
}

class MyApp extends React.Component {
  // ...define your main app here
}

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

import React from 'react';
import * as actionCreators from './actionCreators';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

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

function mapDispatchToProps(dispatch) {
  return { actions: bindActionCreators(actionCreators, dispatch) };
}

@connect(mapStateToProps, mapDispatchToProps)
export default class MyApp extends React.Component {
  // ...define your main app here
}