React + Redux: Komponente wird nicht aktualisiert
Er probiert React + Redux aus und macht wahrscheinlich etwas Dummes, weil eine Komponente, die eine Aktion zum Abrufen von Daten über das Netzwerk auslöst, beim Abrufen der Daten nicht aktualisiert (neu gerendert) wird.
Hier sind die relevanten Teile meines Codes:
Der Index.js der obersten Ebene, der als Einstiegspunkt für die App dient:
%Vor%Top-Level-Container-App:
%Vor%Komponente, die eine Aktion auslöst, um eine Anforderung für Daten zu senden, wenn sie mounten soll und die abgerufenen Daten anzeigen soll:
%Vor%Aktion Schöpfer:
%Vor%Reducer für die Abrufaktion:
%Vor%und schließlich der Wurzelreduzierer:
%Vor% Also, hier ist was ich beobachte. Die Aktion zum Anfordern von Daten wird erfolgreich ausgelöst, eine Anforderung wird gesendet, der Reduzierer empfängt sie, wenn das Versprechen aufgelöst wird, und aktualisiert den Status mit den abgerufenen Daten. An dieser Stelle würde ich erwarten, dass die Top-Level-Komponente App und die Showcase -Komponente erkennen, dass der Speicher aktualisiert und neu gerendert wurde, aber ich sehe es nicht in der Konsole.
Ich bin auch verwirrt durch die Konsolenausgabe von redux-logger :
Insbesondere bin ich überrascht, dass das state Reduzierer vom rootReducer enthält - ich weiß nicht, ob es richtig ist (ein Beispiel auf Redux Logger Github Seite zeigt einen Zustand ohne Reduzierungen). Überraschend ist auch, dass das prev state von redux-logger das gleiche resourcesReducer -Objekt enthält wie das next state , obwohl ich intuitiv erwarten würde, dass prev state mehr oder weniger leer ist.
Könnten Sie bitte darauf hinweisen, was ich falsch mache und wie reagierende Komponenten auf die state Änderungen reagieren?
================================================ ===
AKTUALISIERT:
1) Die Funktion mapStateToProps in der Komponente App wurde so geändert, dass sie korrekt auf Reduziererstatus abgebildet wird:
2) Übergeben Sie resources immer noch an die Showcase-Komponente:
3) Versuchen Sie, resources auf dem Bildschirm anzuzeigen, indem Sie sie stringieren, um zu sehen, was sich tatsächlich in diesem Objekt befindet:
Sehen Sie dies auf dem Bildschirm: This is showcase {} . Die Komponente scheint nicht erneut zu rendern.
Hier ist der Screenshot der Konsole, der zeigt, dass App-Requisiten mit den Werten von next state aktualisiert wurden. Dies führte jedoch nicht dazu, dass die Komponente erneut gerendert wurde:
AKTUALISIERT WIEDER: Und mein Javascript-Fu war auch arm. Ich war mir nicht ganz bewusst, dass ich durch die Rückkehr von Object.assign (state, {resources: action.payload.data }); tatsächlich den Zustand mutierte und dass eine einfache Umkehrung der Argumente mir erlauben würde, das zu erreichen, was ich beabsichtigte. Danke an diese Diskussion über SO zur Erleuchtung.
1 Antwort
Ich bin überrascht zu sehen, dass der Zustand Reduzierungen aus dem rootReducer
enthält
So funktioniert es. Sehen Sie sich combineReducers() genauer an.
Erkenne, dass es sich nicht um eine Liste von Parametern handelt; es ist ein einzelner Objektparameter. Vielleicht ist es in der ES5-Syntax klarer:
%Vor% Der Schlüssel resourcesReducer verweist auf den von der Funktion resourcesReducer() zurückgegebenen Status. Das heißt, die Variable state in resourcesReducer() ist nur ein Teil des gesamten Zustands.
Die an connect() übergebenen Funktionen übernehmen den gesamten Zustand als Argument. Wie Ihr eigentlich aussehen sollte, ist dies:
Tags und Links javascript reactjs redux