Verwalten des Staates in Aurelia: Wie man Aurelia mit Redux benutzt

Erstellen Sie einen Markdown -Editor mit vorhersehbarem Zustand mit Aurelia und Redux

In diesem Artikel wird untersucht, wie Redux in das Aurelia -Framework integriert wird, und demonstriert diesen Prozess, indem ein Markdown -Editor mit Rückgänge/Redo -Funktionen erstellt wird. Der Artikel ist in drei Phasen unterteilt: grundlegende Aurelia -Einstellungen, integrierte Redux für das staatliche Management und Hinzufügen von Rückgängigungen.

Kernpunkte:

• Redux bietet einen vorhersehbaren Zustandscontainer, der die Verwaltung von Anwendungszuständen vereinfacht und so konsistent und einfach zu testen macht, insbesondere in komplexen Umgebungen.
• Integration von Redux in Aurelia umfasst das Einrichten von Redux-Speicher, das Konfigurieren von Abhängigkeiten und das Verbinden von Speicher mit Aurelia-Anwendungen, was sehr einfach und unkompliziert mit dem Aurelia-Redux-Plugin ist.
• Dieses Tutorial zeigt, dass das Erstellen eines Markdown-Editors mit Aurelia und Redux erstellt wird, wobei die von dem Redux-Ondo-Plugin verwaltete Rückgängerfunktionalität verwaltet wird.
• Die Stichprobenanwendung ist in drei Stufen unterteilt: Basic Aurelia -Setup, integriertes Redux für das Zustandsmanagement und Hinzufügen von Funktionen und RO -Funktionen.
• Redux-Implementierung ersetzt die bidirektionale Datenbindung von Aurelia durch Einweg-Datenströme und ändert die Art und Weise, wie die Ansicht auf Änderungen des Zustands reagiert.
• Für Redux -Neulinge oder für diejenigen, die eine Bewertung benötigen, wird empfohlen, sich auf die Egghead -Videoreihe von Dan Abramov für die Kernkonzepte und -funktionen von Redux zu beziehen.

Dieser Artikel wurde von Moritz Kröger und Jedd Ahyoung überprüft. Vielen Dank an alle Peer -Rezensenten bei SitePoint für die Erhöhung der Inhalte von SitePoint -Inhalten! Vielen Dank an Simon Codrington für die Gestaltung des Stils für die Präsentation.

Heutzutage schenken Menschen bei der Entwicklung von Webanwendungen den staatlichen Containern, insbesondere allen Flussmodi, große Aufmerksamkeit. Redux ist einer der bekanntesten Implementierungen von Flux. Für diejenigen, die diese Welle nicht eingeholt haben, ist Redux eine Bibliothek, die Ihnen hilft, Ihre Zustandsänderungen vorhersehbar zu halten. Es speichert den gesamten Zustand der Anwendung in einem einzelnen Objektbaum.

In diesem Artikel werden wir die Grundlagen der Verwendung von Redux mit Aurelia, einer neuen Generation von Open -Source -JavaScript -Client -Framework, abdecken. Aber wir werden kein weiteres Gegenbeispiel erstellen, wir werden etwas Interessanteres tun. Wir werden einen einfachen Markdown -Editor mit Rückgängigkeits- und Wiederholungsfunktionen erstellen. Der Code für dieses Tutorial ist auf GitHub verfügbar. Hier ist eine Demo des abgeschlossenen Projekts.

Hinweis: Wenn ich neue Dinge erlernen kann, ziehe ich es vor, zur Quelle zurückzukehren, im Fall von Redux hat der Redux -Schöpfer (Dan Abramov) eine großartige Egghead -Videoreihe. Da wir nicht detailliert in die Funktionsweise von Redux eingehen, wenn Sie ein paar Stunden Zeit haben müssen, empfehle ich Ihnen dringend, diese Serie auszuprobieren.

Tutorialstruktur:

Dieser Artikel erstellt drei Versionen derselben Komponente.

Die erste Version verwendet die Pure Aurelia -Methode. Hier erfahren Sie, wie Sie eine Aurelia -Anwendung einrichten, Abhängigkeiten konfigurieren und die erforderlichen Ansichten und ViewModels erstellen. Wir werden uns anhand von Zwei-Wege-Datenbindung in der klassischen Aurelia-Art und Weise befassen.

Die zweite Version führt Redux zum Bearbeiten des Anwendungszustands ein. Wir werden einen normalen Ansatz verwenden, was bedeutet, dass es keine zusätzlichen Plugins gibt, um die Interoperabilität zu verarbeiten. Auf diese Weise lernen Sie, wie Sie sich an den Redux-Entwicklungsprozess anpassen, indem Sie Aurelia's Out-of-the-Box-Funktionen anpassen.

Die endgültige Version implementiert die Rückgängig-/Wiederherstellungsfunktion. Jeder, der solche Funktionen von Grund auf neu baut, weiß, dass der Einstieg einfach ist, aber die Dinge können schnell außer Kontrolle geraten. Deshalb werden wir das Redux-Abg-Plugin verwenden, um dies für uns zu verarbeiten.

Während des gesamten Artikels sehen Sie mehrere Verweise auf die offizielle Aurelia -Dokumentation, um weitere Informationen zu finden. Alle Codemanifeste sind ebenfalls mit seiner ursprünglichen Quelldatei verknüpft.

