1
00:00:02,270 --> 00:00:07,520
Das Speichern ist also großartig, das Abrufen wäre auch süß und am Ende möchte ich

2
00:00:07,520 --> 00:00:10,510
sicherstellen, dass wir, wenn wir zum Beispiel den Produktübersichtsbildschirm

3
00:00:10,580 --> 00:00:15,200
besuchen, einfach den Server erreichen und alle Produkte von dort abrufen, damit auf

4
00:00:15,290 --> 00:00:16,510
diesem Bildschirm Bei

5
00:00:16,550 --> 00:00:19,390
jedem Besuch laden wir die neuesten Produkte.

6
00:00:19,400 --> 00:00:22,500
Dazu müssen wir jetzt eine HTTP-Anfrage von dort

7
00:00:22,520 --> 00:00:28,250
senden. Daher möchte ich am Ende eine neue Redux-Aktion auslösen, die den Server erreicht, meine Produkte von

8
00:00:28,250 --> 00:00:35,590
dort abruft und dann die Produkte festlegt in meinem Laden. Also brauche ich hier eine brandneue Aktion,

9
00:00:35,620 --> 00:00:43,060
Set-Produkte, die ich vorher nicht brauchte, weil wir nur mit Dummy-Produkten gearbeitet haben, aber jetzt ist

10
00:00:43,060 --> 00:00:50,660
das nicht mehr der Fall, also sollten Set-Produkte jetzt versendet werden und ich werde hier einen

11
00:00:50,660 --> 00:00:58,110
neuen Action-Ersteller brauchen was ich Fetch-Produkte nennen werde. Dafür habe ich keine Kennung, da ich diese niemals als

12
00:00:58,110 --> 00:01:01,310
Aktion versenden werde, die den Reduzierer erreichen sollte.

13
00:01:01,310 --> 00:01:06,110
Stattdessen ist dies nur mein Aktionsersteller mit dem asynchronen Code mit der HTTP-Anforderung.

14
00:01:06,110 --> 00:01:12,950
Es werden keine Argumente benötigt, aber dank Redux Thunk wird eine Funktion zurückgegeben, die diese Versandfunktion als Argument erhält, und

15
00:01:13,070 --> 00:01:16,470
am Ende möchte ich ein Aktionsobjekt versenden, in dem

16
00:01:16,490 --> 00:01:23,460
der Typ Produkte festgelegt ist und in das ich meine weiterleiten möchte Produkte, aber das sollte natürlich kein leeres Array

17
00:01:23,480 --> 00:01:30,490
sein, sondern die Produkte, die ich von meiner API bekomme. Daher können wir diesen Code hier kopieren,

18
00:01:30,490 --> 00:01:38,610
einschließlich des asynchronen Versandteils hier, bis dahin, wo wir die Antwortdaten erhalten, diese vom Produkt erstellen kopieren

19
00:01:38,610 --> 00:01:40,590
und diesen Teil hier

20
00:01:40,590 --> 00:01:47,810
durch ihn ersetzen, und jetzt tun wir dies Wir senden eine Anfrage an dieselbe

21
00:01:47,970 --> 00:01:52,530
URL wie zuvor, was sinnvoll ist, da dort die

22
00:01:52,530 --> 00:01:54,380
Produkte gespeichert werden.

23
00:01:54,390 --> 00:01:58,650
Jetzt möchte ich jedoch eine Get-Anfrage festlegen, und das ist eigentlich die Standardeinstellung, wenn

24
00:01:58,740 --> 00:02:04,380
wir Fetch verwenden, sodass wir diese nicht festlegen müssen. Für eine Get-Anfrage müssen Sie auch keine Header setzen

25
00:02:04,380 --> 00:02:04,860
und

26
00:02:04,890 --> 00:02:09,150
Sie können keinen Body setzen. Daher können wir dieses zweite Argument beim Abrufen hier

27
00:02:09,150 --> 00:02:12,020
vollständig entfernen. Wir senden einfach eine Abrufanforderung wie diese.

28
00:02:12,210 --> 00:02:18,000
Jetzt erhält die Antwort unsere Daten zurück, aber jetzt gibt es ein wichtiges Merkmal für das Format dieser

29
00:02:18,000 --> 00:02:21,880
Daten, und es ist am besten, wenn wir das einfach sehen.

30
00:02:21,900 --> 00:02:28,470
Lassen Sie mich also die Antwortdaten hier auf der Konsole protokollieren und für den Moment auskommentieren, oder wir können sie dort

