1 00:00:02,060 --> 00:00:07,190 Im Creature Product Action Creator, der derzeit eine Funktion ist, die nur eine Aktion zurückgibt, 2 00:00:07,550 --> 00:00:12,560 können wir dies jetzt ein wenig optimieren. Anstatt eine Aktion zurückzugeben, können wir dank 3 00:00:12,560 --> 00:00:13,050 Redux 4 00:00:13,070 --> 00:00:18,890 Thunk jetzt eine andere Funktion zurückgeben. Dank dieses Pakets können wir dies jetzt tun. Dies ist 5 00:00:18,890 --> 00:00:29,650 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 6 00:00:29,650 --> 00:00:31,100 nicht 7 00:00:31,180 --> 00:00:36,310 zurückgeben, sondern diese Aktion auslösen. Das ist der 8 00:00:36,310 --> 00:00:42,090 wichtige Unterschied, und mir fehlt hier eine geschweifte Klammer. 9 00:00:42,130 --> 00:00:43,110 Also was ist passiert? 10 00:00:43,360 --> 00:00:50,230 Ich ändere create product so, dass es eine Funktion ist, die wir tatsächlich noch aus unseren Komponenten heraus versenden 11 00:00:50,740 --> 00:00:53,500 können, die aber jetzt noch wie 12 00:00:53,530 --> 00:00:58,870 zuvor funktionieren kann. Wir müssen also nicht alle diese Aktionsersteller ändern, damit Sie sich jetzt 13 00:00:58,870 --> 00:01:03,770 an die alte Syntax halten können Dank Redux Thunk wird sozusagen auch eine 14 00:01:03,970 --> 00:01:10,180 alternative Syntax unterstützt, bei der diese Aktionserstellungsfunktion nicht sofort ein Aktionsobjekt zurückgibt, sondern bei der eine Funktion 15 00:01:10,180 --> 00:01:15,970 zurückgegeben wird. Wenn dies der Fall ist, greift Redux Thunk ein und stellt sicher, dass alles 16 00:01:16,510 --> 00:01:22,180 noch vorhanden ist funktioniert und wenn es eine Funktion zurückgibt, dann ist dies eine Funktion, 17 00:01:22,390 --> 00:01:28,390 die ein Argument erhalten muss, die Versandfunktion, die automatisch von Redux Thunk übergeben wird, so dass 18 00:01:28,390 --> 00:01:28,900 Redux 19 00:01:29,620 --> 00:01:35,560 Thunk diese Funktion am Ende für Sie aufruft und Sie es dann können Versenden Sie dann 20 00:01:35,560 --> 00:01:39,680 eine neue Aktion und senden Sie hier das eigentliche Aktionsobjekt, das 21 00:01:39,850 --> 00:01:47,170 wir zuvor versenden wollten. Bevor Sie dies tun, können Sie jetzt jeden gewünschten asynchronen Code ausführen, der zulässig ist und 22 00:01:47,200 --> 00:01:52,240 Ihren Redux nicht beschädigt Flow, weil Redux Thunk sich darum kümmert und Sie mehr 23 00:01:52,240 --> 00:01:56,020 darüber in meinem React Course erfahren können, zum Beispiel oder 24 00:01:56,110 --> 00:02:00,340 natürlich in der offiziellen Redux Thunk-Dokumentation, auch in den offiziellen Redux-Dokumenten. 25 00:02:00,350 --> 00:02:05,900 Jetzt können wir hier eine HTTP-Anfrage senden und in React Native die integrierte Abruf-API verwenden. 26 00:02:05,900 --> 00:02:08,120 Das Abrufen funktioniert hier im 27 00:02:08,120 --> 00:02:12,590 Wesentlichen wie die Abruf-API im Browser, in der diese ebenfalls verfügbar ist. 28 00:02:12,590 --> 00:02:17,210 Es wird eine URL benötigt, an die Sie die Anfrage senden möchten, und diese URL haben wir 29 00:02:17,210 --> 00:02:21,180 hier erhalten. Ich kopiere diese URL einfach aus Firebase und gebe sie hier ein. 30 00:02:21,380 --> 00:02:24,440 Jetzt klingt das Abrufen so, als würde es immer 31 00:02:24,440 --> 00:02:30,440 nur Daten abrufen. Wenn also Daten abgerufen werden, der Name hier jedoch etwas verwirrend ist, wird er nicht nur 32 00:02:30,440 --> 00:02:33,950 zum Abrufen von Daten verwendet, sondern Sie können ihn auch zum 33 00:02:34,040 --> 00:02:40,640 Senden einer Post-Anfrage oder einer Put-Anfrage verwenden Art der HTTP-Anfrage. Jetzt senden wir auch nicht nur eine Anfrage 34 00:02:40,640 --> 00:02:47,930 an diese URL, sondern wie gesagt, Firebase übersetzt Ihre Anfragen in eine Art Datenbankabfrage und eine Datenbankstruktur, sodass Sie 35 00:02:47,930 --> 00:02:50,990 hier jeden gewünschten Knoten und jedes gewünschte Segment 36 00:02:50,990 --> 00:02:57,230 hinzufügen können Beispielsweise erstellen Produkte und Firebase hier in der Datenbank einen Ordner und speichern Ihre 37 00:02:57,230 --> 00:02:58,410 Daten dort. 38 00:02:58,700 --> 00:03:03,800 Wichtig und das ist nur eine Firebase-spezifische Sache, die Sie hinzufügen müssen. json hier. 39 00:03:03,830 --> 00:03:11,140 Dies ist aufgrund von React Native oder aufgrund von Javascript oder aufgrund einer HTTP-Anforderung nicht erforderlich. Dies 40 00:03:11,140 --> 00:03:15,690 ist nur eine Firebase-spezifische Sache. Standardmäßig würde dies eine Get-Anfrage senden, 41 00:03:15,700 --> 00:03:21,280 aber um Daten zu speichern, möchte Firebase eine Post-Anfrage und um diese zu senden, müssen wir ein 42 00:03:21,280 --> 00:03:27,610 zweites Argument zum Abrufen übergeben, das ein Javascript-Objekt sein sollte. In diesem zweiten Argument können Sie den 43 00:03:27,610 --> 00:03:34,480 Methodenschlüssel einrichten und die HTTP-Methode dieser Anforderung beschreiben. Diese kann abgerufen, eingegeben usw. werden. Hier 44 00:03:34,480 --> 00:03:42,070 sollte ein Beitrag angegeben werden, der dieses Produkt hinzufügt, das wir an diesen Knoten senden möchten 45 00:03:42,070 --> 00:03:44,130 wird dort erstellt. 46 00:03:44,140 --> 00:03:47,760 Jetzt können Sie dort auch einige Header einrichten, und wir müssen 47 00:03:47,920 --> 00:03:53,530 einen Header festlegen. Wir müssen den Header für den Inhaltstyp hinzufügen. Sie fügen einfach Header als Objekt 48 00:03:53,530 --> 00:03:58,950 hinzu und haben dann Schlüssel-Wert-Paare mit Ihren Header-IDs als Schlüssel und den Werten als Werte und hier 49 00:03:59,200 --> 00:04:04,290 ist der Wert application / json, um Firebase mitzuteilen, dass wir einige JSON-Daten senden werden, 50 00:04:04,360 --> 00:04:06,530 und dann müssen wir das tun. 51 00:04:06,580 --> 00:04:11,680 Wir müssen einen Text mit den Daten hinzufügen, die wir an diese Anforderung anhängen möchten, und die Daten sollten 52 00:04:11,680 --> 00:04:12,730 im JSON-Format vorliegen. 53 00:04:12,730 --> 00:04:19,240 Zum Glück unterstützt React Native das JSON-Objekt, das auch vom serverseitigen Javascript unterstützt 54 00:04:19,240 --> 00:04:26,440 wird. Dort können wir stringify aufrufen, um ein Javascript-Array oder -Objekt in das JSON-Format umzuwandeln. 55 00:04:26,440 --> 00:04:28,040 Am Ende möchte 56 00:04:28,040 --> 00:04:33,210 ich also mein Produkt anhängen. Am Ende möchte ich hier 57 00:04:33,210 --> 00:04:37,420 ein Objekt stringifizieren, das meinen Titel, meine Beschreibung, meine imageUrl 58 00:04:39,100 --> 00:04:42,100 und meinen Preis enthält, nicht die ID, 59 00:04:42,100 --> 00:04:47,830 da Firebase hier tatsächlich eine ID für uns generiert, was sehr praktisch ist. 60 00:04:49,070 --> 00:04:54,610 Jetzt wird die Anfrage gesendet, aber natürlich möchte ich das Produkt nur lokal erstellen, 61 00:04:54,820 --> 00:05:00,490 wenn diese Anfrage erfolgreich war, da ich dann tatsächlich auch die automatisch erstellte ID 62 00:05:00,490 --> 00:05:08,410 verwenden kann, die Firebase an mich zurücksendet und bequem ein Versprechen zurückgibt, nämlich dieses Javascript-Objekt Das wird sich irgendwann in 63 00:05:08,410 --> 00:05:12,620 einen Wert auflösen oder in Zukunft einen Fehler auslösen. 64 00:05:12,940 --> 00:05:19,290 Um auf diese Antwort zu warten, können wir sie dann hier nach dem Abrufen hinzufügen, also 65 00:05:19,290 --> 00:05:26,170 auf dieses Versprechen und wir werden unsere Antwort hier erhalten, damit wir alles mit der Antwort machen können. 66 00:05:26,190 --> 00:05:31,200 Sie können sich die Fehler auch mit catch anhören, und das sollten 67 00:05:31,200 --> 00:05:33,290 Sie eigentlich schon wissen, 68 00:05:33,300 --> 00:05:39,900 da Versprechen nicht React Native-spezifisch sind. Das ist Vanilla Javascript, und React Native unterstützt auch die 69 00:05:39,900 --> 00:05:46,270 modernere asynchrone Wartesyntax anstelle von then und catch. Um dies zu verwenden, fügen Sie hier vor Ihrer Funktion 70 00:05:46,290 --> 00:05:53,700 asynchrones, dieses asynchrone Schlüsselwort hinzu, und jetzt können Sie Ihre Antwort hier abwarten und sie in einer Konstanten mit dieser Syntax mit 71 00:05:53,700 --> 00:05:55,400 dem Schlüsselwort await speichern. 72 00:05:55,410 --> 00:05:59,520 Jetzt hinter den Kulissen wandelt dies dies mit dann in die alte Syntax um. 73 00:05:59,580 --> 00:06:05,640 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. 74 00:06:05,640 --> 00:06:09,480 Dies ist jedoch etwas einfacher zu lesen, weshalb ich diese asynchrone Wartesyntax verwenden 75 00:06:09,480 --> 00:06:17,160 werde. Beachten Sie jedoch, dass dies dem Hinzufügen entspricht und nur lesbarer ist. Wenn Sie übrigens async await verwenden, gibt diese Funktion 76 00:06:17,160 --> 00:06:22,770 hier immer automatisch ein Versprechen zurück. Daher gibt diese gesamte Funktion zum Erstellen 77 00:06:22,770 --> 00:06:23,780 von 78 00:06:23,820 --> 00:06:25,880 Produkten jetzt ein Versprechen zurück. 79 00:06:26,010 --> 00:06:27,330 Das hat es vorher nicht 80 00:06:27,330 --> 00:06:28,300 getan, jetzt wird 81 00:06:28,350 --> 00:06:33,040 es, Sie sehen, dass es hier jetzt ein Versprechen zurückgibt. Das ist also unsere Antwort. 82 00:06:34,280 --> 00:06:38,960 Diese Antwort kann jetzt entpackt werden, um die Daten dort abzurufen, also 83 00:06:39,140 --> 00:06:45,430 die Antwortdaten, die durch Aufrufen der Antwort erfolgen. json, das ist eine Methode, die für das 84 00:06:45,430 --> 00:06:50,730 Antwortobjekt verfügbar ist, das wir erhalten. Dies ist wieder eine asynchrone Aufgabe, auf die 85 00:06:51,050 --> 00:06:56,910 wir warten müssen, und jetzt erhalten wir am Ende die Daten, die Firebase beim Hinzufügen eines Produkts zurückgibt. 86 00:06:56,920 --> 00:07:03,620 Jetzt können wir diese Antwortdaten vorerst einfach protokollieren, um zu sehen, was sich dort befindet, und ich versende meine Aktion immer 87 00:07:03,620 --> 00:07:09,320 noch hier. Da wir hier jedoch darauf warten und dies so ist, als ob es sich um mehrere 88 00:07:09,320 --> 00:07:13,520 Then-Blöcke handelte, wird dies erst versendet, wenn diese Vorgänge hier ausgeführt werden erledigt. 89 00:07:13,520 --> 00:07:19,190 Speichern Sie dies also und fügen Sie ein neues Produkt hinzu, indem Sie hier zum Admin-Bereich 90 00:07:19,190 --> 00:07:21,580 gehen. Dann füge ich ein weißes Shirt 91 00:07:21,830 --> 00:07:24,820 hinzu. Ich habe dafür ein schönes imageUrl ausgewählt. 92 00:07:24,820 --> 00:07:26,320 Hier ist es. 93 00:07:26,320 --> 00:07:34,510 Nehmen wir an, das kostet 39. 99, das ist ein weißes Hemd, das ziemlich stilvoll ist. 94 00:07:34,510 --> 00:07:39,110 Wenn ich das jetzt speichere, muss ich es zuerst laden, jetzt wird es hinzugefügt, hier ist es 95 00:07:39,110 --> 00:07:40,130 und jetzt, wenn Sie 96 00:07:40,130 --> 00:07:41,130 sich Firebase ansehen, 97 00:07:41,210 --> 00:07:46,310 sehen wir auch, dass es jetzt einen Produktknoten gibt. Dort ist dies diese eindeutige ID und dort 98 00:07:46,310 --> 00:07:50,430 haben wir die Daten, die wir übermittelt haben. Wenn Sie sich Ihre Konsole 99 00:07:50,620 --> 00:07:53,440 ansehen, sehen Sie, dass wir dies zurückbekommen haben. Das 100 00:07:53,440 --> 00:07:55,100 sind diese Antwortdaten hier. 101 00:07:55,120 --> 00:08:01,780 Dieser enthält einen Namensschlüssel und dann auch diese von Firebase generierte ID. Dies bedeutet, dass wir beim Versand unserer Daten 102 00:08:01,780 --> 00:08:08,670 hier tatsächlich einen ID-Schlüssel hinzufügen und resData hinzufügen können. Name, um auf diesen Namensschlüssel bei 103 00:08:08,720 --> 00:08:14,800 der Antwortrückgabe durch Firebase zuzugreifen und die serverseitig generierte ID am Ende 104 00:08:14,800 --> 00:08:21,330 an unseren Produktreduzierer zum Erstellen oder an die im Reduzierer ausgeführte Logik weiterzuleiten. 105 00:08:21,340 --> 00:08:28,960 Im Produktreduzierer können wir diese Dummy-ID hier eigentlich nicht verwenden, sondern 106 00:08:28,960 --> 00:08:36,530 erwarten dies für unsere Produktdaten. Dort erhalten wir jetzt ein ID-Feld, das die serverseitig generierte ID ist. 107 00:08:36,530 --> 00:08:43,430 Ich werde mich zwar vorerst an die Dummy-Benutzer-ID halten, aber wir werden diese serverseitig generierte ID hier und hier erhalten, und deshalb 108 00:08:43,430 --> 00:08:48,910 verwenden wir diese weiter das Frontend auch, das für später wichtig sein wird, wenn wir auch Sachen 109 00:08:48,920 --> 00:08:50,600 löschen und so weiter. 110 00:08:50,630 --> 00:08:55,460 Dies fügt also ein Produkt hinzu, aber sobald wir die App neu laden, ist es natürlich weg, weil es in der App 111 00:08:55,460 --> 00:08:56,810 nur im Speicher gespeichert wurde. 112 00:08:56,810 --> 00:09:01,190 Jetzt speichern wir es auch auf einem Server, aber wir rufen es nie von einem Server ab. Stellen 113 00:09:01,220 --> 00:09:03,170 wir also sicher, dass wir das auch tun.