Qual è il ‘@’ (al simbolo) nel decoratore di Redux @ connect?

Sto imparando Redux con React e sono incappato in questo codice. Non sono sicuro che sia Redux specifico o no, ma ho visto il seguente frammento di codice in uno degli esempi.

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

Mentre la funzionalità di connect è piuttosto semplice, ma non capisco la @ prima della connect . Non è nemmeno un operatore JavaScript se non sbaglio.

Qualcuno può spiegare per favore cos’è questo e perché viene usato?

Aggiornare:

È infatti una parte di react-redux che viene utilizzata per connettere un componente React a un negozio Redux.

Il simbolo @ è in effetti un’espressione JavaScript attualmente proposta per indicare i decoratori :

I decoratori rendono ansible annotare e modificare classi e proprietà in fase di progettazione.

Ecco un esempio di impostazione di Redux senza e con un decoratore:

Senza un decoratore

 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); 

Utilizzando un decoratore

 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 } 

Entrambi gli esempi sopra sono equivalenti, è solo una questione di preferenza. Inoltre, la syntax del decoratore non è ancora incorporata in un runtime Javascript, ed è ancora sperimentale e soggetta a modifiche. Se vuoi usarlo, è disponibile usando Babel .

Molto importante!

Questi oggetti di scena sono definiti oggetti di scena e sono diversi dai normali oggetti di scena, qualsiasi modifica ai puntelli di stato dei componenti innescherà il metodo di rendering dei componenti ancora e ancora anche se non si utilizzano questi oggetti di scena, quindi per i motivi di prestazioni provare a collegarli al componente solo gli oggetti di scena di cui hai bisogno all’interno del tuo componente e se usi un object ausiliare leghi solo questi oggetti di scena.

esempio: diciamo che all’interno del tuo componente hai solo bisogno di due oggetti di scena:

  1. l’ultimo messaggio
  2. il nome utente

non farlo

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

Fai questo

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