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 のようにアノテーションと呼ぶ方が良いでしょう。

関連する推奨事項:

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

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

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

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