Detaillierte Erklärung der Beziehung zwischen React und Redux

Dokumentation: Chinesische Redux-Dokumentation

In der offiziellen Redux-Dokumentation wird Redux wie folgt definiert: ein vorhersehbarer JavaScript-Anwendungsstatusverwaltungscontainer.

1. Die Beziehung zwischen Redux und React

Redux bietet nicht nur Statusverwaltung für React-Anwendungen, sondern unterstützt auch andere Frameworks.

React ist eine Abstraktionsschicht für DOM (UI-Bibliothek), keine vollständige Lösung für Webanwendungen. Daher ist React komplizierter, wenn es um die Datenverarbeitung und Kommunikation zwischen Komponenten geht.

Bei großen und komplexen Anwendungen sind gerade diese beiden Aspekte am kritischsten. Daher ist es schwierig, große Anwendungen nur mit React zu schreiben.

Vorteile von Redux:

Bewerbungsstatus zentral speichern und verwalten

Ignorieren Sie bei der Behandlung von Komponentenkommunikationsproblemen die hierarchische Beziehung zwischen Komponenten

Vereinfachen Sie die Kommunikation zwischen Komponenten in großen und komplexen Anwendungen

Der Datenfluss ist klar und es ist einfach, Fehler zu lokalisieren

2. Reagieren Sie auf die gemeinsame Nutzung mehrerer Komponenten

Extrahieren Sie die Zustände aller Komponenten und konstruieren Sie einen zentralisierten Zustandsbaum in Analogie zum React-Komponentenbaum. Dieser Zustandsbaum entspricht eins zu eins dem React-Komponentenbaum, was der zustandsbehafteten Modellierung des React-Komponentenbaums entspricht:

├── Quelle
   ├── store # Redux-Verzeichnis, allgemein als Store bezeichnet
   │ ├── index.js # Store definieren und exportieren. Der Reducer wird importiert
   │ └── Reducer # Reducer-Funktion ├── App.js # Stammkomponente, importiere die Komponenten „Vater“ und „Unkel“ 

1. Redux kann die Komponentenhierarchie ignorieren

2. Für das Komponentensystem ist Redux eine globale „Variable“ eines Drittanbieters.

3. Drei Kernkonzepte von Redux

Kernkonzepte: store , action , reducer

1. speichern

Store ist ein Lager, der Kern von Redux, das Action und Reducer integriert, ähnlich dem Store von Vuex

Merkmale:

• Eine Anwendung hat nur einen Store
• Antragsstatus pflegen und Status abfragen: store.getState re.getState()
• Wenn Sie einen Store erstellen, erhalten Sie den Reducer als Parameter: const st store = createStore(reducer)
• Wenn Sie eine Statusaktualisierung einleiten, müssen Sie action：store.dispatch(action)

importiere { createStore } von 'redux'
// Einen Shop erstellen
const store = createStore(Reduzierer)

2. Aktion

action ist ein JS-Objekt mit zwei Eigenschaften:

type : Identifiziert das Attribut. Sein Wert ist eine Zeichenfolge. Mehrere Typen werden durch Aktionen getrennt

payload : Datenattribut, optional. Gibt die von dieser Aktion übertragenen Daten an

Merkmale:

• Beschreiben Sie einfach, was zu tun ist
• JS-Objekt, muss ein Typattribut haben, um den Aktionstyp zu unterscheiden
• Je nach Funktion können noch weitere Daten mitgeführt werden um die entsprechende Funktion zu vervollständigen.

const action1 = { Typ:'addN', Nutzlast: 12 }
//speichern.dispatch(Aktion1)
 
const action2 = { Typ: 'Hinzufügen', Nutzlast: 1 }

3. Reduzierer (reine Funktion)

Wirkung:

1. Initialisierungszustand

2. Status ändern

Status ändern: Gibt einen neuen Status zurück, basierend auf dem alten Status und der übergebenen Aktion.

initState = 0
Funktion Reducer(Zustand = InitState, Aktion) {
  Rückgabestatus
}

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!