Informationen zum Verbinden von React-Redux in React und Redux (ausführliches Tutorial)

Dieser Artikel stellt hauptsächlich die Verbindung zwischen React und Redux vor, React-Redux. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor, um einen Blick darauf zu werfen

Ich habe mich schon früher mit React-bezogenen Dingen beschäftigt und habe ein SPA-Projekt in der Hand, also bin ich bereit, Redux auszuprobieren. Redux selbst hat keine Verbindung zu React. Es handelt sich um ein allgemeines Javascript-App-Modul, das für die App-Statusverwaltung verwendet wird. Um Redux in einem React-Projekt zu verwenden, besteht eine bessere Möglichkeit darin, die React-Redux-Bibliothek zum Verbinden zu verwenden. Das bedeutet, dass diese beiden Bibliotheken ohne React-Redux keine gewisse Kapselung bieten wissenschaftliche Art der Codeorganisation, die es uns ermöglicht, Redux im React-Code komfortabler zu verwenden.

Vorher habe ich React-Redux nur durch die Redux-Dokumentation kennengelernt. Nach einer gewissen Zeit der Übung werde ich mir den Quellcode ansehen und einige relevante Zusammenfassungen erstellen. Die npm-Version des Codes, die ich mir ansehe, ist v4.0.0, was bedeutet, dass die verwendete React-Version 0.14.x ist.

react-redux bietet zwei Schlüsselmodule: Provider und Connect.

Provider

Das Provider-Modul wird als Container der gesamten App verwendet. Es ist mit einer weiteren Ebene über Ihrem ursprünglichen App-Container verpackt Einfach, was bedeutet, dass der Redux-Store als Requisiten akzeptiert und als eines der Attribute des Kontexts deklariert wird. Nach der Deklaration von contextTypes können Unterkomponenten bequem über this.context.store auf den Store zugreifen. Unsere Komponenten müssen dies jedoch normalerweise nicht tun. Der Store wird für die folgende Verbindung in den Kontext gestellt.

Dies ist ein Beispiel für die Verwendung von Provider:

// config app root
const history = createHistory()
const root = (
 <Provider store={store} key="provider">
  <Router history={history} routes={routes} />
 </Provider>
)

