Що означає "@" (у символі) в декораторі 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]
}))