31
00:02:28,470 --> 00:02:29,680
belassen, es schadet

32
00:02:29,700 --> 00:02:32,050
nicht, es tut auch nichts Nützliches, wir behandeln

33
00:02:32,100 --> 00:02:37,200
dies nicht im Reduzierer Aber lassen Sie uns dies protokollieren und jetzt zum Produktübersichtsbildschirm gehen und

34
00:02:37,200 --> 00:02:44,230
sicherstellen, dass wir dort diese Aktion zum Abrufen von Produkten auslösen. Zum Glück habe ich dort bereits in

35
00:02:44,230 --> 00:02:48,670
der Produktübersicht Zugriff auf die Redux-Versandfunktion. Jetzt muss ich nur

36
00:02:48,850 --> 00:02:55,210
noch den Verwendungseffekt hinzufügen, damit ich diesen auslösen kann, wenn diese Komponente geladen wird.

37
00:02:55,210 --> 00:03:04,760
Hier kann ich also den Nutzungseffekt hinzufügen und in meiner Funktion hier den Versand aufrufen und jetzt auf

38
00:03:04,790 --> 00:03:08,510
meine Produktaktionen zugreifen, die ich daher als

39
00:03:08,510 --> 00:03:22,210
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,

40
00:03:22,250 --> 00:03:29,240
die am Ende diese HTTP-Anforderung auslöst, und dieser Effekt sollte immer dann ausgeführt

41
00:03:29,240 --> 00:03:36,260
werden, wenn meine Komponente geladen wird. Ich kann also ein leeres Array hinzufügen und tatsächlich meine einzige Abhängigkeit

42
00:03:36,260 --> 00:03:38,300
hinzufügen, die ich habe, nämlich den

43
00:03:38,310 --> 00:03:44,070
Versand. Hier ist dies die einzige Abhängigkeit, die wir innerhalb unserer Komponente definieren, sodass diese tatsächlich nie wieder ausgeführt wird.

44
00:03:44,150 --> 00:03:48,350
Es wird nur ausgeführt, wenn diese Komponente geladen ist, und genau das sollte der

45
00:03:48,410 --> 00:03:49,830
Fall sein. Wenn ich

46
00:03:49,850 --> 00:03:52,950
den Bildschirm besuche, möchte ich diesen Effekt hier auslösen.

47
00:03:53,270 --> 00:03:57,410
Wenn ich dies jetzt speichere, speichern wir dies und jetzt, während dies

48
00:03:57,440 --> 00:04:03,780
geladen wird, sehen Sie hier im Protokoll, dass dies hier sowohl auf Android als auch auf iOS passiert ist,

49
00:04:03,790 --> 00:04:05,520
weshalb ich dies zweimal sehe.

50
00:04:05,560 --> 00:04:07,460
Dies ist, was ich am Ende

51
00:04:07,510 --> 00:04:09,900
zurückbekommen habe, dieses Objekt wurde von Firebase zurückgegeben.

52
00:04:09,910 --> 00:04:15,970
Es ist ein Objekt mit all meinen Produkten und ich habe nur eines, weshalb ich hier nur eines sehe und jedes

53
00:04:15,970 --> 00:04:18,190
Objekt mit seiner eindeutigen ID übereinstimmt, aber das

54
00:04:18,700 --> 00:04:19,510
ist wichtig.

55
00:04:19,510 --> 00:04:25,210
Wir kommen nicht in das Array zurück, wir bekommen ein Objekt mit eindeutigen IDs als Schlüssel zurück und die Werte

56
00:04:25,210 --> 00:04:30,760
für diese Schlüssel sind dann meine Objektdaten und wir müssen das nur wissen, um es richtig zu behandeln.

57
00:04:30,760 --> 00:04:32,050
Zurück in unserer

58
00:04:32,050 --> 00:04:34,200
Aktion sehen die Antwortdaten so aus.

59
00:04:34,270 --> 00:04:38,790
Natürlich arbeite ich in meiner App mit einem Array, also muss ich dies transformieren.

60
00:04:38,950 --> 00:04:43,980
Meine geladenen Produkte oder wie auch immer Sie dies hier aufrufen möchten,

61
00:04:44,200 --> 00:04:49,580
sollten also ein leeres Array sein. Jetzt können wir dieses Objekt durchlaufen, um

62
00:04:49,610 --> 00:04:54,570
die Objektdaten, die Produkte im Objekt, den Produkten im Array zuzuordnen.

