¿Qué hace el símbolo at ( @ ) en javascript ES6? (ECMAScript 2015)


Estoy viendo algún código ES6 y no entiendo lo que hace el símbolo @ cuando se coloca delante de una variable. ¿Lo más parecido que pude encontrar tiene algo que ver con campos privados?

Código que estaba mirando de la biblioteca redux :

import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'redux/react';
import Counter from '../components/Counter';
import * as CounterActions from '../actions/CounterActions';

@connect(state => ({
  counter: state.counter
}))
export default class CounterApp extends Component {
  render() {
    const { counter, dispatch } = this.props;
    return (
      <Counter counter={counter}
               {...bindActionCreators(CounterActions, dispatch)} />
    );
  }
}

Aquí hay una entrada de blog que encontré sobre el tema: https://github.com/zenparsing/es-private-fields

En esta entrada de blog todos los ejemplos están en el contexto de una clase - ¿qué significa cuando el símbolo es utilizado dentro de un módulo?

Author: bambam, 2015-08-05

2 answers

Es un decorador . Es una propuesta para ser agregada a ECMAScript. Hay varios ejemplos equivalentes a ES6 y ES5 en: https://github.com/wycats/javascript-decorators

Los decoradores alteran dinámicamente la funcionalidad de una función, método o clase sin tener que usar directamente subclases o cambiar el código fuente de la función que se está decorando.

Se utilizan comúnmente para controlar el acceso, registro, anotación.

 30
Author: Kit Sunde,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-03-05 02:29:34

Encontré que la respuesta aceptada no era suficiente para ayudarme a resolver esto, así que estoy agregando un poco más de detalle para ayudar a otros que encuentren esto.

El problema es que no está claro exactamente ¿qué es el decorador. El decorador en el ejemplo dado no es solo el símbolo @, es la función @connect. En pocas palabras, la función @connect es decorando la clase CounterApp.

Y qué está haciendo en este caso? Es conectando el valor state.counter a los apoyos de la clase. Recuerde que en redux la función connect toma dos argumentos: mapStateToProps y mapDispatchToProps. En este ejemplo, está tomando solo un argumento - mapStateToProps.

No he investigado esto demasiado, pero esto parece ser una manera de encapsular sus asignaciones de estado a props y de despacho a props para que acompañen a sus componentes en lugar de estar ubicados en un archivo diferente.

 62
Author: Kryten,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-05-24 14:49:27