Was ist Redux: Alles, was Sie über diese Bibliothek wissen müssen

Wenn Sie es immer noch nicht wissen Was ist Redux?In diesem Artikel konzentrieren wir uns darauf, alles zu erklären, was Sie über diese Bibliothek wissen sollten JavaScript, sowie seine Verwendung, wie es verwendet werden kann usw. Auf diese Weise verfügen Sie über alle notwendigen Tools, um es in Ihre nächsten JS-Projekte integrieren zu können.

Mal sehen, wie Redux ist!

Was ist JavaScript?

JavaScript (JS)ist eine interpretierte Programmiersprache. Es gilt als Dialekt des ECMAScript-Standards und zeichnet sich dadurch aus, dass es objektorientiert, prototypbasiert, imperativ, schwach typisiert und dynamisch ist. Trotz seines Namens sollte es nicht mit Java verwechselt werden. Seine Entstehung basiert auf kommerziellen Überlegungen nach der Übernahme von Sun Microsystems (Erfinder von Java) durch Netscape Navigator (Erfinder von LiveScript) und der Namensänderung der Programmiersprache.

hauptsächlich Wird auf Client-Seite verwendet, ein integraler Bestandteil von Webbrowsern. Dadurch können Sie die Benutzeroberfläche verbessern und dynamische Webseiten erstellen. Darüber hinaus kann auf der Serverseite JavaScript verwendet werden, das als serverseitiges JavaScript oder SSJS bezeichnet wird. Seine Anwendbarkeit geht über das Web hinaus und findet Verwendung in PDF-Dokumenten und Desktop-Anwendungen, hauptsächlich Widgets usw.

La Die JavaScript-Syntax ähnelt der von Sprachen wie C++ und Java, obwohl es Namen und Konventionen von Java übernimmt, daher der Name. Aber wie ich bereits erwähnt habe, ist es wichtig zu beachten, dass Java und JavaScript trotz ihres ähnlichen Namens unterschiedliche Semantik und Zwecke haben.

Andererseits müssen wir bedenken, dass JavaScript eine Implementierung des Document Object Model (DOM) verwendet, und zwar JS ist die einzige Programmiersprache, die Browser nativ verstehen. Ursprünglich wurde es in HTML-Webseiten für Vorgänge auf dem Client ohne Zugriff auf den Server verwendet. Heutzutage wird es jedoch häufig zum Senden und Empfangen von Informationen vom Server verwendet, häufig in Kombination mit Technologien wie AJAX. JavaScript wird im Benutzeragenten interpretiert, während die Anweisungen zusammen mit dem HTML-Code heruntergeladen werden.

JS-Anwendungen

JavaScript ist eine Programmiersprache, die in einer Vielzahl von Anwendungen und Kontexten weit verbreitet ist, wie zum Beispiel:

• Web Entwicklung: Es ist in der Webentwicklung unerlässlich. Es wird verwendet, um die Interaktivität und das Benutzererlebnis auf Websites und Webanwendungen zu verbessern. Es wird unter anderem bei der Erstellung interaktiver Formulare, visueller Effekte, Echtzeit-Datenvalidierungen und dynamischer Navigation verwendet. Anwesend in:
  • Web-Frontend: Es ist der Grundstein der Front-End-Entwicklung. Frameworks und Bibliotheken wie React, Angular und Vue.js verlassen sich auf JavaScript, um interaktive und dynamische Benutzeroberflächen in Webanwendungen zu erstellen.
  • Web-Backend: Über Plattformen wie Node.js wird JavaScript auf der Serverseite verwendet, um komplette Webanwendungen zu erstellen. Dadurch kann ein Entwickler JavaScript sowohl im Front-End als auch im Back-End einer Anwendung verwenden, wodurch es einfach wird, Daten zu synchronisieren und Anwendungen in Echtzeit zu erstellen.
  • Serveranwendungen: Obwohl es nicht so verbreitet ist wie andere serverseitige Sprachen, wird JavaScript bei der Entwicklung von Serveranwendungen über Node.js verwendet. Dies ist besonders nützlich für Echtzeitanwendungen und Anwendungen, die eine große Anzahl gleichzeitiger Anforderungen verarbeiten.
