ホームページ > 記事 > ウェブフロントエンド > React-redux で Connect のデコレータを使用する方法
この記事では主に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 'react' import {render} from 'react-dom' import {connect} from 'react-redux' import {bindActionCreators} from 'redux' import action from 'action.js' @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 'react-redux' import {bindActionCreators} from 'redux' import action from 'action.js' export default connect( state=>state.main, dispatch=>bindActionCreators(action,dispatch) )vscode を使用している場合は、それを構成できますプロジェクトのルート ディレクトリに以下の jsconfig.json ファイルを追加して、コード警告を排除します:
import React from 'react' import {render} from 'react-dom' import connect from 'connect.js' @connect export default class App extends React.Component{ render(){ return <p>hello</p> } }OK、本当にここで終わりです。実際には、すべてのモジュールのすべてのコンポーネントで使用できるユニバーサル接続について引き続き考えることができます。この記事は書きません。機会があればもう一度書きます。 @ を js でデコレータと呼ぶのは良くないといつも感じていました。Java のようにアノテーションと呼ぶ方が良いでしょう。
関連する推奨事項:
MySQL データベース エラー: 接続が多すぎる解決策
mysqli_connect に関する 10 のコンテンツ推奨事項
以上がReact-redux で Connect のデコレータを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。