Co to jest „@” (symbol) w dekoratorze Redux @connect?

Uczę się Redux z React i natknąłem się na ten kod. Nie jestem pewien, czy jest on specyficzny dla Redux, czy nie, ale widziałem następujący fragment kodu w jednym z przykładów.

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

Chociaż funkcjonalność connectjest dość prosta, ale nie rozumiem @wcześniej connect. To nie jest nawet operator JavaScript, jeśli się nie mylę.

Czy ktoś może wyjaśnić, co to jest i dlaczego jest używane?

Aktualizacja:

Jest to w rzeczywistości część, react-reduxktóra służy do połączenia komponentu React ze sklepem Redux.

Ten @symbol jest w rzeczywistości wyrażeniem JavaScript proponowanym obecnie dla oznaczenia dekoratorów :

Dekoratorzy umożliwiają dodawanie adnotacji i modyfikowanie klas i właściwości w czasie projektowania.

Oto przykład konfiguracji Redux bez i z dekoratorem:

Bez dekoratora

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

Korzystanie z dekoratora

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
}

Oba powyższe przykłady są równoważne, to tylko kwestia preferencji. Ponadto składnia dekoratora nie jest jeszcze wbudowana w żadne środowiska wykonawcze JavaScript i jest nadal eksperymentalna i może ulec zmianie. Jeśli chcesz go użyć, jest on dostępny przy użyciu Babel .

Bardzo ważne!

Te rekwizyty są nazywane rekwizytami stanowymi i różnią się od zwykłych rekwizytów, każda zmiana rekwizytów stanu komponentu będzie wywoływać metodę renderowania komponentu raz po raz, nawet jeśli nie użyjesz tych rekwizytów, dlatego ze względów wydajnościowych spróbuj powiązać tylko komponent rekwizyty stanu, których potrzebujesz w swoim komponencie, a jeśli używasz rekwizytów podrzędnych, wiąż te rekwizyty.

przykład: powiedzmy, że w twoim komponencie potrzebujesz tylko dwóch rekwizytów:

1. ostatnia wiadomość
2. Nazwa użytkownika

nie rób tego

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

Zrób to

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