Suchen Sie nach etwas, das Ihnen hilft, mobile Anwendungen in React Native zu schreiben, die sich konsistent verhalten, in verschiedenen Umgebungen ausgeführt werden und einfach zu testen sind? Es gibt eine Lösung, und Sie haben sie gerade gefunden!
Sie sind sicherlich auf die Tatsache gestoßen, dass es schwierig ist, Zustände zu verwalten und Daten von einer Komponente an eine andere Komponente (oder untergeordnete Komponenten) weiterzugeben, wenn Ihre Anwendung größer und komplexer wird. Genau hier kann Redux Ihnen helfen: Es bietet globalen Zugriff auf Status oder Daten, die in jeder Komponente verwendet werden können, ohne von anderen Komponenten abhängig zu sein.
Der Artikel ist ein umfassender Artikel für Anfänger zur Verwendung von Redux und Redux Toolkit in einer React Native-Anwendung. In diesem Handbuch wird davon ausgegangen, dass Sie die Grundlagen von React Native kennen, aber falls dies auch für Sie neu ist, finden Sie bei uns alles Anleitung zu React Native. Wir verwenden auch eine Android-Emulator In diesem Tutorial können Sie ein Android-Gerät auf Ihrem Computer simulieren, sodass Sie Ihre Anwendung auf einer Vielzahl von Geräten und Android-API-Ebenen testen können, ohne jedes physische Gerät benötigen. Beachten Sie, dass dieser Emulator fast alle Funktionen eines echten Android-Geräts bietet.
Um Ihnen das Erlernen der Grundlagen von Redux zu erleichtern, stellen wir Ihnen nebenbei Codebeispiele für eine einfache Gegenanwendung zur Verfügung. Es wird ungefähr so aussehen:
Hier ist der Code unserer SimpleCounter-Komponente:
Im Moment ist dieser Code statisch und wir haben keinen Zustand innerhalb der Komponente deklariert. Sie können gerne den Codebeispielen folgen, während wir Redux in unsere native React-App integrieren. Unser React Native-Tutorial (Link oben) zeigt Ihnen, wie Sie eine React Native-Umgebung einrichten. Stellen Sie anschließend sicher, dass Sie die Redux- und React-Redux-Bibliotheken installieren. Verwenden Sie dazu einfach den folgenden Befehl:
Wenn Sie npm 5.0.0 oder höher verwenden, geben Sie stattdessen Folgendes ein:
Redux ist eine Javascript-Bibliothek, mit der Sie den Status Ihrer Anwendung verwalten können. Dazu wird dem Entwickler ein zentraler Ort namens Store zur Verfügung gestellt, an dem der Status gespeichert und durch Aktionen und Reduzierungen geändert wird. Dieser zentrale Ort ermöglicht es Ihnen, den Status auf mehreren Bildschirmen zu teilen und genau zu wissen, wo und wie der Status geändert wird. Dies ist besonders nützlich bei wachsenden Anwendungen, die für die Entwickler zu umfangreich sind, um die Datenflüsse vollständig zu kennen, und daher fehleranfällig sind.
Wie oben erwähnt, verwendet Redux eine Kombination aus Aktionen, Reduzierern und dem Speicher, um den Anwendungsstatus zu verwalten. Um Redux zu verstehen und zu lernen, müssen Sie wissen, wie diese Abstraktionen funktionieren. Lass uns anfangen!
Ganz einfach, der Anwendungsstatus besteht aus allen Informationen, die die Anwendung verwendet und/oder ändert. Ein zentralisierter Status und eine vorhersehbare Art der Änderung können es Anwendungen ermöglichen, mit den Informationen, die sie den Benutzern zeigen, in Einklang zu bringen. Dies ist besonders nützlich für große Anwendungen mit nur einer Seite.
Aktionen und Reduktoren verändern zusammen den Zustand. Genau genommen bestimmen Aktionen, was geändert wird und wo. Reduktoren geben an, wie es geändert wird. Wenn wir das Layout zu Beginn des Blogposts analysieren, benötigen wir drei Aktionen: INCREMENT, DECREMENT und CHANGE_BY_AMOUNT. Aktionen sind Objekte mit einem Typ und einem Payload-Attribut. Der Typ ist die Kennung der Aktion, und die Nutzlast enthält alle Informationen, die der Reducer benötigt, um den Status zu ändern. Bei den ersten beiden Aktionen wird der Zählerwert nur um 1 verringert oder erhöht. Wir müssen also nur zwei Objekte mit dem Attributtyp definieren, und der Reducer kümmert sich um den Rest. Die dritte Aktion muss eine Nutzlast haben, die angibt, um wie viel wir den Zähler erhöhen oder verringern wollen. Deklarieren Sie Ihre Aktionen in einer separaten Datei namens Actions:
Wie Sie sehen können, ist es ziemlich einfach. Als Nächstes definieren wir den Anfangszustand. Dies geschieht in einer anderen Datei zusammen mit dem Reducer:
Wir legen den Anfangszustand so fest, dass ein Objekt namens counter mit dem Attribut amount, beginnend bei 0, vorhanden ist. Sie können auch sehen, dass der Anfangszustand eine Konstante und keine Variable ist, was keinen Sinn zu machen scheint, aber wir werden es Ihnen später erklären. Als Nächstes bauen wir den Reducer, eine Funktion, die den aktuellen Status und die Aktion — als Argumente — empfängt, um den neuen Zustand der Anwendung zu erzeugen. Hier ist es:
Wir dürfen den Zustand im Reducer nicht mutieren. Warum? Tatsächlich sollte der Reducer das Zustandsobjekt nicht direkt ändern. Stattdessen sollte es ein neues Objekt erstellen, das den neuen Status darstellt. Die Rendering-Engine von React vergleicht das vorherige Zustandsobjekt mit dem neuesten Zustandsobjekt.
Wenn Sie den Status direkt ändern, weiß React nicht, was sich geändert hat, und es wird eine fehlerhafte Vorstellung vom Anwendungsstatus haben. Du kannst anfangen, darüber zu lesen hier. Aus diesem Grund haben wir am Anfang den Anfangszustand als Konstante und nicht als Variable deklariert, da wir so tun, als würde das Objekt des Anfangszustands niemals verändert werden.
Der nächste Schritt besteht darin, den Shop zu erstellen. Das Geschäft ist das Objekt, in dem der Status gespeichert wird. Es ist üblich, den Store zu erstellen und ihn in eine separate Datei zu exportieren. Überprüfen Sie es unten:
Wir erstellen den Store mit der Methode createStore () von Redux, die als Argument die zuvor definierte Reducer-Funktion erhält. Mit dem Store können wir Aktionen mit der Versandmethode aufrufen (wird später in dieser Anleitung gezeigt), um den Status zu ändern.
Jetzt machen wir den Store verfügbar, indem wir ihn an die Provider-Komponente übergeben, die unsere SimpleCounter-Komponente verschlingt. Die Provider-Komponente ermöglicht den Zugriff auf den Store in der SimpleCounter-Komponente und allen darin enthaltenen Komponenten.
Die Provider-Komponente wird aus der React-Redux-Bibliothek importiert, der offiziellen Bindungsbibliothek für React/React Native und Redux. Im Folgenden wird beschrieben, wie das geht:
Als Nächstes wollen wir unsere Komponenten mit dem Redux Store verbinden. Wir können dies tun, indem wir die Connect-Methode aus der React-Redux-Bibliothek in unserer SimpleCounter-Komponentendatei wie folgt verwenden:
Wir müssen zwei Argumente an die Connect-Methode übergeben: die Komponente, die wir verbinden möchten (simpleCounter) und eine Funktion, die den Anwendungsstatus unseren Komponentenrequisiten zuordnet.
Beachten Sie, dass wir in der Funktion mapStateToProps nur Zugriff auf das State-Objekt haben, da wir die SimpleCounter-Komponente mit der Provider-Komponente verschlungen haben.
Die Connect-Methode führt das von mapStateToProps zurückgegebene Objekt mit den Requisiten der SimpleCounter-Komponente zusammen, um über this.props.amount auf den Wert state.counter.amount zuzugreifen.
Die Versandmethode wird auch über Requisiten verfügbar, und wir können jetzt unsere Aktionen importieren und innerhalb der SimpleCounter-Komponente versenden. Hier ist der aktualisierte Code für die SimpleCounter-Komponente:
Jetzt haben wir also einen zentralisierten Speicher, in dem der Status gespeichert und auf vorhersehbare Weise durch Aktionen und Reduzierungen geändert wird, aber Sie haben vielleicht bemerkt, dass der Zählerwert jedes Mal, wenn Sie die App aktualisieren oder beenden, auf Null zurückkehrt. Das liegt daran, dass der Status gerade nicht beibehalten wird und jedes Mal, wenn Sie die Anwendung öffnen, der Reducer den Zählerwert auf Null (den Anfangszustand) definiert.
Die Statuspersistenz ist wichtig, wenn Sie bestimmte Informationen beibehalten müssen, auch wenn der Benutzer die Anwendung schließt, z. B. Anmeldetoken oder einige Konfigurationseinstellungen. Sie können die Zustandspersistenz in einer React Native-App erreichen, indem Sie die Redux-Persist-Bibliothek verwenden.
Redux persist speichert den Redux-Store in einem lokalen persistenten Speicher und ruft ihn jedes Mal ab, wenn die App erneut geöffnet oder aktualisiert wird. Wir verwenden einen Android-Emulator, aber Redux-Persist funktioniert auch mit IOS. Beginnen wir mit der Installation von Redux Persist:
Ändern Sie danach die Datei Store.js wie folgt:
Importieren Sie zuerst die Methoden PersistStore und PersistReducer aus der Redux-Persist-Bibliothek. Übergeben Sie den Reducer zusammen mit dem PersistConfig-Objekt an die persistReducer-Methode, um einen PersistedReducer zu erstellen.
Deklarieren Sie im PersistConfig-Objekt, dass Sie AsyncStorage verwenden werden, um den Redux-Speicher beizubehalten, der ein unverschlüsselter Schlüsselwertspeicher von React Native ist.
Rufen Sie abschließend die Methode persistStore auf, um sicherzustellen, dass unser Store persistent ist. Wenn Sie ein größeres Projekt haben, müssen Sie möglicherweise nicht den gesamten Status beibehalten. In diesem Fall können Sie die Methoden „Whitelist“ und „Blacklist“ im PersistConfig-Objekt verwenden, um auszuwählen, welche Reduktoren Sie beibehalten möchten. Klicken Sie hier wenn du mehr wissen willst.
Importieren Sie zuletzt in der Datei App.js den PersistedStore aus Store.js und verschlingen Sie den SimpleCounter mit der PersistGate-Komponente, um sicherzustellen, dass die Benutzeroberfläche der App erst gerendert wird, wenn der persistente Status abgerufen und im Redux-Store gespeichert wurde.
Wir müssen das Redux-Toolkit erwähnen, eine Bibliothek, die von den Redux-Entwicklern geschrieben wurde, um eine effizientere Redux-Logik zu erstellen. Die Verwendung der Funktionen dieser Bibliothek führt dazu, dass Ihr Code kompakter und einfacher zu lesen ist. Hier ist eine Einführung in einige dieser Funktionen:
Das Redux-Toolkit hat uns eine neue Art der Erstellung einer Aktion vorgestellt. Es funktioniert so:
Die Methode createAction empfängt den Aktionstyp als Argument und gibt eine Aktionserstellungsfunktion zurück. Wir können dann diese Funktion aufrufen und die Nutzlast als Argument übergeben, um das Aktionsobjekt zu erstellen. Sie können auch mit der toString () -Methode auf den Aktionstyp zugreifen, z. B. incrementAction.toString (). Diese Methode macht es möglich, dass wir die Aktionstypen nicht mehr als Konstanten deklarieren müssen, wodurch der Boilerplate-Code erheblich reduziert wird.
Dies ist eine weitere Methode des Redux-Toolkits, die darauf abzielt, unseren Code zu vereinfachen. Die Methode ermöglicht es uns, Reducer mit der Lookup-Tabellen-Notation zu schreiben, sodass wir einen viel saubereren Code schreiben können. Die von der createAction () -Methode zurückgegebenen Objekte können direkt als Tabellenschlüssel verwendet werden. In Anlehnung an die vorherige Reduktionslogik haben wir:
Darüber hinaus verwendet createReducer () Immer, um Reduktoren mit einfacherer mutierender Logik zu schreiben. Immer übersetzt alle mutierenden Operationen in äquivalente Kopieroperationen. Jetzt können wir unseren Reducer also so schreiben:
Viel einfacher findest du nicht?
Die Funktion configureStore () umschließt die createStore () -Methode und erstellt den Store, der einige Standardkonfigurationen einrichtet. Außerdem empfängt die Methode ein Konfigurationsobjekt anstelle einer Gruppe von Funktionen. Wenn Sie sie verwenden, müssen Sie den Reducer in ein Objekt übergeben, das dem Reducer-Attribut zugeordnet ist. So wie das:
Die Konfiguration des Shops ist ein Thema, das wir in diesem Blogbeitrag nicht behandelt haben, aber wir waren der Meinung, dass es trotzdem wichtig ist, dies zu erwähnen. Wenn Sie möchten, können Sie es gerne selbst ausprobieren. Eine weitere Sache, wenn Sie Redux-Persist und Redux-Toolkit in dasselbe Projekt integrieren möchten, sind Sie möglicherweise auf den Fehler „Ein nicht serialisierbarer Wert wurde in einer Aktion erkannt“ gestoßen. Dies liegt daran, dass ConfigureStore () von Redux-Toolkit eine serialisierbare Überprüfung von Aktionen beinhaltet und redux-persist eine Funktion darin übergeben muss. Eine Möglichkeit, dies zu lösen, besteht darin, getDefaultMiddleware aus dem Redux-Toolkit zu importieren und die serialisierbare Prüfung der Redux-Persist-Aktionstypen zu deaktivieren. So wie:
Die Diskussion und die Lösung für dieses Problem finden Sie in diesem Forum.
Da ist es. Das Ergebnis sollte eine einfache, aber funktionale Counter-App sein. Wir hoffen, Sie haben gelernt, wie die Abstraktionen von Redux zusammenarbeiten, und sich mit den Datenflüssen vertraut gemacht, die sie erstellen, damit es für Sie einfacher wird, Redux auf Ihre App anzuwenden. Darüber hinaus ist Redux eine unabhängige Bibliothek. Die Logik, die Sie hier gelernt haben, wäre also dieselbe, wenn Sie Redux in eine Webanwendung integrieren möchten, die React verwendet. Wünsche dir viel Glück beim Programmieren!
Informatikstudent und Teilzeitbeschäftigter von Imaginary Cloud. Begierig darauf, neue Technologien und Techniken zu erlernen. Tennis- und Klavierspieler.
People who read this post, also found these interesting:
.webp)
.webp)
%20(2).webp)
