ホームページ  >  記事  >  ウェブフロントエンド  >  React-redux で Connect のデコレータを使用する方法

React-redux で Connect のデコレータを使用する方法

小云云
小云云オリジナル
2018-01-15 09:01:161750ブラウズ

この記事では主にreact-reduxにおける@connectデコレータの使い方の詳細な説明を紹介していますが、編集者がとても良いと思ったので、参考として共有させていただきます。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

最近、react でのいくつかのヒントについて考えています。この記事は、デコレーターを使用して redux で connect を記述する方法を記録します。

通常、リデューサーとアクションが必要で、その後、connect を使用してコンポーネントをラップします。 main キーと action.js を持つリデューサーがすでにあるとします。App.js は通常次のように書かれているので、問題ありません。 connect の使い方を見ていると、見覚えがありませんか?ここではデコレータを使用して装飾する必要があります。


import React from 'react'
import {render} from 'react-dom'
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import action from 'action.js'

class App extends React.Component{
  render(){
    return <p>hello</p>
  }
}
function mapStateToProps(state){
  return state.main
}
function mapDispatchToProps(dispatch){
  return bindActionCreators(action,dispatch)
}
export default connect(mapStateToProps,mapDispatchToProps)(App)

完成しました。見た目も快適です。実際のプロジェクトでは、1 つのモジュールの下に多数の小さなコンポーネントがあり、それらはすべて同じアクションとリデューサーを共有します。これを各コンポーネントに記述するのは少し面倒でしょうか。冗長なコードが多すぎます。

実際には、connect.js を作成して、それを使用する必要があるコンポーネントで使用することができます:


import React from &#39;react&#39;
import {render} from &#39;react-dom&#39;
import {connect} from &#39;react-redux&#39;
import {bindActionCreators} from &#39;redux&#39;
import action from &#39;action.js&#39;

@connect(
 state=>state.main,
 dispatch=>bindActionCreators(action,dispatch)
)
class App extends React.Component{
  render(){
    return <p>hello</p>
  }
}

これは問題ありません。オリジナルの使い方と比べると、明らかに派手で使いやすいですか?

ここではデコレーターが使用されており、モジュール babel-plugin-transform-decorators-legacy をインストールして babel で構成する必要があることに注意してください:


import {connect} from &#39;react-redux&#39;
import {bindActionCreators} from &#39;redux&#39;
import action from &#39;action.js&#39;

export default connect(
 state=>state.main,
 dispatch=>bindActionCreators(action,dispatch)
)

vscode を使用している場合は、それを構成できますプロジェクトのルート ディレクトリに以下の jsconfig.json ファイルを追加して、コード警告を排除します:


import React from &#39;react&#39;
import {render} from &#39;react-dom&#39;
import connect from &#39;connect.js&#39;

@connect
export default class App extends React.Component{
  render(){
    return <p>hello</p>
  }
}

OK、本当にここで終わりです。実際には、すべてのモジュールのすべてのコンポーネントで使用できるユニバーサル接続について引き続き考えることができます。この記事は書きません。機会があればもう一度書きます。

@ を js でデコレータと呼ぶのは良くないといつも感じていました。Java のようにアノテーションと呼ぶ方が良いでしょう。


関連する推奨事項:

Java での HttpURLConnection 添付ファイルのアップロードの詳細な説明


MySQL データベース エラー: 接続が多すぎる解決策

mysqli_connect に関する 10 のコンテンツ推奨事項

以上がReact-redux で Connect のデコレータを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。