Im Creature Product Action Creator, der derzeit eine Funktion ist, die nur eine Aktion zurückgibt,
können wir dies jetzt ein wenig optimieren. Anstatt eine Aktion zurückzugeben, können wir dank
Redux
Thunk jetzt eine andere Funktion zurückgeben. Dank dieses Pakets können wir dies jetzt tun. Dies ist
eine Funktion, die die Versandfunktion als Argument empfängt und dann wiederum eine senden muss Aktion. Hier in dieser Rückgabefunktion muss ich dies jetzt einfach
nicht
zurückgeben, sondern diese Aktion auslösen. Das ist der
wichtige Unterschied, und mir fehlt hier eine geschweifte Klammer.
Also was ist passiert?
Ich ändere create product so, dass es eine Funktion ist, die wir tatsächlich noch aus unseren Komponenten heraus versenden
können, die aber jetzt noch wie
zuvor funktionieren kann. Wir müssen also nicht alle diese Aktionsersteller ändern, damit Sie sich jetzt
an die alte Syntax halten können Dank Redux Thunk wird sozusagen auch eine
alternative Syntax unterstützt, bei der diese Aktionserstellungsfunktion nicht sofort ein Aktionsobjekt zurückgibt, sondern bei der eine Funktion
zurückgegeben wird. Wenn dies der Fall ist, greift Redux Thunk ein und stellt sicher, dass alles
noch vorhanden ist funktioniert und wenn es eine Funktion zurückgibt, dann ist dies eine Funktion,
die ein Argument erhalten muss, die Versandfunktion, die automatisch von Redux Thunk übergeben wird, so dass
Redux
Thunk diese Funktion am Ende für Sie aufruft und Sie es dann können Versenden Sie dann
eine neue Aktion und senden Sie hier das eigentliche Aktionsobjekt, das
wir zuvor versenden wollten. Bevor Sie dies tun, können Sie jetzt jeden gewünschten asynchronen Code ausführen, der zulässig ist und
Ihren Redux nicht beschädigt Flow, weil Redux Thunk sich darum kümmert und Sie mehr
darüber in meinem React Course erfahren können, zum Beispiel oder
natürlich in der offiziellen Redux Thunk-Dokumentation, auch in den offiziellen Redux-Dokumenten.
Jetzt können wir hier eine HTTP-Anfrage senden und in React Native die integrierte Abruf-API verwenden.
Das Abrufen funktioniert hier im
Wesentlichen wie die Abruf-API im Browser, in der diese ebenfalls verfügbar ist.
Es wird eine URL benötigt, an die Sie die Anfrage senden möchten, und diese URL haben wir
hier erhalten. Ich kopiere diese URL einfach aus Firebase und gebe sie hier ein.
Jetzt klingt das Abrufen so, als würde es immer
nur Daten abrufen. Wenn also Daten abgerufen werden, der Name hier jedoch etwas verwirrend ist, wird er nicht nur
zum Abrufen von Daten verwendet, sondern Sie können ihn auch zum
Senden einer Post-Anfrage oder einer Put-Anfrage verwenden Art der HTTP-Anfrage. Jetzt senden wir auch nicht nur eine Anfrage
an diese URL, sondern wie gesagt, Firebase übersetzt Ihre Anfragen in eine Art Datenbankabfrage und eine Datenbankstruktur, sodass Sie
hier jeden gewünschten Knoten und jedes gewünschte Segment
hinzufügen können Beispielsweise erstellen Produkte und Firebase hier in der Datenbank einen Ordner und speichern Ihre
Daten dort.
Wichtig und das ist nur eine Firebase-spezifische Sache, die Sie hinzufügen müssen. json hier.
Dies ist aufgrund von React Native oder aufgrund von Javascript oder aufgrund einer HTTP-Anforderung nicht erforderlich. Dies
ist nur eine Firebase-spezifische Sache. Standardmäßig würde dies eine Get-Anfrage senden,
aber um Daten zu speichern, möchte Firebase eine Post-Anfrage und um diese zu senden, müssen wir ein
zweites Argument zum Abrufen übergeben, das ein Javascript-Objekt sein sollte. In diesem zweiten Argument können Sie den
Methodenschlüssel einrichten und die HTTP-Methode dieser Anforderung beschreiben. Diese kann abgerufen, eingegeben usw. werden. Hier
sollte ein Beitrag angegeben werden, der dieses Produkt hinzufügt, das wir an diesen Knoten senden möchten
wird dort erstellt.
Jetzt können Sie dort auch einige Header einrichten, und wir müssen
einen Header festlegen. Wir müssen den Header für den Inhaltstyp hinzufügen. Sie fügen einfach Header als Objekt
hinzu und haben dann Schlüssel-Wert-Paare mit Ihren Header-IDs als Schlüssel und den Werten als Werte und hier
ist der Wert application / json, um Firebase mitzuteilen, dass wir einige JSON-Daten senden werden,
und dann müssen wir das tun.
Wir müssen einen Text mit den Daten hinzufügen, die wir an diese Anforderung anhängen möchten, und die Daten sollten
im JSON-Format vorliegen.
Zum Glück unterstützt React Native das JSON-Objekt, das auch vom serverseitigen Javascript unterstützt
wird. Dort können wir stringify aufrufen, um ein Javascript-Array oder -Objekt in das JSON-Format umzuwandeln.
Am Ende möchte
ich also mein Produkt anhängen. Am Ende möchte ich hier
ein Objekt stringifizieren, das meinen Titel, meine Beschreibung, meine imageUrl
und meinen Preis enthält, nicht die ID,
da Firebase hier tatsächlich eine ID für uns generiert, was sehr praktisch ist.
Jetzt wird die Anfrage gesendet, aber natürlich möchte ich das Produkt nur lokal erstellen,
wenn diese Anfrage erfolgreich war, da ich dann tatsächlich auch die automatisch erstellte ID
verwenden kann, die Firebase an mich zurücksendet und bequem ein Versprechen zurückgibt, nämlich dieses Javascript-Objekt Das wird sich irgendwann in
einen Wert auflösen oder in Zukunft einen Fehler auslösen.
Um auf diese Antwort zu warten, können wir sie dann hier nach dem Abrufen hinzufügen, also
auf dieses Versprechen und wir werden unsere Antwort hier erhalten, damit wir alles mit der Antwort machen können.
Sie können sich die Fehler auch mit catch anhören, und das sollten
Sie eigentlich schon wissen,
da Versprechen nicht React Native-spezifisch sind. Das ist Vanilla Javascript, und React Native unterstützt auch die
modernere asynchrone Wartesyntax anstelle von then und catch. Um dies zu verwenden, fügen Sie hier vor Ihrer Funktion
asynchrones, dieses asynchrone Schlüsselwort hinzu, und jetzt können Sie Ihre Antwort hier abwarten und sie in einer Konstanten mit dieser Syntax mit
dem Schlüsselwort await speichern.
Jetzt hinter den Kulissen wandelt dies dies mit dann in die alte Syntax um.
Dies ist also so, als hätten Sie dann hier hinzugefügt und Ihre Antwort in einem Rückruf verwendet, den Sie dort erhalten haben.
Dies ist jedoch etwas einfacher zu lesen, weshalb ich diese asynchrone Wartesyntax verwenden
werde. Beachten Sie jedoch, dass dies dem Hinzufügen entspricht und nur lesbarer ist. Wenn Sie übrigens async await verwenden, gibt diese Funktion
hier immer automatisch ein Versprechen zurück. Daher gibt diese gesamte Funktion zum Erstellen
von
Produkten jetzt ein Versprechen zurück.
Das hat es vorher nicht
getan, jetzt wird
es, Sie sehen, dass es hier jetzt ein Versprechen zurückgibt. Das ist also unsere Antwort.
Diese Antwort kann jetzt entpackt werden, um die Daten dort abzurufen, also
die Antwortdaten, die durch Aufrufen der Antwort erfolgen. json, das ist eine Methode, die für das
Antwortobjekt verfügbar ist, das wir erhalten. Dies ist wieder eine asynchrone Aufgabe, auf die
wir warten müssen, und jetzt erhalten wir am Ende die Daten, die Firebase beim Hinzufügen eines Produkts zurückgibt.
Jetzt können wir diese Antwortdaten vorerst einfach protokollieren, um zu sehen, was sich dort befindet, und ich versende meine Aktion immer
noch hier. Da wir hier jedoch darauf warten und dies so ist, als ob es sich um mehrere
Then-Blöcke handelte, wird dies erst versendet, wenn diese Vorgänge hier ausgeführt werden erledigt.
Speichern Sie dies also und fügen Sie ein neues Produkt hinzu, indem Sie hier zum Admin-Bereich
gehen. Dann füge ich ein weißes Shirt
hinzu. Ich habe dafür ein schönes imageUrl ausgewählt.
Hier ist es.
Nehmen wir an, das kostet 39. 99, das ist ein weißes Hemd, das ziemlich stilvoll ist.
Wenn ich das jetzt speichere, muss ich es zuerst laden, jetzt wird es hinzugefügt, hier ist es
und jetzt, wenn Sie
sich Firebase ansehen,
sehen wir auch, dass es jetzt einen Produktknoten gibt. Dort ist dies diese eindeutige ID und dort
haben wir die Daten, die wir übermittelt haben. Wenn Sie sich Ihre Konsole
ansehen, sehen Sie, dass wir dies zurückbekommen haben. Das
sind diese Antwortdaten hier.
Dieser enthält einen Namensschlüssel und dann auch diese von Firebase generierte ID. Dies bedeutet, dass wir beim Versand unserer Daten
hier tatsächlich einen ID-Schlüssel hinzufügen und resData hinzufügen können. Name, um auf diesen Namensschlüssel bei
der Antwortrückgabe durch Firebase zuzugreifen und die serverseitig generierte ID am Ende
an unseren Produktreduzierer zum Erstellen oder an die im Reduzierer ausgeführte Logik weiterzuleiten.
Im Produktreduzierer können wir diese Dummy-ID hier eigentlich nicht verwenden, sondern
erwarten dies für unsere Produktdaten. Dort erhalten wir jetzt ein ID-Feld, das die serverseitig generierte ID ist.
Ich werde mich zwar vorerst an die Dummy-Benutzer-ID halten, aber wir werden diese serverseitig generierte ID hier und hier erhalten, und deshalb
verwenden wir diese weiter das Frontend auch, das für später wichtig sein wird, wenn wir auch Sachen
löschen und so weiter.
Dies fügt also ein Produkt hinzu, aber sobald wir die App neu laden, ist es natürlich weg, weil es in der App
nur im Speicher gespeichert wurde.
Jetzt speichern wir es auch auf einem Server, aber wir rufen es nie von einem Server ab. Stellen
wir also sicher, dass wir das auch tun.