So verwenden Sie React mit Redux: Leitfaden für Anfänger

Einführung

Ist Ihnen aufgefallen, dass React JS selten in einem Satz ohne Redux erwähnt wird?

Ich auch, als ich anfing, React zu lernen. Aber angesichts der schieren Menge an neuen Frameworks und Bibliotheken, die jede Woche in der JavaScript-Welt herauskommen, ist es vielleicht nicht die beste Idee, sofort zum Abschnitt „Erste Schritte“ in der Dokumentation eines Pakets zu springen, ohne zu wissen, ob du brauchst es wirklich.

Redux ist jedoch keineswegs ein weiteres Schlagwort. Es gibt es seit 2015 und es gibt einen Grund für seine Beliebtheit. Egal, ob Sie noch nichts davon gehört haben oder nicht wissen, warum Sie es in Ihrem React-Projekt verwenden sollten, Sie sind hier richtig.

Wir werden eine einfache App erstellen so können Sie React mit Redux zusammen in Aktion sehen.

Was ist Redux?

Redux ist ein vorhersehbar Zustandscontainer für JavaScript-Anwendungen. Das Hauptkonzept dahinter besteht darin, den gesamten Status einer Anwendung in einer zu speichern, zentralisiert Standort. Aber wie macht Redux den Staat vorhersehbar? Um den Zustand zu ändern, zwingt Redux Sie zur Entsendung Aktionen, bei denen es sich um einfache JavaScript-Objekte handelt. Das heißt, wenn sich der Status geändert hat, muss eine Aktion ausgelöst worden sein.

Was Zustände und Aktionen miteinander verbindet, werden Funktionen genannt Reduzierungen. Auch hier handelt es sich um einfache JavaScript-Funktionen, die den Status und die Aktion der Anwendung als Parameter verwenden und den nächsten Status zurückgeben. Das Tolle an Reducern ist, dass es sich um reine Funktionen handelt. Sie verändern das State-Objekt nicht, was das Debuggen von Zeitreisen in Redux DevTools ermöglicht (wir werden es später in diesem Artikel behandeln, bleiben Sie dran).

Es ist erwähnenswert, dass Redux ein eigenständige Bibliothek und es ist ziemlich flexibel. Sie können es mit React, Angular, jQuery oder sogar Vanilla-JavaScript verwenden. Es funktioniert jedoch besonders gut mit React, da Sie mit React die Benutzeroberfläche als eine Funktion des Zustands beschreiben können — und die Zustandsverwaltung ist das, was Redux am besten kann.

Die Notwendigkeit eines staatlichen Verwaltungsinstruments

Auf den ersten Blick mag es so aussehen, als ob React Ihnen die gesamte Statusverwaltung bietet, die Sie jemals benötigen werden. Jede Komponente kann statusbehaftet sein, und Sie können alle Daten problemlos weitergeben Requisiten. Das Hinzufügen von Redux zu Ihrem Projekt, ohne zuerst ein Problem mit dem Datenfluss von React zu haben, kann etwas verwirrend sein. Schauen wir uns die folgende Tabelle an:

Dies ist ein Beispiel für React unidirektionaler Datenfluss. In diesem Beispiel liefert die übergeordnete Komponente untergeordneten Komponenten mithilfe von schreibgeschützten Attributen, den sogenannten „Requisiten“, eine Momentaufnahme ihres Zustands. „Komponente A“ und „Komponente B“ verwenden dieselben Daten, die von der „übergeordneten Komponente“ weitergegeben wurden. Das nächste Beispiel zeigt, wo die Probleme beginnen.

Kannst du sehen, wohin das führt? Dies passiert häufig in React-Projekten, nicht einmal unbedingt in großen. Wenn „Komponente C“ und „Komponente D“ dieselben Daten benötigen, müssen Sie die Daten von ihrem nächsten gemeinsamen Vorfahren weitergeben, der zufällig die „Elternkomponente“ ist. Die Daten werden übertragen mehrere Stufen von Zwischenkomponenten, die möglicherweise nicht einmal die Daten benötigen.