63
00:04:54,570 --> 00:05:00,490
Es ist relativ einfach zu tun, wir können hier mit unserem Schlüssel eine for / in-Schleife hinzufügen,

64
00:05:00,490 --> 00:05:09,190
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

65
00:05:09,250 --> 00:05:13,240
Produkten hinzu, damit dies geschieht Das Array wächst mit der Zeit

66
00:05:13,240 --> 00:05:19,420
und was ich hier am Ende hinzufüge, ist nur ein neues Produkt, das das Produktmodell verwendet, das Sie

67
00:05:19,420 --> 00:05:20,250
daher

68
00:05:20,260 --> 00:05:25,610
importieren müssen. Stellen Sie also sicher, dass dieser Import hier auf Ihren Modellordner und dort

69
00:05:26,860 --> 00:05:28,660
auf die Produktdatei und mich

70
00:05:29,690 --> 00:05:36,910
zeigt Erstellen Sie hier ein neues Produkt, bei dem meine ID der Schlüssel ist, da dies die eindeutige ID ist, die

71
00:05:36,910 --> 00:05:43,820
wir in dem Objekt haben, für das wir eine Schleife ausführen, und dann die Benutzersache, dh U1-Dummy-Daten, da keine Benutzerdaten

72
00:05:43,820 --> 00:05:51,260
beteiligt sind hier und da müssen wir uns das Objekt ansehen, das wir von Firebase zurückbekommen haben, um den Titel zu erhalten

73
00:05:51,260 --> 00:05:52,180
und so weiter.

74
00:05:52,220 --> 00:05:58,720
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

75
00:05:58,760 --> 00:06:00,380
hier für

76
00:06:00,380 --> 00:06:05,920
die imageUrl, also. Bild URL. Für die

77
00:06:09,440 --> 00:06:19,610
Beschreibung und natürlich auch für den Preis. Dies fügt also alles zu geladenen Produkten hinzu, und jetzt werden geladene Produkte ein

78
00:06:19,610 --> 00:06:25,570
aufgefülltes Array sein, das ich hier zu der Aktion hinzufügen kann, die versendet wird, zu der Aktion

79
00:06:25,580 --> 00:06:27,070
zum Festlegen von Produkten.

80
00:06:27,230 --> 00:06:32,530
Das einzige, was fehlt, ist, dass wir jetzt zum Reduzierstück gehen und dort mit Set-Produkten umgehen können, vielleicht hier als

81
00:06:32,690 --> 00:06:38,080
erster Fall, aber natürlich spielt die Position keine Rolle. Fügen Sie hier festgelegte Produkte hinzu,

82
00:06:38,080 --> 00:06:43,660
und stellen Sie sicher, dass Sie sie aus Ihrer Aktionsdatei importieren. Dann ist dies eine

83
00:06:43,670 --> 00:06:49,230
sehr triviale Sache, die wir gleich erledigen werden. Am Ende muss ich nur einen

84
00:06:49,230 --> 00:06:59,090
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

85
00:06:59,330 --> 00:07:05,810
und die ich zu meiner versendeten Aktion hinzufüge. Und für das Benutzerprodukt ist

86
00:07:06,280 --> 00:07:14,210
es ziemlich ähnlich, da ist es Aktion. Produkte, die nur nach allen Produkten gefiltert wurden, die meine Benutzer-ID haben. So

87
00:07:15,450 --> 00:07:20,370
und im Moment bedeutet dies aufgrund meines Dummy-Codes hier, in dem ich meine Benutzer-ID fest codiere,

88
00:07:20,490 --> 00:07:23,670
natürlich, dass alle geladenen Produkte als meine Produkte behandelt werden.

89
00:07:23,670 --> 00:07:29,790
Dies werden wir später ändern, sobald wir die Authentifizierung hinzugefügt haben. Wenn dies also neu geladen wird, sehen

90
00:07:30,080 --> 00:07:35,120
Sie, dass wir mit den Dummy-Daten beginnen, diese dann aber sofort durch

91
00:07:35,420 --> 00:07:39,830
diese geladenen Daten ersetzt werden. Das Laden von Daten funktioniert

92
00:07:39,830 --> 00:07:44,370
also einwandfrei. Wir können damit genauso arbeiten wie mit unseren eigenen Daten hier.

93
00:07:44,390 --> 00:07:49,340
Natürlich speichern wir keine Bestellungen auf dem Server und dergleichen, aber wir können unsere Daten laden, die

94
00:07:49,340 --> 00:07:51,410
wir zuvor auf dem Server gespeichert haben.