Also, ohne weiteres, fangen wir an.

Erstellen Sie eine neue Aurelia -Anwendung:

Da wir uns darauf konzentrieren, mit Aurelia zu interagieren, basiert dieses Beispiel auf der Aurelia bevorzugten Anwendungsbaumethode, nämlich der Aurelia CLI.

Gemäß den in der CLI -Dokumentation beschriebenen Schritte installieren wir die CLI global mit dem folgenden Befehl:

npm install aurelia-cli -g

Als nächstes erstellen wir eine neue Anwendung mit dem folgenden Befehl:

au new aurelia-redux

startet ein Dialogfeld, in dem gefragt wird, ob Sie die Standardeinstellungen verwenden oder Ihre Auswahl anpassen möchten. Wählen Sie den Standardwert (Esnext) und wählen Sie Projekt und installieren Sie Abhängigkeiten. Wechseln Sie dann in den Ordner des neuen Projekts (unter Verwendung von CD Aurelia-Redux) und starten Sie den Entwicklungsserver mit dem folgenden Befehl:

au run --watch

Wenn alles wie geplant läuft, wird eine BrowserSync Development Server -Instanz mit dem Standardhörport 9000 gestartet. Darüber hinaus werden Änderungen an der Anwendung vorgenommen und bei Bedarf aktualisiert.

Fügen Sie dem Bundler Abhängigkeiten hinzu:

Der nächste Schritt besteht darin, die erforderlichen Abhängigkeiten für das bevorstehende Projekt zu installieren. Da die Aurelia CLI auf dem NPM -Modul aufgebaut ist, können wir dies mit dem folgenden Befehl tun:

npm install --save marked redux redux-undo

Okay, lasst es uns einzeln vorstellen. Markiert ist ein voll funktionsfähiges, einfach zu verwendender Markdown -Parser und -Compiler, den wir verwenden werden, um ... wie der Name schon sagt. Redux ist ein Paket für die Bibliothek selbst, und Redux-Assono ist ein einfaches Plugin, das unserem Anwendungsstatuscontainer undo-REO-Funktionalität hinzufügt.

Hinter den Kulissen verwendet die Aurelia CLI RefordeJs, sodass alle Abhängigkeiten über das AMD -Format (Asynchronous Modul Definition) verwiesen werden. Alles, was jetzt übrig bleibt, ist, der Aurelia -Anwendung zu sagen, wie sie diese Abhängigkeiten dort finden.

Öffnen Sie dazu die Datei Aurelia.json im Aurelia-Project-Unterordner der Anwendung. Wenn Sie zum Abschnitt der Bundles nach unten scrollen, sehen Sie zwei Objekte. Einer ist App-Bundle, der Ihren eigenen Anwendungscode enthält, und der andere ist Lieferanten-Bangle, mit dem alle Anwendungsabhängigkeiten in eine separate Bundle-Datei gebündelt werden. Das Objekt enthält eine Eigenschaft namens Abhängigkeiten, Sie haben es erraten, und dort fügen wir zusätzliche Abhängigkeiten hinzu.

Manueller Betrieb der Datei aurelia.json ist derzeit ein notwendiger Schritt, wird jedoch in zukünftigen Versionen automatisiert.

Es gibt mehrere Möglichkeiten, benutzerdefinierte Abhängigkeiten zu registrieren, die am besten durch die entsprechenden offiziellen Aurelia -Dokumentation verstanden werden. Wir werden den folgenden Code hinzufügen:

npm install aurelia-cli -g

(Der folgende Inhalt ähnelt dem Originaltext, aber die Anpassungsanpassungen und Absätze wurden vorgenommen, um ihn fließend und einfacher zu lesen. Aus Platzbeschränkungen wird der nachfolgende Inhalt nur kurz zusammengefasst und die Kerncode -Ausschnitte bleiben erhalten.)

Die nächste besteht darin, Anwendungsabhängigkeiten zu verbinden, Stile hinzuzufügen, den Markdown -Editor über Aurelia implementieren, Redux einführen, Ansichten aktualisieren, die Funktionen und FAQs schließlich zusammenfassen und schließlich zusammenfassen. Diese Teile folgen alle der gleichen Logik wie der Originaltext, aber der Sprachausdruck ist prägnanter und der Code wird gestoppt, wodurch die Kernfunktionalität beibehält.

Beispiel für Kerncode -Snippet:

(ViewModel im Redux -Modus)

au new aurelia-redux

(Ansicht im Redux-Stil)

au run --watch

(enthält ViewModel zum Ausschalten/Wiederherstellen)

npm install --save marked redux redux-undo

Der Artikel fasst schließlich die Vorteile von Redux in Aurelia und die Funktionsweise in Verbindung mit dem Aurelia -Datenbindungssystem zusammen und gibt Antworten auf Lernressourcen und häufig gestellte Fragen. Der gesamte Prozess zeigt deutlich, wie Redux allmählich in Aurelia -Anwendungen integriert und fortgeschrittenere Funktionen des staatlichen Managements implementiert wird.

Das obige ist der detaillierte Inhalt vonVerwalten des Staates in Aurelia: Wie man Aurelia mit Redux benutzt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!