So verwenden Sie den Connect-Dekorator in React-Redux

In diesem Artikel wird hauptsächlich die Verwendung des @connect-Dekorators in React-Redux ausführlich erläutert. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Ich habe kürzlich über einige Tipps in React nachgedacht. In diesem Artikel wird beschrieben, wie man Dekoratoren zum Schreiben von Connect in Redux verwendet.

Normalerweise benötigen wir einen Reduzierer und eine Aktion und verwenden dann connect, um Ihre Komponente zu verpacken. Angenommen, Sie haben bereits einen Reduzierer mit dem Schlüssel main und einer action.js. Unsere App.js ist im Allgemeinen so geschrieben:

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, das ist nicht der Fall Arbeit Was für ein Problem. Kommt Ihnen die Verwendung von connect bekannt vor? Es ist eine typische Verpackung. Ich muss sie hier mit Dekorateuren dekorieren:

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

Es sieht jetzt bequem aus. In unserem eigentlichen Projekt gibt es möglicherweise viele kleine Komponenten unter einem Modul, und alle haben die gleiche Aktion und den gleichen Reduzierer. Ist es etwas zu mühsam, dies in jede Komponente zu schreiben? Es gibt zu viel redundanten Code.

Tatsächlich können Sie connect.js extrahieren:

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

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

und es dann in den benötigten Komponenten verwenden zu verwenden. :

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

Das ist im Vergleich zur ursprünglichen Verwendung offensichtlich anspruchsvoller und einfacher zu verwenden.

Es ist zu beachten, dass hier Dekoratoren verwendet werden und das Modul babel-plugin-transform-decorators-legacy installiert und dann in babel konfiguriert werden muss:

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

Wenn Sie vscode verwenden, können Sie die Datei jsconfig.json im Stammverzeichnis des Projekts hinzufügen, um Codewarnungen zu beseitigen:

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

ok, Hier ist es. Es ist wirklich vorbei. Tatsächlich können Sie weiterhin über Connect nachdenken. Sie können beispielsweise eine universelle Verbindung schreiben, die von allen Komponenten in allen Modulen verwendet werden kann. Ich werde diesen Artikel nicht weiter schreiben, wenn ich die Gelegenheit dazu habe.

Ich hatte immer das Gefühl, dass es nicht gut ist, dieses Ding in js als Dekorator zu bezeichnen. Es wäre besser, es Annotation wie in Java zu nennen.

Verwandte Empfehlungen:

Detaillierte Erklärung zum Hochladen von HttpURLConnection-Anhängen in Java

MySQL-Datenbankfehler: Lösung für zu viele Verbindungen

10 empfohlene Inhalte von mysqli_connect

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den Connect-Dekorator in React-Redux. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!