Die Weitergabe von Daten auf diese Weise kann zu vielen Problemen führen. Jede Komponente in dieser Struktur ist jetzt fest miteinander verbunden, sodass Sie Komponenten nicht mehr frei bewegen können. Dies kann sich auch auf die Leistung Ihrer App auswirken, da jedes Status-Update dazu führen würde, dass alle untergeordneten Komponenten erneut gerendert werden. Wenn Sie in eine Situation geraten, in der zwei Komponenten dieselben Daten benötigen, müssen Sie häufig den Code mehrerer Komponenten ändern, um den Datenfluss von oben nach unten in der Struktur einzurichten — das ist zeitaufwändig und oft nervig.

Hier kommt Redux ins Spiel. Es löst die oben beschriebenen Probleme, indem es eine bereitstellt zentralisierte Daten store, was nichts weiter als ein JavaScript-Objekt mit ein paar Methoden ist. Auf diese Weise können Sie die Daten an einem Ort aufbewahren und überall in Ihrer Anwendung darauf zugreifen. Schauen wir uns an, wie es in unserem React-App-Szenario visualisiert werden kann:

Wie Sie sehen, müssen Sie mit Redux die Daten nicht mehr durch mehrere Ebenen verschachtelter Komponenten leiten. Es kann sein überall zugänglich in der Bewerbung. Komponenten, die die Daten benötigen, können direkt vom Store aus darauf zugreifen. Weniger Komponenten sind am Datenfluss beteiligt und der Code wird einfacher.

So erstellen Sie eine Beispiel-App mit React with Redux

Um besser zu verstehen, wie React und Redux zusammen verwendet werden, werden wir eine Beispiel-App erstellen. Es wird ein einfacher Zähler sein, der den aktuellen Status anzeigt und es dem Benutzer ermöglicht, seinen Wert zu erhöhen und zu verringern.

1. Schritt

Für dieses einfache Beispiel verwenden wir React-App erstellen. Sie können diesen Schritt überspringen, wenn Sie ihn bereits installiert haben.

npm install -g create-react-app

Schritt 2

Erstellen Sie eine neue App:

React-App React-Redux-Counter erstellen

Dieser wird einen Moment dauern. Wenn Sie fertig sind, geben Sie das Verzeichnis Ihres Projekts ein:

cd React-Redux-Zähler

Schritt 3

Wir werden Redux (natürlich) brauchen und die React-Redux Paket, das die offizielle React-Bindung für Redux ist. Lassen Sie uns beide installieren:

npm install redux react-redux --save

4. Schritt

Der Einfachheit halber erstellen wir jetzt alle Dateien und Verzeichnisse, die für diese Anleitung benötigt werden:

mkdir -p src/store && touch src/store/action-types.js && touch src/store/action-creators.js && touch src/store/reducers.js
mkdir -p src/components && berühre src/components/Counter.js && berühre src/components/counter.css

5. Schritt

Beschreiben wir in src/store/action-types.js die möglichen Arten von Aktionen, die in unserer Anwendung auftreten können:

export const TYPE_INCREMENT = 'INCREMENT'
export const TYPE_DECREMENT = 'DEKREMENT'

Das ist so ziemlich selbsterklärend. Wir können unseren Zähler entweder erhöhen oder verringern.

6. Schritt

In src/store/action-creators.js definieren wir unsere Aktionsersteller. Wie Sie sich vielleicht erinnern, Aktionen sind einfache JavaScript-Objekte, die beschreiben, was in unserer Anwendung passiert.

importiere {TYPE_INCREMENT, TYPE_DECREMENT} aus '. /Aktionstypen '

Export Const Increment = () => ({
Typ: TYPE_INCREMENT,
})

Export Const Decrement = () => ({
Typ: TYPE_DECREMENT,
})

Wie Sie sehen können, handelt es sich um reguläre Funktionen, die Objekte (Aktionen) mit einem Art Eigentum. Wir werden verschiedene Dinge tun, basierend auf den Aktionstypen in unserer Reduzierungen. In komplizierteren Beispielen würden Aktionen zusätzliche Daten enthalten, aber nur die Eigenschaft type ist obligatorisch und für unser Beispiel ausreichend.

7. Schritt

In src/store/reducers.js definieren wir den Anfangszustand unserer App und unseren Reducer.

importiere {TYPE_INCREMENT, TYPE_DECREMENT} aus '. /Aktionstypen '

const initialState = {
Zähler: 0,
}

export const counterReducer = (state = initialState, Aktion) => {
schalter (action.type) {
Fall TYPE_INCREMENT:
zurückkehren {
... Staat,
Zähler: state.counter + 1,
}
Fall TYPE_DECREMENT:
zurückkehren {
... Staat,
Zähler: state.counter - 1,
}
Standard:
Zustand zurückgeben
}
}