// render
ReactDOM.render(
 root,
 document.getElementById(&#39;root&#39;)
)

connect

Dieses Modul ist eine echte Verbindung zwischen Redux und React, genau wie sein Name auch namens connect.

Überlegen Sie zunächst, wie Redux funktioniert: Zuerst wird ein Status im Store beibehalten, wir lösen eine Aktion aus und dann aktualisiert der Reduzierer den Status basierend auf dieser Aktion.

wird unserer React-Anwendung zugeordnet. Der im Store verwaltete Status ist unser App-Status. Eine React-Komponente dient als Ansichtsebene und erledigt zwei Aufgaben: Rendern und Reagieren auf Benutzervorgänge. Connect besteht also darin, die erforderlichen Daten im Store als Requisiten zum Rendern an die React-Komponente zu übergeben und den Aktionsersteller zu umschließen, um eine Aktion als Reaktion auf Benutzeroperationen auszulösen.

Okay, werfen wir einen detaillierten Blick auf die Funktionsweise des Verbindungsmoduls. Beginnen wir mit der Verwendung. Die API lautet wie folgt:

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

mapStateToProps ist eine Funktion, und der Rückgabewert stellt den Status dar, der in Requisiten zusammengeführt werden muss. Der Standardwert ist () => ({}), was bedeutet, dass nichts übergeben wird.

(state, props) => ({ }) // 通常会省略第二个参数

mapDispatchToProps kann eine Funktion sein, die nur die Requisiten zusammenführen muss. Der actionCreator sollte hier mit der Funktion „bindActionCreators“ gepackt werden.

(dispatch, props) => ({ // 通常会省略第二个参数
 ...bindActionCreators({
  ...ResourceActions
 }, dispatch)
})

Bequemer ist, dass Sie ein Objekt zu diesem Zeitpunkt direkt in eine Funktion umwandeln können. Diese Funktion ist genau die gleiche wie im obigen Beispiel.

mergeProps wird zum Anpassen des Zusammenführungsprozesses verwendet. Der Wert von parentProps ist der Props der Komponente selbst. Sie können feststellen, dass derselbe Name auf den Props der Komponente erscheint. es wird überschrieben.

(stateProps, dispatchProps, parentProps) => ({
 ...parentProps,
 ...stateProps,
 ...dispatchProps
})

Optionen haben zwei Schalter: pure gibt an, ob die Optimierung aktiviert werden soll. Die Standardeinstellung ist true, um der darin enthaltenen Komponente eine Referenz zu geben über die getWrappedInstance-Methode. Der Standardwert ist false.

connect gibt eine Funktion zurück, die den Konstruktor einer React-Komponente als Verbindungsobjekt akzeptiert und letztendlich den Konstruktor der verbundenen Komponente zurückgibt.

Dann ein paar Fragen:

1. Wie reagieren React-Komponenten auf Store-Änderungen?

2. Warum führt Connect einige Requisiten selektiv zusammen, anstatt den gesamten Status direkt zu übergeben?

3. Was bedeutet pure Optimierung?

Wir rufen die von connect Connector zurückgegebene Funktion auf. Sie gibt nicht nur die ursprüngliche Komponente zurück, sondern lauscht auch intern auf Änderungen Ermöglichen Sie den von ihr umhüllten Komponenten, auf Speicheränderungen zu reagieren:

trySubscribe() {
 if (shouldSubscribe && !this.unsubscribe) {
  this.unsubscribe = this.store.subscribe(::this.handleChange)
  this.handleChange()
 }
}

handleChange () {
 this.setState({
  storeState: this.store.getState()
 })
}

Aber normalerweise verbinden wir eine Containerkomponente, die nicht den gesamten App-Status trägt, aber unser Handler reagiert auf alle Statusänderungen, also was wir Optimierungsbedarf besteht darin, dass wir bei einer Änderung des StoreState die entsprechende React-Komponente nur dann neu rendern, wenn wir wirklich von diesem Teil der Zustandsänderung abhängig sind. Von welchem ​​Teil sind wir also wirklich abhängig? Es wird über mapStateToProps und mapDispatchToProps abgerufen.

Die spezifische Optimierungsmethode besteht darin, ShouldComponentUpdate einzuchecken, wenn sich die eigenen Requisiten der Komponente oder das Ergebnis von MapStateToProps-Änderungen oder das Ergebnis von MapDispatchToProps-Änderungen ändern .

Also für einen bestimmten Reduzierer:

export default (state = {}, action) => {
 return { ...state } // 返回的是一个新的对象，可能会使组件reRender
 // return state // 可能不会使得组件reRender
}

Achten Sie außerdem beim Herstellen einer Verbindung darauf, den Status oder die ActionCreators, die Sie wirklich benötigen, den Requisiten zuzuordnen, um unnötige Leistungseinbußen zu vermeiden.

Schließlich haben wir laut Connect-API herausgefunden, dass wir die ES7-Dekoratorfunktion verwenden können, um sie an die Schreibmethode von React ES6 anzupassen:

@connect(
 state => ({
  user: state.user,
  resource: state.resource
 }),
 dispatch => ({
  ...bindActionCreators({
   loadResource: ResourceActions.load
  }, dispatch)
 })
)
export default class Main extends Component {

}

Das Obige ist, was ich für alle zusammengestellt habe Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Zusammenfassung des JS-Sortieralgorithmus

So erstellen Sie einen Kegel mit JS+Canvas

So implementieren Sie Routing in Vue -router Lazy Loading

So implementieren Sie das Breakpoint-Debugging von TS-Dateien in Angular2

So implementieren Sie das Scrollen von Webseiten nach oben

Ordnerstrukturkonfiguration in Vue

Das obige ist der detaillierte Inhalt vonInformationen zum Verbinden von React-Redux in React und Redux (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!