React DVA-Implementierungscode

dva

dva ist eine Datenflusslösung, die auf Redux und Redux-Saga basiert. Um die Entwicklungserfahrung zu vereinfachen, verfügt dva auch über integrierte React-Router und Fetch, die in ein leichtes Anwendungsframework umgewandelt werden können.

Verwendung von dva

Definieren Sie ein Modell, ähnlich wie Redux-Toolkit.
Verwenden Sie connect

Verbinden Sie sich wie bei Redux.

Start-up.
Anschließend erfahren Sie, wie Sie Aktionen versenden.

Suchen Sie anhand der entsprechenden Anleitung das passende Reduzierstück heraus und versenden Sie es.

Dies ist die grundlegende Funktionsweise von dva, die relativ einfach zu verwenden ist.

Implementierung von DVA

Idee: Eine Funktion kapseln, einen Speicher erstellen, Reduzierer und Zustände über Modelle sammeln und den Methodennamen in Reduzierern ändern.

Zunächst das Modell. Da es mehrere Modelle gibt, müssen wir sie sammeln.

Ändern Sie zunächst den Methodennamen in Rducer über Namespace.

Dann speichern Sie es.

Dann kann es über den Provider eingefügt werden.

Transformieren Sie den Reduzierer des Modells und geben Sie den von Redux akzeptierten Reduzierer zurück. Zu diesem Zeitpunkt ändert sich der Status des Modells nicht. Es ist nur der Anfangszustand. Was die Komponente tatsächlich akzeptiert, ist der Status in Redux.
Dieser getReducer wird nur einmal aufgerufen, um den echten Reducer zurückzugeben.

Erste Implementierung abgeschlossen.

Unterstützt asynchrone

Dva ist in Redux-Saga integriert, daher ist die Verwendung ähnlich.

Beim Erstellen eines Modells können Sie durch Effekte eine Saga-Middleware erstellen. Versenden Sie dann die entsprechende Aktion

erreichen

Idee: Verarbeiten Sie die Effekte jedes Modells, konvertieren Sie sie in entsprechende Saga-Funktionen, verwenden Sie takeEvery, um auf jeden Attributnamen zu hören (z. B. asyncADD, konvertiert in takeEvery('asyncADD', ()=>{}) usw.), erstellen Sie dann eine Middleware über createSagaMiddleware, das von redux-saga bereitgestellt wird, und verwenden Sie die run-Methode, um die aus den Effekten in jedem Modell konvertierten Saga-Funktionen auszuführen.
Code:

Verwenden Sie getSagas, um die Effekte jedes Modells zu transformieren und sie in einem Array zu speichern. Führen Sie sie dann nacheinander durch forEach aus.
Erfahren Sie, wie Sie konvertieren

Es ist ersichtlich, dass die Auswirkungen jedes Modells in getSaga in die Funktion * () {} umgewandelt werden. Anschließend werden die Auswirkungen eines einzelnen Modells durchlaufen und jedes Attribut von * asyncADD () {} verarbeitet, wie in der Abbildung gezeigt. Eine Saga-Funktion wird über getWatcher zurückgegeben und ein untergeordneter Prozess wird über Fork gestartet, wodurch der Betrieb des Hauptprozesses nicht beeinträchtigt wird.

Jeder getWatcher gibt eine Saga-Funktion (Generatorfunktion) zurück, die das aktuelle Attribut (Schlüssel) über takeEvery überwacht und die nachfolgenden Effekte ausführt. Hier müssen wir die Put-Methode der Redux-Saga ändern, damit sie eine gewisse Präfixtyp-Logik separat ausführt.
Dies ist im Grunde erledigt. Die Effekte jedes Modells werden von der Saga-Funktion verarbeitet, um ausgeführt zu werden, und jede Methode der Effekte wird in einen Schlüssel umgewandelt und über takeEvery abgehört. Auch hier müssen Sie jedem Methodennamen des Effekts ein Präfix hinzufügen

So wird es gemacht.

Es kann normal laufen.

Implementierung des Routers

Es gibt keinen Unterschied bei der Verwendung
dva erbt den Connected-React-Router

Die Verwendung ist also ähnlich. Beachten Sie, dass asynchrone Logik nur in Effekten geschrieben werden kann. Reducer ist synchron und kann nicht weiter versenden.

erreichen:

Basierend auf connectd-react-router

Wissen Sie noch, wie Sie connectd-react-router verwenden? Der erste Schritt besteht darin, ein Routerobjekt zu erstellen.

Der zweite Schritt besteht darin, Middleware zu verwenden.

Übergeben Sie die API als Parameter an app._router. Das ist es.

Wenn er einen Push sendet, wird dieser von der Routing-Middleware abgefangen und verarbeitet und auf eine andere Seite weitergeleitet.

Dies ist das Ende dieses Artikels über die Implementierung von React DVA. Weitere relevante Inhalte zur Implementierung von React DVA finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!