So verwenden Sie die Redux-Architektur in ReactNative

In diesem Artikel wird hauptsächlich die Zusammenfassung der in ReactNative verwendeten Redux-Architektur vorgestellt. Der Herausgeber findet sie recht gut, daher werde ich sie jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und werfen wir einen Blick darauf

Dieser Artikel stellt eine Zusammenfassung der in ReactNative verwendeten Redux-Architektur vor und teilt sie mit allen. Die Details sind wie folgt:

Ich verwende Redux seit einiger Zeit. Zusammenfassend.

Warum Redux verwenden?

Hintergrund:

1. RNs Zustand (veränderlich, Unterkomponente unsichtbar) und das Design von Requisiten (unveränderlich, für Unterkomponenten sichtbar) können bei Großprojekten leicht zu Zustandsverwirrungen aufgrund unbeabsichtigter Zustandsänderungen und Komponenten-Rendering-Fehlern führen

2. RN verwendet Virtual DOM, das keine Zielbindung->Aktion ist, ist zum Ändern der UI-Eigenschaften erforderlich. Solange sich der Status ändert, wird die Komponente im neuen Status gerendert und die Daten werden in eine Richtung übertragen, während das MVC-Entwurfsmuster eine hat bidirektionaler Datenfluss.

3. RN ist nicht einfach zu testen. Redux bietet eine sehr praktische Scheintestmethode.

Redux-Entwicklung

Entwicklungsumgebung

1. Redux installieren: 'npm install –save redux'

2. React Native- und Redux-Bindungsbibliotheken installieren: npm install –save reagieren-redux

3. Installieren Sie die asynchrone Aktions-Middleware Redux Thunk: npm install –save redux-thunk

Drei Prinzipien

Einzelne Datenquelle

für den gesamten Anwendungszustand ist in einem Objektbaum gespeichert, der in einem eindeutigen Speicher vorhanden ist. Der Status im Store ist an die Komponente gebunden

Status ist schreibgeschützt

Die einzige Möglichkeit, den Status zu ändern, besteht darin, eine Aktion auszulösen. action ist ein gewöhnliches JS-Objekt, das ein Typattribut enthält, das Ereignisse als Konstanten darstellen kann.

Verwenden Sie reine Funktionen, um Änderungen durchzuführen

Schreiben Sie Reduzierer, um zu beschreiben, wie die entsprechende Aktion den Zustand ändert. Im Allgemeinen können Sie switch(action.type) verwenden, um ohne Nebenwirkungen damit umzugehen

Verwenden Sie

react-redux stellt Verbindung und Anbieter bereit.

1.Provider ist der Verteilungspunkt der obersten Ebene und das Attribut ist Store, das den Status an alle verbundenen Komponenten verteilt

2.connect: akzeptiert zwei Parameter: einer ist mapStateToProps oder mapDispatchToProps, und das andere ist die Komponente selbst, die gebunden werden soll.

Store

Store ist das Objekt, das Reducer und Aktion verbindet. Store hat die folgenden Aufgaben:

1. Aufrechterhaltung des Status der Anwendung – ähnlich einer Datenbank, die den gesamten Status der Anwendung speichert.

2. Stellt die getState()-Methode bereit. Alle aktuellen Zustände abrufen;

3. stellt die Dispatch(aktion)-Methode zum Aktualisieren des Zustands bereit, was dem Speichern in der Datenbank und dem Speichern der Aktion zum Ändern des Zustands entspricht.

4. Registrieren Sie den Hörer über „subscribe(listener)“.

Store ist im Wesentlichen ein Objekt, das den Status der gesamten Anwendung in Form eines Baums speichert. und stellt einige Methoden bereit. Zum Beispiel getState() und Dispatch().

Die Redux-Anwendung hat nur einen Store.

Store wird durch die Methode „createStore“ erstellt, basierend auf dem Anfangszustand des Root-Reduzierers der gesamten Anwendung.

Der Code lautet wie folgt:

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';//异步
import reducers from './reducers';
const Store = applyMiddleware(thunk)(createStore)(reducers);
export default Store;

Reduzierer

Die Aktion beschreibt nur die Tatsache, dass etwas passiert ist, und gibt nicht an, wie sich die Anwendungsaktualisierungen befinden . Das ist es, was der Reduzierer tut.

Die Essenz von Reducer ist eine Funktion, und zwar eine reine Funktion. Es gibt keine Nebenwirkungen. Einfach ausgedrückt ist der Reduzierer nur für eine Aufgabe verantwortlich, nämlich den Status im Store basierend auf der empfangenen Aktion und dem empfangenen Status zu ändern:

(state, action) => newState

Im Allgemeinen implementiert. Zu diesem Zeitpunkt werden verschiedene Aktionen über switch (action.type) beurteilt, und der Standardwert ist der alte Status. Auch der Ausgangszustand kann definiert werden.

Code:

import { combineReducers } from 'redux';
const newState = (state = {}, action = {}) => {
 switch (action.type) {
  case ActionTypes.CSTATE:
   return { ...state, ...action.state };
  case '_DPDATACHANGE_':
   return {...state, ...action.dpState};
  default:
   return state;
 }
};
//Reducer 合并
export default combineReducers({
 newState,
});

Hinweis: Der neue Status wird zurückgegeben. Wenn Sie einen Teil des alten Statuswerts beibehalten müssen, verwenden Sie ...state (ES7-Objekterweiterungssyntax, die entsprechenden Eigenschaften von Das Objekt wird hier flach kopiert. Entspricht Object.assign({}, state, newState)), und wenn Sie den Status zusammenführen, wird nur eine Ebene zusammengeführt, und komplexe Zustände müssen manuell zusammengeführt werden.

Aktion

Aktion ist ein gewöhnliches JS-Objekt, das mindestens ein Typattribut enthält, das das Ereignis darstellt, und andere Attribute können zum Übergeben von Daten verwendet werden. In der Praxis wird eine Funktion für einen Prozess definiert, der Netzwerkanforderungen und schließlich eine Aktion zurückgeben kann. Diese Funktion wird als Action Creator bezeichnet.

Code: Store kann diese Aktion auslösen. Der Aktionstyp stellt die Kennung dar, und der Status sind die darin enthaltenen Daten.

export const newState = state => {
 Store.dispatch({
  type: ActionTypes.CSTATE,
  state,
 });
};

Persistenz

Stellen Sie die Daten gemäß ihrem Reduzierschlüssel wieder her, wenn die Aktion ausgelöst wird, und müssen Sie die Aktion dann nur dann verteilen, wenn die Anwendung gestartet wird, was auch der Fall ist lässt sich leicht in konfigurierbare Erweiterungsdienste abstrahieren, tatsächlich hat die Drittanbieterbibliothek redux-persist all dies für uns erledigt.

Der Code in Action kann wie folgt aussehen:

export const getStorage = async (key) => {
 const d = await AsyncStorage.getItem(key);
 return JSON.parse(d);
};
export const setStorage = (key, value) => {
 AsyncStorage.setItem(key, JSON.stringify(value));
};

connect

Stellen Sie die Methode getState() bereit. Erhalten Sie den gesamten aktuellen Status

Binden Sie über Connect den erforderlichen Status und Action Creator an die Requisiten Ihrer Komponente, sodass die Komponente Action Creator über Requisiten aufrufen kann, oder render() basierend auf verschiedenen Requisitenkomponenten unterschiedlich.

Code:

mapStateToProps({ newState }) {
      const value = newState[name];//name: newState.name
      return {
       name,
      };
     },

Das Obige habe ich für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie die versteckte Anzeige in Angular

So implementieren Sie sensible Textaufforderungen in Angular

So implementieren Sie es in WinkelreihenfolgeDurch Sortieren und Fuzzy-Abfrage

So erhalten Sie den Schlüsselcode der Tastatur in Javascript

vue vuex vue-rouert Berechtigungsrouting (ausführliches Tutorial )

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Redux-Architektur in ReactNative. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!