¿Qué es el '@' (símbolo de arroba) en el decorador @connect de Redux?
Estoy aprendiendo Redux con React y me topé con este código. No estoy seguro de si es específico de Redux o no, pero he visto el siguiente fragmento de código en uno de los ejemplos.
@connect((state) => {
return {
key: state.a.b
};
})
Si bien la funcionalidad connectes bastante sencilla, no entiendo lo @anterior connect. Ni siquiera es un operador de JavaScript si no me equivoco.
¿Alguien puede explicar qué es esto y por qué se usa?
Actualizar:
De hecho, es una parte del react-reduxcual se utiliza para conectar un componente de React a una tienda Redux.
De hecho, el @símbolo es una expresión de JavaScript propuesta actualmente para indicar decoradores :
Los decoradores permiten anotar y modificar clases y propiedades en tiempo de diseño.
A continuación se muestra un ejemplo de configuración de Redux con y sin un decorador:
sin 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 un 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
}
Los dos ejemplos anteriores son equivalentes, es sólo una cuestión de preferencia. Además, la sintaxis del decorador aún no está integrada en ningún motor de ejecución de Javascript y aún es experimental y está sujeta a cambios. Si quieres usarlo, está disponible usando Babel .
¡Muy importante!
Estos accesorios se llaman accesorios de estado y son diferentes de los accesorios normales, cualquier cambio en los accesorios de estado de su componente activará el método de renderizado del componente una y otra vez incluso si no usa estos accesorios, por lo que, por razones de rendimiento, intente vincularse solo a su componente. los accesorios de estado que necesita dentro de su componente y, si usa accesorios secundarios, solo vincula estos accesorios.
Ejemplo: digamos que dentro de tu componente solo necesitas dos accesorios:
- el ultimo mensaje
- el nombre de usuario
no hagas esto
@connect(state => ({
user: state.user,
messages: state.messages
}))
hacer esto
@connect(state => ({
user_name: state.user.name,
last_message: state.messages[state.messages.length-1]
}))
