Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

ReactJS lernen

Redux in Kombination mit React

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Redux ist grundsätzlich unabhängig von React, beide passen dennoch gut zusammen. Sehen Sie in diesem Video, wie Sie Ihre React-Anwendung mit einer Zustandsverwaltung per Redux ausstatten.
10:12

Transkript

In diesem Video lernen Sie, wie einfach es ist, Redux mit React zu kombinieren. Unsere Ausgangssituation ist, dass wir bereits Aktionen und Action-Creators definiert haben. Und wir haben auch bereits zwei Reducer definiert und gemeinsam in einen Haupt-Reducer kombiniert mit combineReducers. Jetzt stellt sich die Frage, wie wir dieses Redux-Prinzip mit React kombinieren. Also wie kommt der Zustand aus dem Redux-Store in unsere React-Komponenten? Die Antwort ist ganz einfach. Der Zustand wird über Props in unsere Komponenten injiziert. Das heißt, wir müssen jetzt erstmal einige Veränderungen an unseren Komponenten vornehmen, damit sie auf das Schema von Redux passen. Wir können also aus unseren Komponenten alles das entfernen, was bisher mit Zustand zu tun gehabt hat, beziehungsweise mit dem state-Objekt, this.state, und können uns darauf verlassen, dass diese Informationen ab jetzt über Props hineinkommen. Das sehen wir beispielsweise hier beim Rendern des Product-Listings. Bisher hatten wir hier this.state.products. Jetzt nehmen wir an, wir bekommen diese Informationen über this.props.products. Das Gleiche gilt für unsere Event-Handler. Diese schreiben wir auch nicht mehr explizit in die Klasse rein, sondern wir gehen davon aus, dass sie über props injiziert werden. Hier beispielsweise zum Löschen des ersten Products nehmen wir an, dass wir eine Funktion haben, this.props.onProductRemove. Die bekommt natürlich den Index des Produkts, das removed werden soll, in dem Fall Index 0 für Remove first. Damit das Ganze funktionieren kann, müssen wir jetzt noch eine Art Redux-Wrapper für unsere App.js schreiben, das heißt die Funktionalität von Redux auf unsere App.js anwenden. Dazu haben wir die Klasse ReduxApp. Wie Sie sehen, ist das Ganze schnell gemacht. Die drei Bestandteile in dieser Datei sind jetzt einerseits die Methode connect, die aus dem Paket react-redux kommt, und andererseits zwei von uns definierte Funktionen, nämlich mapStateToProps und mapDispatchToProps. Und genau diese beiden Funktionen definieren einerseits: Wie werden die Props für unsere App aus dem globalen State befülllt? Und mapDispatchToProps beschreibt: Wie funktionieren die Event-Handler in den Props unserer App? Wie ist mapStateToProps aufgebaut? Wir returnen einfach ein Objekt. Die Keys in diesem Objekt werden genauso später in der App über this.props zugreifbar sein. Also da wir hier products geschrieben haben, wird diese Eigenschaft auch hier products heißen in den props. Und im Value geben wir an, wo das Ganze aus dem State herkommt. Wir wissen, dass der State so aufgebaut ist, dass er einerseits eine Eigenschaft products hat und andererseits eine Eigenschaft addProductForm. Wir brauchen hier state.products, also die Liste der Products. Bei mapDispatchToProps haben wir eine ähnliche Struktur. Hier kommt die Funktion dispatch als Eingabe. Und wir returnen wieder ein Objekt. Die Keys geben an, wie die Props später in der App heißen werden. Und der Value ist nun der Inhalt des Event-Handlers. Wir haben hier gesehen, dass wir davon ausgehen, dass onProductRemove ein Argument entgegennimmt, nämlich den Index des Produkts, das wir removen wollen. Und genau das nehmen wir hier entgegen. Und was wir hier tatsächlich tun, ist, wir dispatchen die Ausführung folgender Aktion. Wir haben ACTIONS oben importiert. Deshalb können wir den Action-Creator removeProduct benutzen. Und diesem übergeben wir den index des Produkts, das wir removen wollen. Wir können auch gern nochmal einen kurzen Blick in die actions.js werfen. Wir haben hier ACTIONS.removeProduct importiert. removeProduct befindet sich hier. Es nimmt einen index entgegen und returnt ein Objekt mit dem Typ REMOVE_PRODUCT und mit dem index. Und genau diese Aktion werden wir hier dispatchen, also an den Store übergeben. Der Store wird also dann, wenn die dispatch-Funktion aufgerufen wird, diese Aktion bekommen und sie an den richtigen Reducer weiterleiten. Nachdem wir diese Funktionen definiert haben, können wir jetzt connect aufrufen. connect bekommt einerseits diese beiden Funktionen als Eingabe und zusätzlich unsere App-Komponente. Und mit connect wird unsere App um diese beiden Funktionen erweitert und es entsteht eine neue React-Komponente, die wir in ReduxApp speichern und exportieren. Das heißt, wir haben mit diesem bisschen Code eine neue React-Komponente gebaut, die mit der Redux-Funktionalität zurechtkommt. Und aus dem globalen state, dem für uns wichtigen state, nämlich die products-Map; und andererseits einen Event-Handler zur Verfügung stellt, der an den Redux-Store dispatcht. Das ist im Prinzip auch schon alles, um die App Redux-tauglich zu machen. Genau das Gleiche müssen wir dann nochmal mit unseren anderen beiden Komponenten machen, nämlich einerseits AddProductForm. Auch hier können wir komplett den selbstverwalteten State entfernen und uns darauf beschränken, dass wir alle Informationen über Props geliefert bekommen. Und genauso mit den Event-Handlern, die wir auch hier über Props geliefert bekommen. Dazu bauen wir uns auch hier eine kleine Extrakomponente, ReduxAddProductForm, zusammen, wieder mit den beiden Methoden. mapStateToProps. Diesmal entnehmen wir den state für die ProductForm aus dem globalen state-Objekt, und daraus aus dem Unterobjekt addProductForm. Hier benötigen wir title, description, watched, und category. Und bei der ReduxAddProductForm haben wir ein paar mehr Funktionen beziehungsweise Props für mapDispatchToProps. Wir müssen nämlich hier auf einen TitleChange reagieren. DescriptionChange, CategoryChange, oder einen Change der Eigenschaft watched. Und zusätzlich müssen wir noch eine Handler bereitstellen für den Button, mit dem wir ein Produkt hinzufügen können. Dieser nimmt hier ein Produkt entgegen und führt gleich zwei Aktionen aus. Zuerst wird dispatcht, dass ein Produkt hinzugefügt wird. Und danach wird das Formular wieder gelöscht. Auch hier rufen wir wieder unten connect auf mit mapStateToProps, mapDispatchToProps und wenden das auf unsere Komponente AddProductForm an. Anschließend exportieren wir wieder die ReduxAddProductForm. Analog dazu auch die Product.js. Auch hier entfernen wir komplett den selbstverwalteten State und erwarten, dass wir alle Eigenschaften, die wir hier benötigen, über Props geliefert bekommen. Das Gleiche wieder mit den Event-Handlern. Sehen wir uns einmal kurz die ReduxProduct.js-Datei an. Auch hier wieder mapStateToProps. Diesmal nimmt die mapStateToProps aber zwei Argumente entgegen, nämlich einerseits den aktuellen state, und andererseits die ownProps, also die Props, die unsere Product-Komponente unabhängig von unseren Transformationen hier mit Redux bekommt. Das liegt einfach daran, dass wir, wenn wir ein Product rendern wollen, wir uns das entsprechende Product aus state.products herauslesen müssen. Und state.products ist ja ein Array. Das heißt, wir müssen den aktuellen Index wissen, in dem wir uns befinden. Den bekommen wir über die render-Methode der App mit dem Prop nr, also die Nummer, der aktuelle Index wieder. Damit können wir uns title, description, watched, und category auslesen. Außerdem brauchen wir auch hier noch einen Toggle-Handler, falls sich der Beobachtungsstatus des aktuellen Products ändern sollte. Auch hier wieder connect (mapStateToProps, mapDispatchToProps), auf unser Product angewandt. Und schon haben wir ein ReduxProduct. Jetzt können wir auch wieder in die ReduxApp zurückgehen, beziehungsweise in die eigentliche App. Und ab hier verwenden wir ReduxAddProductForm und ReduxProduct. Hier übergeben wir die Nummer. Jetzt müssen wir nur noch einige kleine Anpassungen in index.js durchführen. Das heißt, wir importieren jetzt zusätzlich den Provider aus react-redux. createStore ist ja bereits bekannt für Redux selber. Und wir importieren jetzt nicht mehr direkt die App, sondern die ReduxApp. Wir müssen natürlich als Erstes den Store erstellen. Aber in der tatsächlichen render-Methode ändert sich fast nichts. Der einzige Unterschied ist, dass wir jetzt nicht mehr die normale App, sondern die ReduxApp rendern. Und außen rum müssen wir den Provider, der aus react-redux kommt, herumstellen, und zwar mit dem store-Attribut. Jetzt können wir das Ganze einmal von Babel kompilieren lassen. Und dann probieren wir es im Browser aus. Er ist fertig geworden. Und wir können aktualisieren. Wir sehen, es wird richtig initialisiert mit prod1 und prod2. Machen wir einmal ein "neues Produkt" mit der Beschreibung "beschreibung" vom Typ Food. Und es soll auch watched sein. Add Product, und wir haben das neue Produkt mit "beschreibung", "Category: Food", und "You are watching the product". Unwatch funktioniert auch. Und Remove first passt auch. Sie haben gesehen, dass Sie mit dem npm-Paket react-redux auf einfache Weise Redux in Ihrer React-Anwendung nutzen können. Mithilfe der Methoden mapStateToProps, mapDispatchToProps, sowie connect können Sie Komponenten erstellen, die Ihre eigenen Komponenten um Redux-Funktionalität erweitern.

ReactJS lernen

Sehen Sie, wie Ihre Anwendung mit der Hilfe von ReactJS von einem virtuellen DOM (Document Object Model) profitiert.

2 Std. 20 min (19 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Exklusiv für Abo-Kunden
Erscheinungsdatum:05.08.2016

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!