• Mobile-Apps: Es wird bei der Entwicklung hybrider mobiler Anwendungen unter Verwendung von Frameworks wie React Native und Ionic verwendet. Mit diesen Frameworks können Entwickler die Anwendung einmal schreiben und auf mehreren Plattformen wie iOS und Android ausführen.
• Onlinespiele: Es wird bei der Entwicklung von Online-Spielen und Browsergames eingesetzt. Bibliotheken wie Phaser und Three.js erleichtern die Erstellung interaktiver 2D- und 3D-Spiele im Browser.
• Desktop-Anwendungen: Durch Tools wie Electron ist es möglich, plattformübergreifende Desktop-Anwendungen mithilfe von Webtechnologien wie HTML, CSS und JavaScript zu erstellen.
• Browsererweiterungen: Um Webbrowsern zusätzliche Funktionalität hinzuzufügen, werden Erweiterungen verwendet. Diese Erweiterungen werden normalerweise in JavaScript geschrieben.
• Anwendungen für das Internet der Dinge (IoT): Aufgrund seiner Fähigkeit, über APIs und Spezialbibliotheken mit Hardware und Sensoren zu kommunizieren, wird es bei der Entwicklung von Anwendungen und Systemen für IoT-Geräte verwendet.

Was ist Redux und wie funktioniert es?

Redux ist eine Open-Source-JavaScript-Bibliothek die zur Zustandsverwaltung in Anwendungen verwendet wird und von der Elm-Funktionssprache beeinflusst wird. Es wird häufig mit anderen Bibliotheken wie React oder Angular kombiniert, um Benutzeroberflächen zu erstellen. Es wurde von Dan Abramov und Andrew Clark konzipiert, die sich von der Facebook-Bibliothek namens Flux inspirieren ließen.

Im Allgemeinen ist Redux eine kleine Bibliothek mit einem Einfache und eingeschränkte API, entworfen, um als vorhersehbarer Container für den Anwendungsstatus zu fungieren. Seine Funktionsweise ähnelt dem Konzept der „Reduzierung“ in der funktionalen Programmierung.

Die Geschichte von Redux reicht bis zurück 2015, als Dan Abramov mit der Entwicklung der ersten Version von Redux begann während er sich darauf vorbereitet, auf der React Europe-Konferenz einen Vortrag über Hot Reloading zu halten. Während dieses Prozesses bemerkte Abramov die Ähnlichkeit zwischen dem Flux-Muster und der Reduzierfunktion. Diese Beobachtung veranlasste ihn zu der Frage, ob ein Flux-Speicher tatsächlich eine Reduktionsfunktion sein könnte.

Um diese Idee umzusetzen, kontaktierte Abramov Andrew Clark, den Autor der Flux-Implementierung namens Flummox. Gemeinsam erweckten sie Redux zum Leben und definierten eine kohärente API. Darüber hinaus haben sie die Möglichkeit implementiert Erweiterung mit Middleware und Store-Enhancern, das erheblich zum aktuellen Redux-Ökosystem beigetragen und seine Möglichkeiten weiter erweitert hat.

Beziehung zwischen Redux und React: Was ist React?

React ist eine JavaScript-Bibliothek das sich auf die Erstellung von Benutzeroberflächen konzentriert, obwohl seine Vielseitigkeit über diese Definition hinausgeht. Dieses ursprünglich von Facebook entwickelte Tool ist Open Source und weit verbreitet, da es in der Lage ist, schnell Benutzeroberflächen in einer Vielzahl von Anwendungen zu erstellen, darunter Single Page Web Applications (SPA) und Android- und iOS-Anwendungen.

Im Gegensatz zu anderen Frameworks wie Angular, die komplexere Ansätze bieten, ist React dies zeichnet sich durch seine Fähigkeit zur Generierung von Benutzeroberflächen aus effizient. Dies wird durch die Verwendung von .jsx-Dateien erreicht, die Logik und Benutzeroberfläche in einer einzigen Datei vereinen und in Einheiten namens Komponenten organisiert sind.

