Share
React ist eine JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen, die die Welt der Webentwicklung im Sturm erobert hat. In einer Gemeinschaft, die Wahlmöglichkeiten und Flexibilität bevorzugt, ist es jedoch schwer zu wissen, wo man anfangen soll!
Keine Sorge, einige Muster und Module haben sich als bewährte Verfahren herausgestellt. Eine davon ist Redux zur Verwaltung des Anwendungsstatus.
In diesem Video aus meinem Kurs über moderne Web-Apps mit React und Redux zeige ich Ihnen, wie Sie das verwenden reag reduxux Paket.
In Redux-Anwendungen ist es eine bewährte Methode, zwischen Präsentationskomponenten und Containerkomponenten zu unterscheiden. In diesem Video werde ich erklären, was diese sind und wie wir sie verwenden können.
Ich beziehe mich auf Code, den wir bereits in früheren Teilen des Kurses erstellt haben, aber Sie sollten in der Lage sein, zu folgen und zu sehen, was ich mache. Den vollständigen Quellcode für den Kurs finden Sie auf GitHub.
Accentsconagua
reag reduxux Paketreag reduxux?In früheren Teilen dieses Kurses haben wir eine Beispiel-App mit React und Redux erstellt. Fast alle unsere Komponenten müssen jedoch mit dem Geschäft zusammenarbeiten, entweder durch das Lesen bestimmter Zustände oder durch das Zurücksenden von Aktionen an das Geschäft. Denken Sie daran, dass der Redux-Store den gesamten Status Ihrer gesamten Anwendung enthält. Dies bedeutet, dass die meisten, wenn nicht alle, Komponenten auf den Store zugreifen müssen.
Bisher haben wir ein globales Speicherobjekt, auf das wir direkt in dem Abschnitt zugreifen können, in dem wir unserer Seitenleiste Eigenschaften zuweisen.
Ein globales Geschäft wie dieses zu haben, ist jedoch aus vielen Gründen nicht großartig. Einer der einfachsten Gründe ist, dass er nicht global ist, sondern nur von dieser Datei aus. Das bedeutet, dass wir es innerhalb dieser Datei verwenden müssen, oder wir müssen es von dieser Datei an andere Dateien weitergeben, was sehr unordentlich wird.
Wenn wir über viele verschachtelte Komponenten verfügen, bedeutet dies, dass eine Zwischenkomponente zwar nicht wirklich den Speicher benötigt, aber eines ihrer untergeordneten Elemente, dass wir sie trotzdem an diese Zwischenkomponente übergeben müssen, weil es so ist braucht es, damit es es an sein Kind weitergeben kann.
Jetzt wäre es schön, wenn wir allen unseren Komponenten auf irgendeine Weise Zugriff auf den Store gewähren könnten, ohne eine globale Variable zu haben und diese nicht manuell weitergeben zu müssen.
Und die Wahrheit ist, es gibt einen Weg. Wir können ein Paket namens verwenden reag reduxux. Sie können ein wenig mehr über die Ideen hinter diesem Paket lesen, wenn Sie zur Redux-Dokumentation wechseln.
reag reduxux ArbeitetEine der Hauptideen dieses Pakets ist die Idee von Präsentationskomponenten und Containerkomponenten. Grundsätzlich können wir unsere Anwendung in zwei Komponentensätze aufteilen.
Der erste Satz ist die Präsentationskomponente. Es geht darum, wie die Dinge aussehen. Sie müssen sich Redux überhaupt nicht bewusst sein. Sie lesen nur Daten aus ihren Eigenschaften und können Daten ändern, indem sie Callbacks aufrufen, die wir auch als Eigenschaften zuweisen.
Container hingegen kennen Redux, und sie abonnieren den Zustand des Redux speziell und leiten Redux-Aktionen ab. Wir können eine Containerkomponente erstellen, indem Sie einfach einige dieser Anweisungen in eine Präsentationskomponente einwickeln.
Lass uns jetzt eintauchen und sehen, wie das funktionieren kann. Wir verwenden die Seitenleiste als Beispiel für eine Komponente, die wir in Präsentations- und Containerkomponenten unterteilen können.
Vielleicht sind Sie hier etwas verwirrt, wie wir unsere Seitenleiste in zwei separate Komponenten aufteilen. Die Wahrheit ist jedoch, dass Container-Komponenten immer Präsentationskomponenten einschließen. In der Tat haben Sie oft eine Präsentationskomponente, die nur einen Job hat und von einer bestimmten Containerkomponente umschlossen werden soll. Genau das machen wir mit der Sidebar.
reag reduxux Natürlich müssen wir zunächst die Reakt-Redux-Bibliothek installieren. Also lass es uns tun npm install --save React-Redux.
Wenn das installiert ist, können wir es mit importieren Import Provider von 'React-Redux'; in unserer Hauptdatei app.js. In dieser Datei benötigen wir eigentlich nur die Providerkomponente, die uns von React-Redux gegeben wurde.
Nun ist die Anbieterkomponente eigentlich der Teil von react-redux, der unser Geschäft zu diesen verschiedenen Komponenten führen wird. Tatsächlich geschieht hinter den Kulissen der Provider die Kontextfunktion von React. Wenn Sie also etwas mehr Erfahrung mit React haben und bereits mit dem Kontext herumgespielt haben, erhalten Sie möglicherweise einen Einblick in die Funktionsweise des Anbieters.
Der Anbieter macht es tatsächlich ganz einfach, den Laden überall zu nutzen. Alles, was wir tun müssen, ist unsere Anwendungskomponente der obersten Ebene in eine Anbieterkomponente zu packen, wie hier gezeigt:
Und jetzt nutzt unsere Anwendung den React-Redux-Anbieter.
verbinden() FunktionJetzt öffnen wir unsere Sidebar-Datei und importieren die verbinden() Funktion von reag reduxux. Das verbinden() Mit function können wir genau definieren, welche Eigenschaften und Funktionen eine Containerkomponente haben soll. Diese Definition können wir dann auf eine Präsentationskomponente anwenden und eine vollständige React-Komponente erhalten.
Jetzt verstehe ich, dass das ein bisschen verwirrend klingt. Mal sehen, wie das gemacht wird.
Das Schöne an der Seitenleiste, die wir bereits geschrieben haben, ist, dass sie eigentlich schon eine Präsentationskomponente ist.
In erster Linie beschäftigt sich unsere Seitenleiste nur mit dem Aussehen der Dinge. Es gibt uns natürlich ein Markup-Styling und ist Redux überhaupt nicht bewusst. Wir haben diese Methoden, die wir nennen showAddDeck, addDeck, und hideAddDeck, Aber diese Methoden wissen über Redux Bescheid. Die Sidebar selbst weiß überhaupt nichts über Redux. Wenn wir Redux aus diesem Projekt herausnehmen und eine Alternative verwenden wollten, könnten wir die Definitionen dieser Funktionen ändern, und diese Sidebar-Komponente muss sich überhaupt nicht ändern. Es werden nur diese Funktionen aufgerufen.
Wie liest er Daten? Nun, es liest nur Daten aus Eigenschaften, die wir ihnen gegeben haben. Wie wäre es mit dem Ändern von Daten? Nun, es ruft einfach Rückrufe auf, die von Eigenschaften stammen. Wir haben drei Methoden, und wenn diese aufgerufen werden, werden die Daten im Speicher geändert. Und zum Schluss natürlich, ja, es wird von Hand geschrieben. Und wie Sie gleich sehen werden, werden Containerkomponenten durch React-Redux erzeugt.
Wir haben also bereits eines der beiden Elemente, die wir brauchen: Diese Seitenleiste ist eine Präsentationskomponente. Als nächstes möchten wir diese Eigenschaftsdefinitionen, die wir der Seitenleiste geben, übernehmen. Anstatt sie hier zu definieren, definieren wir sie als Teil unserer Containerkomponente.
Also werde ich nur diese Zeilen kopieren:
Und ich werde sie hier oben einfügen:
Jetzt sind diese Eigenschaften eigentlich in zwei Gruppen aufgeteilt: die Eigenschaften, die Daten sind, und die Eigenschaften, die aufrufende Funktionen sind, die Aktionen ausführen, die den Speicher ändern.
Nun müssen wir also zwei Funktionen erstellen, die den Status diesen Eigenschaften zuordnen. Diese Funktionen werden traditionell innerhalb von React aufgerufen mapStateToProps und mapDispatchToProps.
Also lasst uns weitermachen und mit anfangen mapStateToProps. Dies ist eine Funktion, die den neuesten Status vom Geschäft erhält.
Wir müssen nur ein Objekt zurückgeben, das zwei Eigenschaften haben wird, und wie wir bereits gesehen haben, sind es die Decks und HinzufügenDeck Eigenschaften. Ich kann sie also einfach kopieren und einfügen, da dies praktisch die gleichen Daten sind. Wir müssen nur die Syntax in eine Objekt-Literal-Syntax anstelle der JSX-Syntax konvertieren.
Das ist also unser mapStateToProps Funktion. Im Grunde nimmt es nur den aktuellen Status aus dem Speicher und gibt alle Daten oder Präsentationskomponenten zurück, die benötigt werden. Also braucht es das Decks und das HinzufügenDeck Eigentum, und so geben wir diejenigen innerhalb eines Objekts zurück.
Wir können ein paar Dinge tun, um dies ein wenig aufzuräumen. Zunächst einmal könnten wir diese geschweiften Klammern, die der Block für diese Funktion sind, tatsächlich loswerden, weil wir nur eine einzige Anweisung haben, die wir zurückgeben. Aber da wir nur diese eine Zeile haben, können wir die return-Anweisung loswerden.
Jetzt haben wir geschweifte Klammern um das Objektliteral, und JavaScript wird denken, dass dies ein Funktionsblock ist, also werden wir diese in Klammern einschließen.
Wir können dies etwas verkürzen, da wir nicht das gesamte Statusobjekt benötigen. Wir können also einfach die Destruktursyntax verwenden und sagen, wir wollen nur das Decks Eigentum und die HinzufügenDeck Eigenschaft von diesem Objekt.
Natürlich sagen wir innerhalb dieser Funktion nicht State.decks, sagen wir einfach Decks. Und wir sagen es nicht state.addingDeck, sagen wir einfach HinzufügenDeck. Und jetzt denke ich, Sie können sehen, wohin wir damit gehen - weil der Schlüssel und die Eigenschaft denselben Namen haben, können wir einen von ihnen loswerden und wir können es einfach sagen Decks und HinzufügenDeck.
Und dies ist die kürzere Version unserer Funktion dank ES6.
Also was ist mit? mapDispatchToProps? Nun, das ist auch eine Funktion, und es wird dauern Versand als einziger Parameter. Nun ist der Versand natürlich die Versandfunktion des Geschäfts.
Noch einmal, wir werden nur ein Objektliteral zurückgeben. Vergessen Sie also nicht diese Klammern, und drinnen brauchen wir die drei Eigenschaften, die wir oben haben: addDeck, showAddDeck, und hideAddDeck. Jetzt haben wir eine Funktion, die die Dispatch-Funktion den drei Callbacks zuordnet, die wir für eine Sidebar benötigen.
Jetzt haben wir alles, was wir zum Erstellen unserer Containerkomponente benötigen. Wir haben zwei Funktionen, die unser Zustandsobjekt in unserer Dispatch-Funktion den Eigenschaften zuordnen, die diese Funktion benötigt. Und wir haben eine Präsentationskomponente, die diese Eigenschaften erwartet.
Jetzt die verbinden() Funktion ist das, was wir verwenden können, um diese beiden Abbildungsfunktionen mit einer Präsentationskomponente zu verbinden. Und was diese Verbindungsfunktion zurückgibt, ist unsere Containerkomponente. Wir werden hier eigentlich keine weitere Komponente schreiben - stattdessen übergeben wir diese drei Teile an die verbinden() Funktion, und es wird unsere Containerkomponente zurückgeben.
Lassen Sie uns also einen Anruf nach unten exportieren, anstatt die Seitenleiste zu exportieren verbinden(). Wir werden zwei Parameter übergeben - die mapStateToProps und mapDispatchToProps Funktionen-und verbinden() wird eine neue Funktion zurückgeben.
export default connect (mapStateToProps, mapDispatchToProps) (Seitenleiste);
Das, was tatsächlich aus dieser Datei exportiert wird, ist keine Präsentationsseitenleiste, sondern unsere neue Containerkomponente, auf die wir uns außerhalb dieser Funktion noch beziehen können
Also das ist das reag reduxux Paket in Aktion. Sie können die Kursquelldateien auf GitHub überprüfen, um zu sehen, wie der Code vollständig funktioniert.
In dem vollständigen Kurs, Moderne Web-Apps mit React und Redux, zeige ich Ihnen, wie Sie mit React und Redux moderne Web-Apps erstellen können.
Ausgehend von nichts nutzen Sie diese beiden Bibliotheken, um eine vollständige Webanwendung zu erstellen. Sie beginnen mit einer möglichst einfachen Architektur und bauen die App Schritt für Schritt auf. Sie lernen grundlegende Konzepte wie Werkzeuge, Reduzierungen und Routing kennen. Außerdem erfahren Sie mehr über fortgeschrittenere Techniken wie intelligente und dumme Komponenten, reine Komponenten und asynchrone Aktionen. Am Ende haben Sie eine vollständige Karteikarten-App zum Lernen durch Wiederholung von Abständen erstellt.
Auf dem Weg erhalten Sie die Chance, Ihre Fähigkeiten in ES6 (ECMAScript 2015) zu verbessern und die Muster und Module zu lernen, die am besten mit React und Redux funktionieren!
Mit diesen Kursen können Sie auch auf Ihr Wissen über React aufbauen:
