Zusammenfassung der Fähigkeiten zur Verwendung der Redux-Architektur in ReactNative_javascript

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 ist->Aktion ist erforderlich, um die UI-Eigenschaften zu ändern. Solange sich der Status ändert, wird die Komponente im neuen Status gerendert und die Daten werden in eine Richtung übertragen, während das -Entwurfsmuster von MVC verwendet wird verfügt über einen bidirektionalen 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. Redux Thunk Asynchronous Action installieren Middleware : npm install –save redux-thunk

Drei Prinzipien

Einzelne Datenquelle

Der Status der gesamten Anwendung wird in einem Objektbaum gespeichert, und der Objektbaum existiert in einem eindeutigen Speicher. 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 Connect und Provider bereit.

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

2 oder mapDispatchToProps, eine davon 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

Aktion beschreibt nur die Tatsache, dass etwas passiert ist, und spezifiziert nicht die Anwendung So aktualisieren Sie den Status. 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

In der allgemeinen Implementierung wird switch(action.type) verwendet, um verschiedene Aktionen zu beurteilen, 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: Was zurückgegeben wird, ist der neue Status. Wenn Sie einen Teil des alten Statuswerts beibehalten müssen, verwenden Sie ...state (ES7-Objekt). Erweiterungssyntax, die für Objekte flach ist) Kopieren Sie die entsprechenden Attribute, was Object.assign({}, state, newState) entspricht. Wenn Sie den Status zusammenführen, wird nur eine Ebene zusammengeführt. 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 Prozess kann Netzwerkanforderungen enthalten und schließlich eine Aktion zurückgeben. 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

Wenn die Aktion ausgelöst wird, werden die Daten gemäß ihrem Reduzierschlüssel wiederhergestellt, und dann muss die Aktion nur dann verteilt werden, wenn die Anwendung ausgeführt wird startet, was auch leicht in konfigurierbare Erweiterungsdienste abstrahiert werden kann. Tatsächlich hat die Drittanbieterbibliothek redux-persist dies alles bereits für uns erledigt.

Der Code in Aktion 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. Holen Sie sich alle aktuellen Zustände

通过connect，绑定需要的state以及Action Creator到你的组件的props上，这样组件就可以通过props来调用Action Creator，或者根据不同props来render()不同的组件。

代码：

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持PHP中文网。

相关推荐：

如何理解 redux

JavaScript技巧中关于react-redux中connect()方法详细解析

在React中使用Redux的实例详解

Das obige ist der detaillierte Inhalt vonZusammenfassung der Fähigkeiten zur Verwendung der Redux-Architektur in ReactNative_javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!