Что такое '@' (в символе) в декораторе Redux @connect?

Я изучаю Redux с React и наткнулся на этот код. Я не уверен, если это специфичным для Redux или нет, но я видел следующий фрагмент кода в одном из примеров.

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

Хотя функциональность connect довольно проста, но я не понимаю, @прежде чем connect. Это даже не оператор JavaScript, если я не ошибаюсь.

Может кто-нибудь объяснить, пожалуйста, что это такое и почему оно используется?

Обновить:

Фактически это часть, react-reduxкоторая используется для подключения компонента React к хранилищу Redux.

@Символ в действительности выражение 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
}

Оба приведенных выше примера эквивалентны, это просто вопрос предпочтений. Кроме того, синтаксис декоратора еще не встроен ни в одну среду исполнения Javascript и все еще является экспериментальным и может быть изменен. Если вы хотите использовать его, он доступен с помощью Babel .

Очень важно!

Эти реквизиты называются реквизитами состояния, и они отличаются от обычных реквизитов, любое изменение в реквизитах состояния вашего компонента будет снова и снова запускать метод рендеринга компонента, даже если вы не используете эти реквизиты, поэтому в целях повышения производительности попытайтесь привязать только к вашему компоненту реквизиты состояния, которые вам нужны внутри вашего компонента, и, если вы используете субпроп, привязывайте только эти реквизиты.

пример: скажем, внутри вашего компонента вам нужно только два реквизита:

1. последнее сообщение
2. Имя пользователя

не делай этого

@connect(state => ({ 
   user: state.user,
   messages: state.messages
}))

сделай это

@connect(state => ({ 
   user_name: state.user.name,
   last_message: state.messages[state.messages.length-1]
}))