web-dev-qa-db-fra.com

Quel est le "@" (au symbole) dans le décorateur Redux @connect?

J'apprends Redux avec React et suis tombé sur ce code. Je ne suis pas sûr que ce soit Redux spécifique ou non, mais j'ai vu l'extrait de code suivant dans l'un des exemples.

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

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

Quelqu'un peut-il expliquer s'il vous plaît qu'est-ce que c'est et pourquoi est-il utilisé?

Mise à jour:

C'est en fait une partie de react-redux qui est utilisé pour connecter un composant React à un magasin Redux.

javascriptreactjsdecoratorredux
210
Salman

Le symbole @ est en fait une expression JavaScript il est actuellement proposé de désigner les décorateurs :

Les décorateurs permettent d’annoter et de modifier des classes et des propriétés au moment de la conception.

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

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

Utiliser 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. En outre, la syntaxe de décorateur n'est pas encore intégrée dans les exécutions Javascript, elle est encore expérimentale et sujette à modification. Si vous voulez l'utiliser, il est disponible en utilisant Babel .

359
Tanner Semerad

Très important!

Ces accessoires s'appellent des accessoires d'état et ils diffèrent des accessoires habituels. Toute modification de vos accessoires d'état de composant déclenchera la méthode de rendu des composants encore et encore, même si vous n'utilisez pas ces accessoires, donc Raisons de la performance essayez de lier à votre composant uniquement les accessoires d'état dont vous avez besoin à l'intérieur de votre composant et si vous utilisez un accessoire secondaire, ne liez que ces accessoires.

exemple: disons qu'à l'intérieur de votre composant, vous n'avez besoin que de deux accessoires:

  1. le dernier message
  2. l'identifiant

ne fais pas ça

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

faire ceci

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