In einer Redux-Anwendung ruft Redux jedes Mal, wenn eine Aktion ausgelöst wird, jeden auf Minderer, wobei der aktuelle Status als erster Parameter und die kürzlich ausgelöste Aktion als zweiter Parameter übergeben wird. Unsere einfache App wird einen Reducer haben. Je nach Aktionstyp machen wir hier drei verschiedene Dinge:

• neuen Zustand mit erhöhtem Zähler zurückgeben
• gibt einen neuen Status mit verringertem Zähler zurück
• Zustand unverändert zurückgeben

Einfach, oder? Beachten Sie, dass wir in diesen Dateien nichts von Redux oder React-Redux importiert haben, das ist bisher nur JavaScript.

8. Schritt

Es ist Zeit, React mit Redux zu kombinieren. Gehe zu src/index.js und ersetze den Inhalt durch diesen Code:

importiere React aus 'react';
importiere ReactDOM aus 'React-Dom';
importiere {Provider} aus 'React-Redux';
importiere {createStore} aus 'Redux';
importiere {counterReducer} aus '. /store/reducers ';
App aus 'importieren. /App ';

const store = createStore (
Gegenreduzierer,
Fenster. __REDUX_DEVTOOLS_EXTENSION__ && Fenster. __REDUX_DEVTOOLS_EXTENSION__ (),
);

ReactDOM.render ()
<Provider store= {store} >
<App />
</Provider>,
document.getElementById ('Stamm'),
);

Dies ist der Einstiegspunkt unserer App. Es wurde bereits definiert von React-App erstellen. Wir nehmen ein paar Änderungen vor. Wir verwenden die Funktion createStore, um unseren Store zu erstellen, und übergeben unseren Reducer an ihn. Dann packen wir die App-Komponente in eine Provider-Komponente ein, die den Store für unsere React-App verfügbar macht.

Schritt 9

Lass uns unser aktuelles erstellen Zähler Komponente in src/components/Counter.js:

importiere React aus 'React'
importiere {connect} aus 'react-redux'
importiere {increment, decrement} aus '.. /store/action-creators '
importieren '. /counter.css '

export const counterComponent = ({counter, handleIncrement, handleDecrement}) => (
<div>
<p className="counter">Zähler: {Zähler}</p>
<button classname="BTN btn-increment</button>“ onClick= {handleIncrement} >+
<button classname="BTN btn-decrement“ onClick= {handleDecrement} >-</button>
</div>
)

CounterComponent ist eine Darstellungskomponente, die den aktuellen Zähler und ruft bei Tastenklicks handleIncrement oder handleDecrement auf. Wir nehmen das staatenlos funktionaler Bestandteil und Verwendung verbinden von React-Redux, um unseren Shop dafür zur Verfügung zu stellen:

const mapStateToProps = ({counter}) => ({
Zähler,
})

const mapDispatchToProps = {
handleIncrement: inkrementieren,
handleDecrement: verringern,
}

export const Counter = verbinden (
MapState zu Requisiten,
MapDispatchToProps,
) (Gegenkomponente)

Mapstate nach Requisiten ist eine Funktion, die Bundesstaat als sein Argument. Wir verwenden die ES6-Destrukturierung, um „state.counter“ abzurufen, und geben ein Objekt zurück, das den benötigten Zustandsteil den Requisiten der Komponente zuordnet.

MapDispatchToProps ist ein Objekt, das unsere Aktionsersteller den Requisiten der Komponente zuordnet.

Dann übergeben wir beide an connect, was eine neue Funktion zurückgibt, die unsere CounterComponent aufnimmt und eine zurückgibt verbunden Komponente. Beachten Sie, dass unsere Komponente nicht direkt auf den Speicher zugreifen kann — connect erledigt das für uns unter der Haube.

10. Schritt

Fügen Sie grundlegende Stile in src/components/counter.css hinzu:

.btn, .counter {
Schriftgröße: 1.5rem;
}

.btn {
Cursor: Zeiger;
Polsterung: 0 x 25px;
}

Und dann ersetzen Sie den Inhalt von src/App.js, um unsere Komponente zu rendern:

importiere React, {Component} aus 'react';
importiere {Counter} aus '. /Komponenten/Zähler '

Klasse App erweitert Component {
rendern () {
zurückkehren (
<div className="App">
<Counter />
</div>
);
}
}

