Co to jest " @ " (symbol at) w dekoratorze Redux @connect?

Question

Co to jest " @ " (symbol at) w dekoratorze Redux @connect?

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

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

Podczas gdy funkcjonalność connect jest dość prosta, ale nie rozumiem @ przed connect. Nie jest to nawet operator JavaScript, jeśli się nie mylę.

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

Aktualizacja:

Jest w fakt część react-redux który jest używany do łączenia komponentu Reactowego ze sklepem Redux.

232

javascript decorator redux reactjs

Author: Felix Kling, 2015-09-18

Source

2 answers

Bardzo Ważne!

Te rekwizyty nazywane są rekwizytami stanowymi i różnią się od zwykłych rekwizytów, każda zmiana w Twoich rekwizytach stanowych spowoduje wywołanie metody renderowania komponentu, nawet jeśli nie używasz tych rekwizytów, więc ze względu na wydajność spróbuj powiązać ze swoim komponentem tylko rekwizyty stanowe, które potrzebujesz w swoim komponencie, a jeśli używasz sub rekwizytów, to tylko te rekwizyty.

Przykład: powiedzmy, że wewnątrz twojego komponentu potrzebujesz tylko dwóch rekwizyty:

Ostatnia wiadomość
nazwa użytkownika

Nie rób tego

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

Do this

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

52

Author: Fareed Alnamrouti,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-04-09 16:53:14

score 382 · Accepted Answer

Symbol @ jest w rzeczywistości wyrażeniem JavaScript obecnie proponowanym do oznaczenia dekoratorów:

Dekoratory umożliwiają adnotację i modyfikację klas i właściwości w czasie projektowania.

Oto przykład ustawienia 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. Również, składnia dekoratora nie jest jeszcze wbudowana w żadne środowiska uruchomieniowe Javascript i nadal jest eksperymentalna i może ulec zmianie. Jeśli chcesz go użyć, jest on dostępny za pomocą Babel .