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. Freunde, die sich für .NET interessieren, folgen Sie bitte dem Herausgeber, um einen Blick darauf zu werfen
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:
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
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.
RN ist nicht einfach zu testen. Redux bietet eine sehr praktische Scheintestmethode.
Redux-Entwicklung
Entwicklungsumgebung
Redux installieren: 'npm install –save redux'
React Native- und Redux-Bindungsbibliotheken installieren: npm install –save reagieren-redux
Installieren Sie die asynchrone Aktions-Middleware Redux Thunk: npm install –save redux-thunk
Drei Prinzipien
Einzelne Datenquelle
Die gesamte Anwendung Der Zustand wird 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 es ohne Nebenwirkungen zu handhaben
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, eines ist die Komponente selbst, die gebunden werden soll.
Store
Store ist das Objekt, das Reducer und Aktion verbindet. Store hat die folgenden Aufgaben:
Aufrechterhaltung des Status der Anwendung – ähnlich einer Datenbank, die den gesamten Status der Anwendung speichert.
Stellt die getState()-Methode bereit. Alle aktuellen Zustände abrufen;
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.
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;Nach dem Login kopieren
Reduzierer
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
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,
});Nach dem Login kopieren
Hinweis: Der neue Zustand wird zurückgegeben, wenn Sie müssen einige alte Statuswerte beibehalten, ... state verwenden (ES7s Objekterweiterungssyntax, die entsprechenden Eigenschaften des Objekts werden flach kopiert, hier entspricht Object.assign ({}, state, newState)) und if Wenn Sie den Status zusammenführen, wird er nur auf einer Ebene zusammengeführt. Komplexe Status 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 einschließen kann und schließlich eine Aktion zurückgibt. 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,
});
};Nach dem Login kopieren
Persistenz
Wird basierend auf dem Reduzierschlüssel wiederhergestellt, wenn eine Aktion ausgelöst wird Daten müssen dann nur dann verteilt werden, wenn die Anwendung gestartet wird. Dies kann auch problemlos in einen konfigurierbaren Erweiterungsdienst abstrahiert werden. Tatsächlich hat die Drittanbieterbibliothek redux-persist dies alles bereits für uns erledigt.
Der Code in Aktion kann wie folgt lauten:
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));
};Nach dem Login kopieren
connect
Pass – Stellt die getState()-Methode 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,
};
},Nach dem Login kopieren
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持PHP中文网。
相关推荐：
如何理解 redux
JavaScript技巧中关于react-redux中connect()方法详细解析
在React中使用Redux的实例详解
Das obige ist der detaillierte Inhalt vonMethoden zum Migrieren einer Datenbank zu SQL Server mithilfe von EF Core in der .NET Core-Klassenbibliothek_Praktische Tipps. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