Standard-App exportieren;

Führen Sie nun npm start in Ihrem Terminal aus. Das war's. In ein paar einfachen Schritten haben wir mit React und Redux einen Zähler erstellt. Wenn Sie sehen möchten, wie dieselbe App ohne Redux implementiert würde, können Sie das zuvor erwähnte Repo klonen und Git Checkout ohne-Redux ausführen.

Einfaches Debuggen mit Redux DevTools

Wenn wir über die Verwendung von React mit Redux sprechen, müssen wir Redux DevTools erwähnen. Um es verwenden zu können, müssen Sie eine Erweiterung für Ihren Browser installieren. Sie können die folgenden Links verwenden:

• Chrom
• Firefox

Danach sollten Sie den Redux-Tab in den Entwicklertools Ihres Browsers sehen können. Lassen Sie uns es öffnen und sehen, was wir damit machen können.

Auf der linken Seite der Tools sehen Sie eine Liste der Aktionen, die seit dem Start der Anwendung ausgeführt wurden, zusammen mit Zeitdaten. Sie können auf eine beliebige Aktion klicken, um die Optionen „Springen“ und „Überspringen“ anzuzeigen, mit denen Sie zu einem Zeitpunkt reisen können, an dem die Aktion ausgeführt wurde, bzw. die Auswirkungen der Aktion überspringen können.

Im rechten Bereich befinden sich einige weitere Schaltflächen, mit denen Sie den Typ der Aktion und die darin enthaltenen Daten sehen können. Staatsbaum zum Zeitpunkt der Aktion, die im Menü auf der linken Seite ausgewählt wurde, der Unterschied zwischen dem letzten und dem aktuellen Statusbaum und mehr.

Mit dem Schieberegler an der Unterseite können Sie auch eine Zeitreise durch die versendete Aktionen. Sie können zu einem bestimmten Zeitpunkt zurückkehren und die Aktionen, die Zustandsänderungen ausgelöst haben, mit einer von Ihnen festgelegten Geschwindigkeit wiederholen.

Dies sind nur die Grundlagen von Redux DevTools, aber diese Funktionen sind für den Anfang am einfachsten und werden Sie am häufigsten verwenden.

Für einen tieferen Einblick in Redux DevTools kann ich den Artikel nur empfehlen „Redux Devtools für Dummies“ von codeburst.

Brauche ich immer Redux?

Definitiv nicht. Kleine und einfache Projekte funktionieren auch ohne sie einwandfrei. Sie haben gerade gesehen, dass Redux ein kleines Boilerplate hinzufügt, um die Dinge einzurichten. Sie müssen Ihre einfache App nicht zu komplizieren (wie wir es gerade getan haben). Greifen Sie nach Redux wenn du Lust hast du brauchst es. Wenn viele Zustandsteile von Komponenten gemeinsam genutzt werden müssen, die im Komponentenbaum und im Status weit voneinander entfernt sind, wird es schwierig, Redux zu verwenden.

Gehen Sie wie bei jedem anderen Tool vorsichtig vor. Wenn Sie sich jedoch dafür entscheiden, React mit Redux zu verwenden, denken Sie daran, dass es nicht ein Muss ist, es für jeden Bundesstaat zu verwenden. Lokaler Staat ist in Ordnung. Verwenden Sie store für Variablen, die für die Anwendung global sein sollten, nicht für alles. Verwenden Sie immer das richtige Tool für den Job.

Letzte Worte

In diesem Handbuch haben Sie gelernt, was Redux ist und warum React-Entwickler wählen Sie, ob Sie es verwenden möchten und wie Sie eine Beispiel-App mit React with Redux erstellen. Hör hier nicht auf. Klonen Sie unser Repository, versuchen Sie, neue Funktionen hinzuzufügen, um den Zähler zurückzusetzen, oder sehen Sie, wie unsere App ohne Redux erstellt würde (Checkout ohne Redux-Branch).

Das sollte gerade genug sein, um dir den Einstieg zu erleichtern. Weitere Informationen finden Sie in den Bonus-Ressourcen am Ende dieses Artikels. Viel Spaß beim Programmieren!

Bonus-Ressourcen:

• Repository, das Code aus diesem Handbuch enthält
• Reduzieren — offizielle Dokumentation
• React-Redux — offizielle Dokumentation
• Redux DevTools erklärt