Über die Verwendung von Connect Decorator in React-Redux

Dieser Artikel stellt hauptsächlich die detaillierte Erklärung der Verwendung des @connect-Dekorators in React-Redux vor. Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.

Ich habe kürzlich über einige Tipps in React nachgedacht. In diesem Artikel wird beschrieben, wie man mit Dekoratoren eine Verbindung in Redux schreibt.

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 kein Problem. Kommt Ihnen die Verwendung von connect bekannt vor? Es ist eine typische Verpackung. Ich muss sie hier mit einem Dekorateur 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 ist fertig und sieht gemütlich 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 die Verbindung extrahieren. Schreiben Sie beispielsweise eine 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)
)

und verwenden Sie sie dann in den Komponenten, die verwendet werden müssen:

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 in Ordnung. Ist es im Vergleich zur ursprünglichen Verwendung offensichtlich anspruchsvoller und einfacher zu verwenden?

Es ist zu beachten, dass hier Dekoratoren verwendet werden. Sie müssen das Modul babel-plugin-transform-decorators-legacy installieren und es dann in babel konfigurieren:

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

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

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

ok, es ist wirklich hier drüben. 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.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Ausführliche Antwort: Welche Auswirkungen haben Änderungen in Vue auf Komponenten?

So verpacken Sie mit Parcel

Detaillierte Erklärung zur Konfiguration des Verpackungstools in Vue

In vue So implementieren Sie die Überwachung, um Datenänderungen automatisch zu erkennen

Das obige ist der detaillierte Inhalt vonÜber die Verwendung von Connect Decorator in React-Redux. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!