O @
símbolo é de fato uma expressão JavaScript atualmente proposta para significar decoradores :
Os decoradores possibilitam anotar e modificar classes e propriedades em tempo de design.
Aqui está um exemplo de configuração do Redux sem e com um decorador:
Sem decorador
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);
Usando um decorador
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
}
Os dois exemplos acima são equivalentes, é apenas uma questão de preferência. Além disso, a sintaxe do decorador ainda não está incorporada em nenhum tempo de execução do Javascript e ainda é experimental e sujeita a alterações. Se você quiser usá-lo, ele estará disponível usando o Babel .