Qual è il '@' (simbolo) nel decoratore Redux @ connect?

Question

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

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

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

Qualcuno può spiegare per favore cos'è questo e perché viene utilizzato?

Aggiornamento:

Si tratta infatti di una parte del react-redux che viene utilizzato per collega un componente Reagire a un negozio di Redux.

Answer 1

Il @ simbolo è in realtà un'espressione JavaScript currently proposed to signify decorators:

decoratori permettono di annotare e modificare le classi e le proprietà in fase di progettazione.

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

Senza 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 un ma di preferenza. Inoltre, la sintassi del decoratore non è ancora incorporata in un runtime Javascript, ed è ancora sperimentale e soggetta a modifiche. Se si desidera utilizzarlo, è disponibile utilizzando Babel.

Answer 2

Molto importante!

Questi puntelli sono chiamati oggetti di scena dello stato e sono diversi dai normali oggetti di scena, ogni modifica alle vostre puntelli stato del componente attiverà la componente metodo Render ancora e ancora, anche se non si utilizzano questi puntelli così per motivi di prestazioni prova a legare al tuo componente solo gli oggetti di scena di cui hai bisogno all'interno del tuo componente e se usi un oggetto ausiliare leghi solo questi oggetti di scena.

esempio: permette di dire dentro il componente è necessario solo due oggetti di scena:

1. l'ultimo messaggio
2. il nome utente

Non fare questo

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

fare questo

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