Virtuelles DOM: Was ist das?

Wenn wir in die Welt von ReactJS eintauchen, hören wir wahrscheinlich häufig vom Konzept des Virtuelles DOM. Diese Idee basiert auf einer genialen Idee: Anstatt das gesamte eigentliche DOM zu aktualisieren, ändern wir nur den Teil, der wirklich Änderungen erfordert. In alten JavaScript-Anwendungen empfingen wir Daten im JSON-Format vom Server und generierten dann einen komplett neuen HTML-Code zum Rendern, was bei jeder Änderung zu einer Aktualisierung der gesamten Seite führte.

So installieren und konfigurieren Sie Redux in Ihrem Projekt

Wenn Sie wissen wollen, wie man Redux installiertDie Wahrheit ist, dass es überhaupt nicht kompliziert ist. Dazu müssen Sie zum Terminal gehen und von dort aus den folgenden Befehl ausführen:

npm i -S redux

Jetzt ist die stabile Version von Redux auf Ihrem System installiert. Natürlich müssen Sie wahrscheinlich einige Abhängigkeiten auflösen, z. B. die Installation von npm, dem Node.js-Paketmanager. Sobald dies erledigt ist, installieren wir nun React, das Sie auch benötigen, um Redux nutzen zu können, sowie die Entwicklungstools, um mit der Erstellung Ihrer Projekte beginnen zu können.

Um diese anderen Pakete zu installieren, müssen Sie folgende Befehle ausführen:

npm i -S reagieren-redux npm i -D redux-devtools

Jetzt wäre alles startbereit. Wenn Sie zum Hauptordner oder -verzeichnis gehen, in dem Redux installiert wurde, werden Sie feststellen, dass es mehrere Unterverzeichnisse oder Unterordner gibt, z. B. STORE, REDUCERS, ACTIONS, TYPES. Sie müssen wissen, was jedes einzelne ist:

• MASSNAHMEN: Dies sind Objekte, die zwei Eigenschaften haben müssen, eine, die den Typ (TYPE) der Aktion beschreibt, und eine andere, die beschreibt, was im Status der App geändert werden soll.
• REDUZIERER- Reduzierer sind Funktionen, die das Verhalten von Aktionen implementieren. Sie ändern den Zustand der App, abhängig von der Beschreibung der Aktion und der Beschreibung der Zustandsänderung.
• SHOP: ist der Ort, an dem sich Aktionen und Reduzierer treffen und den Status der App beibehalten und ändern. Es gibt nur eins.
• TYPES: Wie ich schon sagte, es ist die Art der Aktion.

Praxisbeispiel: Erstellen einer Anwendung mit Redux

Un Beispiel mit Redux Es könnte das Folgende sein, bei dem eine einfache Buchhaltungs-App mit Redux erstellt wird. Dazu müssen Sie jedoch zunächst Redux konfigurieren und Ihre Aktionen und Reduzierungen definieren:

// Redux-Bibliotheken importieren import { createStore } from 'redux'; // Definiere die Aktionen const incrementAction = { type: 'INCREMENT' }; const decrementAction = { type: 'DECREMENT' }; // Reduzierer definieren const counterReducer = (state = 0, action) => { switch (action.type) { case 'INCREMENT': return state + 1; Fall 'DECREMENT': Rückgabestatus - 1; Standard: Rückgabestatus; } }; // Den Redux-Store erstellen const store = createStore(counterReducer); // Änderungen im Store abonnieren store.subscribe(() => { console.log('Current counter state:', store.getState()); }); // Aktionen zum Ändern des Status versenden store.dispatch(incrementAction); store.dispatch(incrementAction); store.dispatch(decrementAction);

Dies ist ein sehr einfaches Beispiel für die Verwendung von Redux. In einer größeren App würden Sie komplexere Aktionen und Reduzierungen definieren und React-Komponenten verbinden, um auf den Status des Stores zuzugreifen und ihn zu aktualisieren. Aber das gibt Ihnen zumindest eine Vorstellung davon, wie es funktioniert ...