es6のデコレータはどのように機能しますか？

Question

私はReduxのを学習し、この署名でドキュメントの使用connectでその例を参照してくださいよ：私は

const VisibleTodoList = connect(
    mapStateToProps, 
    mapDispatchToProps 
)(TodoList) 

しかし、他のリポジトリから他の場所で私もthis-

@connect(mapStateToProps, mapDispatchToProps) 

を見てきましたそこに同じことをしてくださいが、デコレータの署名はどのように機能しますか？それは接続の結果に変数を設定しているように見えませんので、@connectの機能はどこに行き、割り当てられますか？

Answer 1

デコレータは、次ので動作する単なる高次関数です。

この

は一種の（ない本当にソートの、それはある）浮気されたが、我々はあなただけの単純な値を使用してについて推論できた形式にこれを単純化した場合：

const add = x => y => x + y; 

Addが期待する関数ですxを返し、y、
を返し、次にx + yを返す関数を返します。
あなたは

add(1)(2); // 3 

または

const add1 = add(1); 
add1(2); // 3 

しかし、我々は最後の値を渡すことを期待していないJSを伝えるのいくつかの方法があったが、代わりにちょうどそれが持っているものを実行する場合は何のようにそれを呼び出すことができますそれは次のことです。私が言ったように

@add(1) 
2; // 3 

@add1 
2; // 3 

は、この例では、実際に（デコレータ機能は本当にクラスやメソッドやパラメータを変更すると、そんなに二つの数字を追加するためのものではないことで）このように動作しますが、それはありませんデコレータの背後にある基本的なコンセプトです。

@connect(mapProps, mapHandlers) 
MyComponent; 

は、[の

connect(mapProps, mapHandlers)(MyComponent); 

Answer 2

理論的に理解できない場合は、ビジュアルが役立つかもしれません。あなたはredux-formを使用し、あなたのページのフォームに接続して反応を自動入力するとします。あなたはそれを使用するためにデコレータを使用することができます。デコレータなし

@connect(mapStateToProps, mapDispatchToProps) 
@autofill 
@reduxForm({form: 'somethingForm', enableReinitialize: true}) 
class Something extends React.Component { 
    .... 
} 

これに相当するので、このようにそれを考える

class Something extends React.Component { 
    .... 
} 
Something = reduxForm({ 
    form: 'somethingForm', 
    enableReinitialize: true 
})(Something); 
Something = connect(mapStateToProps, mapDispatchToProps)(autofill(Something)); 

だろう。トップからボトムまでは、各機能のアプリケーションの観点から最優先です。あなたはreduxFormを適用した後、自動入力し、両方の場合に接続します。デコレータは、書くのが簡単になるだけでなく、乱雑さの少ないコードも作成します。