Quel est le '@' (symbole) dans le Redux @connecter décorateur?

Je suis en train d'apprendre Redux à Réagir et je suis tombé sur ce code. Je ne suis pas sûr si c'est Redux spécifiques ou pas, mais j'ai vu l'extrait de code suivant dans l'un des exemples.

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

Tandis que la fonctionnalité de connect est assez simple, mais je ne comprends pas le @ avant connect. Il n'est même pas un JavaScript opérateur si je ne me trompe pas.

Quelqu'un peut m'expliquer svp qu'est-ce et pourquoi est-il utilisé?

Mise à jour:

C'est en fait une partie de réagissent-redux qui est utilisé pour connecter une Réagir composant à un Redux magasin.

  • Je ne suis pas familier avec Redux, mais il ressemble à un décorateur. medium.com/google-developers/...
  • J'aime la façon dont cette nouvelle JavaScript monde, vous êtes à regarder le code de la moitié du temps et de la pensée "de quelle partie de la syntaxe de la langue est-ce?"
  • Lol, je suis profondément dans redux et des trucs maintenant. Mais à l'époque, je ne connaissais pas le décorateur la syntaxe n'a rien à voir avec redux. Son JavaScript. Content de voir que cette question est utile à beaucoup de gens comme moi. 🙂
  • Apparemment, le redux équipe décourage l'utilisation de se connecter en tant que décorateur pour le moment github.com/happypoulp/redux-tutorial/issues/87
InformationsquelleAutor Salman | 2015-09-18
  1. 353

    La @ symbole est en fait une expression JavaScript il est actuellement proposé pour signifier décorateurs:

    Décorateurs assurez-il possible d'annoter et modifier des classes et des propriétés au moment de la conception.

    Voici un exemple de configuration de Redux sans et avec un décorateur:

    Sans un décorateur

    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);

    À l'aide d'un décorateur

    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
}

    Les deux exemples ci-dessus sont équivalents, c'est juste une question de préférence. Aussi, le décorateur la syntaxe n'est pas intégré dans le code Javascript runtimes encore, et qui est encore au stade expérimental et sous réserve de modification. Si vous voulez l'utiliser, il est disponible à l'aide de Babel.

    • c'est génial
    • On peut même être plus laconique avec ES6 syntaxe. @connect( état => { return { todos: de l'état.todos }; }, expédition => { return {actions: bindActionCreators(actionCreators, expédition)}; } )
    • Si vous voulez vraiment être laconique, vous pouvez utiliser rendement implicite dans l'ES6. Il dépend de façon explicite que vous voulez être. @connect(state => ({todos: state.todos}), dispatch => ({actions: bindActionCreators(actionCreators, dispatch)}))
    • super réponse, l'amour de la comparaison d'échantillons de code!
    • Comment voulez-vous exporter les non-connectés composant pour les tests unitaires?
    • À l'aide d'un décorateur pour redux à réagir de la navigation peut être problématique, la meilleure pratique est d'utiliser la fonction ne pas le décorateur: github.com/react-community/react-navigation/issues/1180
    • merci pour bascule solution. son travail!!!
    • Les exemples sont vraiment utiles
    • Qu'est-ce que cela signifie "at design time"? Jamais entendu ce terme de la conception du temps. pouvez-vous l'expliquer?

    InformationsquelleAutor Tanner Semerad
  2. 42

    Très Important!

    Ces accessoires sont appelés état des accessoires et elles sont différentes de la normale accessoires, de tout changement à votre état des composants accessoires de déclencher la composante méthode render encore et encore, même si vous n'utilisez pas ces accessoires afin de des Raisons de Performances essayez de lier à votre composante de l'état des accessoires que vous avez besoin à l'intérieur de votre composant, et si vous utilisez un sous props lier ces accessoires.

    exemple:
    permet de dire à l'intérieur de votre composant que vous avez seulement besoin de deux accessoires:

    1. le dernier message
    2. le nom d'utilisateur

    ne pas faire cette 

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

    ce faire 

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