The @
simbol sebenarnya ekspresi JavaScript saat ini diusulkan untuk menandakan dekorator :
Dekorator memungkinkan untuk membuat anotasi dan memodifikasi kelas dan properti pada waktu desain.
Berikut adalah contoh pengaturan Redux tanpa dan dengan dekorator:
Tanpa dekorator
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);
Menggunakan dekorator
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
}
Kedua contoh di atas setara, hanya masalah preferensi. Juga, sintaksis dekorator belum dibangun ke dalam runtime Javascript apa pun, dan masih bersifat eksperimental dan dapat berubah. Jika Anda ingin menggunakannya, itu tersedia menggunakan Babel .