Das Speichern ist also großartig, das Abrufen wäre auch süß und am Ende möchte ich
sicherstellen, dass wir, wenn wir zum Beispiel den Produktübersichtsbildschirm
besuchen, einfach den Server erreichen und alle Produkte von dort abrufen, damit auf
diesem Bildschirm Bei
jedem Besuch laden wir die neuesten Produkte.
Dazu müssen wir jetzt eine HTTP-Anfrage von dort
senden. Daher möchte ich am Ende eine neue Redux-Aktion auslösen, die den Server erreicht, meine Produkte von
dort abruft und dann die Produkte festlegt in meinem Laden. Also brauche ich hier eine brandneue Aktion,
Set-Produkte, die ich vorher nicht brauchte, weil wir nur mit Dummy-Produkten gearbeitet haben, aber jetzt ist
das nicht mehr der Fall, also sollten Set-Produkte jetzt versendet werden und ich werde hier einen
neuen Action-Ersteller brauchen was ich Fetch-Produkte nennen werde. Dafür habe ich keine Kennung, da ich diese niemals als
Aktion versenden werde, die den Reduzierer erreichen sollte.
Stattdessen ist dies nur mein Aktionsersteller mit dem asynchronen Code mit der HTTP-Anforderung.
Es werden keine Argumente benötigt, aber dank Redux Thunk wird eine Funktion zurückgegeben, die diese Versandfunktion als Argument erhält, und
am Ende möchte ich ein Aktionsobjekt versenden, in dem
der Typ Produkte festgelegt ist und in das ich meine weiterleiten möchte Produkte, aber das sollte natürlich kein leeres Array
sein, sondern die Produkte, die ich von meiner API bekomme. Daher können wir diesen Code hier kopieren,
einschließlich des asynchronen Versandteils hier, bis dahin, wo wir die Antwortdaten erhalten, diese vom Produkt erstellen kopieren
und diesen Teil hier
durch ihn ersetzen, und jetzt tun wir dies Wir senden eine Anfrage an dieselbe
URL wie zuvor, was sinnvoll ist, da dort die
Produkte gespeichert werden.
Jetzt möchte ich jedoch eine Get-Anfrage festlegen, und das ist eigentlich die Standardeinstellung, wenn
wir Fetch verwenden, sodass wir diese nicht festlegen müssen. Für eine Get-Anfrage müssen Sie auch keine Header setzen
und
Sie können keinen Body setzen. Daher können wir dieses zweite Argument beim Abrufen hier
vollständig entfernen. Wir senden einfach eine Abrufanforderung wie diese.
Jetzt erhält die Antwort unsere Daten zurück, aber jetzt gibt es ein wichtiges Merkmal für das Format dieser
Daten, und es ist am besten, wenn wir das einfach sehen.
Lassen Sie mich also die Antwortdaten hier auf der Konsole protokollieren und für den Moment auskommentieren, oder wir können sie dort
belassen, es schadet
nicht, es tut auch nichts Nützliches, wir behandeln
dies nicht im Reduzierer Aber lassen Sie uns dies protokollieren und jetzt zum Produktübersichtsbildschirm gehen und
sicherstellen, dass wir dort diese Aktion zum Abrufen von Produkten auslösen. Zum Glück habe ich dort bereits in
der Produktübersicht Zugriff auf die Redux-Versandfunktion. Jetzt muss ich nur
noch den Verwendungseffekt hinzufügen, damit ich diesen auslösen kann, wenn diese Komponente geladen wird.
Hier kann ich also den Nutzungseffekt hinzufügen und in meiner Funktion hier den Versand aufrufen und jetzt auf
meine Produktaktionen zugreifen, die ich daher als
Produktaktionen aus Speicheraktionen importieren muss. Produkte wie diese sollten Aktionen sein und jetzt verwendet werden Die Produktaktionen hier, um meine Aktion zum Abrufen von Produkten auszulösen,
die am Ende diese HTTP-Anforderung auslöst, und dieser Effekt sollte immer dann ausgeführt
werden, wenn meine Komponente geladen wird. Ich kann also ein leeres Array hinzufügen und tatsächlich meine einzige Abhängigkeit
hinzufügen, die ich habe, nämlich den
Versand. Hier ist dies die einzige Abhängigkeit, die wir innerhalb unserer Komponente definieren, sodass diese tatsächlich nie wieder ausgeführt wird.
Es wird nur ausgeführt, wenn diese Komponente geladen ist, und genau das sollte der
Fall sein. Wenn ich
den Bildschirm besuche, möchte ich diesen Effekt hier auslösen.
Wenn ich dies jetzt speichere, speichern wir dies und jetzt, während dies
geladen wird, sehen Sie hier im Protokoll, dass dies hier sowohl auf Android als auch auf iOS passiert ist,
weshalb ich dies zweimal sehe.
Dies ist, was ich am Ende
zurückbekommen habe, dieses Objekt wurde von Firebase zurückgegeben.
Es ist ein Objekt mit all meinen Produkten und ich habe nur eines, weshalb ich hier nur eines sehe und jedes
Objekt mit seiner eindeutigen ID übereinstimmt, aber das
ist wichtig.
Wir kommen nicht in das Array zurück, wir bekommen ein Objekt mit eindeutigen IDs als Schlüssel zurück und die Werte
für diese Schlüssel sind dann meine Objektdaten und wir müssen das nur wissen, um es richtig zu behandeln.
Zurück in unserer
Aktion sehen die Antwortdaten so aus.
Natürlich arbeite ich in meiner App mit einem Array, also muss ich dies transformieren.
Meine geladenen Produkte oder wie auch immer Sie dies hier aufrufen möchten,
sollten also ein leeres Array sein. Jetzt können wir dieses Objekt durchlaufen, um
die Objektdaten, die Produkte im Objekt, den Produkten im Array zuzuordnen.
Es ist relativ einfach zu tun, wir können hier mit unserem Schlüssel eine for / in-Schleife hinzufügen,
in der wir alle Antwortdaten durchgehen, die wir am Ende hier abgerufen haben, und dann füge ich hier jedes Produkt mit Push zu meinen geladenen
Produkten hinzu, damit dies geschieht Das Array wächst mit der Zeit
und was ich hier am Ende hinzufüge, ist nur ein neues Produkt, das das Produktmodell verwendet, das Sie
daher
importieren müssen. Stellen Sie also sicher, dass dieser Import hier auf Ihren Modellordner und dort
auf die Produktdatei und mich
zeigt Erstellen Sie hier ein neues Produkt, bei dem meine ID der Schlüssel ist, da dies die eindeutige ID ist, die
wir in dem Objekt haben, für das wir eine Schleife ausführen, und dann die Benutzersache, dh U1-Dummy-Daten, da keine Benutzerdaten
beteiligt sind hier und da müssen wir uns das Objekt ansehen, das wir von Firebase zurückbekommen haben, um den Titel zu erhalten
und so weiter.
Hier lautet unser Titel für dieses neue Produkt, das wir erstellen, einfach resData für den angegebenen Schlüssel. Titel und das gleiche natürlich
hier für
die imageUrl, also. Bild URL. Für die
Beschreibung und natürlich auch für den Preis. Dies fügt also alles zu geladenen Produkten hinzu, und jetzt werden geladene Produkte ein
aufgefülltes Array sein, das ich hier zu der Aktion hinzufügen kann, die versendet wird, zu der Aktion
zum Festlegen von Produkten.
Das einzige, was fehlt, ist, dass wir jetzt zum Reduzierstück gehen und dort mit Set-Produkten umgehen können, vielleicht hier als
erster Fall, aber natürlich spielt die Position keine Rolle. Fügen Sie hier festgelegte Produkte hinzu,
und stellen Sie sicher, dass Sie sie aus Ihrer Aktionsdatei importieren. Dann ist dies eine
sehr triviale Sache, die wir gleich erledigen werden. Am Ende muss ich nur einen
neuen Status zurückgeben, in dem die verfügbaren Produkte gleichbedeutend mit Aktion sind. Produkte, also zu den Produkten, die ich hier in meinem Aktionsersteller abgeleitet habe
und die ich zu meiner versendeten Aktion hinzufüge. Und für das Benutzerprodukt ist
es ziemlich ähnlich, da ist es Aktion. Produkte, die nur nach allen Produkten gefiltert wurden, die meine Benutzer-ID haben. So
und im Moment bedeutet dies aufgrund meines Dummy-Codes hier, in dem ich meine Benutzer-ID fest codiere,
natürlich, dass alle geladenen Produkte als meine Produkte behandelt werden.
Dies werden wir später ändern, sobald wir die Authentifizierung hinzugefügt haben. Wenn dies also neu geladen wird, sehen
Sie, dass wir mit den Dummy-Daten beginnen, diese dann aber sofort durch
diese geladenen Daten ersetzt werden. Das Laden von Daten funktioniert
also einwandfrei. Wir können damit genauso arbeiten wie mit unseren eigenen Daten hier.
Natürlich speichern wir keine Bestellungen auf dem Server und dergleichen, aber wir können unsere Daten laden, die
wir zuvor auf dem Server gespeichert haben.