[解決済み】Reduxの@connectデコレーターの「@」（アットマーク）って何？

質問

私はReactとReduxを学んでおり、このコードに遭遇しました。私はそれがあるかどうかわからない リダックス しかし、私はある例で以下のコードスニペットを見たことがあります。

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

の機能は connect はとてもわかりやすいのですが、その分 @ 前に connect . 間違っていなければ、JavaScriptの演算子でもないのですが。

これは何なのか、なぜ使われるのか、誰か説明してください。

更新しました。

の一部であり、実際には react-redux これは、ReactコンポーネントをReduxのストアに接続するために使用されます。

解決方法は？

その @ 記号は、実際にはJavaScriptの式である を意味するものとして提案されています。 デコレーター :

デコレーターは、設計時にクラスやプロパティにアノテーションを付けたり、変更したりすることを可能にします。

Reduxをデコレーターなしとデコレーターありで設定した例です。

デコレータを使用しない場合

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

デコレータを使用する

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
}

上の例はどちらも同等で、好みの問題です。また、デコレータ構文はまだどのJavascriptランタイムにも組み込まれておらず、実験的なもので、変更される可能性があります。もし使いたいのであれば、次のようにしてください。 バベル .