React-redux での Connect Decorator の使用について

この記事では、react-redux での @connect デコレーターの使用方法の詳細な説明を主に紹介し、参考として提供します。

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

通常、リデューサーとアクションが必要で、その後、connect を使用してコンポーネントをラップします。 main キーと action.js を持つリデューサーがすでにあるとします。App.js は通常次のように記述します:

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)

ok なので問題ありません。 connect の使い方を見ていると、見覚えがありませんか?ここではデコレータを使用して装飾する必要があります。

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>
  }
}

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

実際には、connect.js を作成します:

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

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

それを、使用する必要があるコンポーネントで使用します:

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>
  }
}

これは、最初の使用法と比較すると問題ありません。明らかにもっと大げさで使いやすいですよね？

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

{
  "plugins":[
    "transform-decorators-legacy"
  ]
}

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

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

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

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

上記は私があなたのためにまとめたものです。

関連記事:

詳細な回答: vue の変更はコンポーネントにどのような影響を与えますか?

Parcelを使ってパッケージ化する方法

Vueでのパッケージングツールの設定方法の詳しい説明

Vueでデータの変更を自動的に検出するwatchの実装方法

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