1
00:00:02,110 --> 00:00:07,990
Nachdem wir nun das Speichern, Abrufen, Aktualisieren und Löschen und damit alle Funktionen

2
00:00:07,990 --> 00:00:12,070
hinzugefügt haben und einen Lade-Spinner angezeigt und Fehler behandelt

3
00:00:12,070 --> 00:00:14,020
haben, fehlen zwei Dinge.

4
00:00:14,020 --> 00:00:20,560
Eine davon ist, dass wir, wenn wir tatsächlich eine Bestellung aufgeben, diese Bestellung auch an einen Server senden und die Bestellung dort auch

5
00:00:20,560 --> 00:00:22,900
speichern und nicht nur lokal, denn gerade jetzt,

6
00:00:22,900 --> 00:00:27,760
wenn wir etwas bestellen, sehen wir sie hier, aber sobald Wir laden die App neu, da wir

7
00:00:27,760 --> 00:00:30,650
sie nicht auf einem Server speichern, der verloren geht. Das

8
00:00:30,660 --> 00:00:32,160
ist also eine Sache.

9
00:00:32,170 --> 00:00:35,130
Die andere Sache ist natürlich, dass wir hier nur einen Ladespinner

10
00:00:35,200 --> 00:00:39,570
zeigen und auch hier nur Fehler behandeln. Wenn auf dem Admin-Bildschirm etwas schief

11
00:00:39,610 --> 00:00:43,970
geht, wird kein Fehler angezeigt. Auch hier sehen wir keinen Lade-Spinner, wenn wir dies

12
00:00:44,080 --> 00:00:47,320
bearbeiten und einreichen. Während wir darauf warten, dass dies übermittelt wird.

13
00:00:47,320 --> 00:00:49,120
Das ist auch etwas, das wir verbessern könnten,

14
00:00:49,150 --> 00:00:51,310
und das ist eigentlich der Teil, mit dem ich beginnen möchte.

15
00:00:52,210 --> 00:00:57,670
Hier auf dem Bildschirm zum Bearbeiten von Produkten, wenn wir die Aktualisierung oder Erstellung versenden, dauert

16
00:00:57,670 --> 00:01:04,210
dies in beiden Fällen natürlich eine Weile, und wir erhalten hier tatsächlich ein Versprechen zurück, da wir sowohl beim Aktualisieren

17
00:01:04,600 --> 00:01:10,270
als auch beim Erstellen der Produktaktion die Redux Thunk-Funktion von verwenden Hier wird eine asynchrone Versandfunktion zurückgegeben,

18
00:01:10,270 --> 00:01:15,340
die daher ein Versprechen zurückgibt, das daher im Rahmen unseres Versandfunktionsaufrufs hier zurückgegeben wird.

19
00:01:15,520 --> 00:01:20,680
Daher erhalten wir tatsächlich die Informationen, ob wir auf die Antwort warten, ob wir einen

20
00:01:20,710 --> 00:01:22,470
Fehler erhalten haben oder ob

21
00:01:22,630 --> 00:01:24,380
wir fertig sind, wir

22
00:01:24,520 --> 00:01:31,300
müssen sie nur verwenden und natürlich können wir sie auf ähnliche Weise wie zuvor verwenden. mit aus React importiertem

23
00:01:31,300 --> 00:01:37,650
Nutzungsstatus und anschließendem Verwalten des Lade- und Fehlerstatus hier. Nebenbei bemerkt, Sie können natürlich auch mit einem

24
00:01:37,650 --> 00:01:43,080
Reduzierer arbeiten, bei dem Sie beide Zustände zusammenführen, wenn Sie dies mithilfe des Reduzierhakens verwenden möchten.

25
00:01:43,380 --> 00:01:52,750
Hier bleibe ich jedoch bei isLoading und setze isLoading und anfangs ist dies natürlich falsch und habe auch den Fehler und

26
00:01:52,750 --> 00:02:02,510
setze hier Fehlervariablen mit einem Verwendungsstatus wie diesem, der anfangs undefiniert ist und jetzt müssen wir dies nur so einstellen, wie wir es

27
00:02:02,880 --> 00:02:07,470
tun. ' Aktionen erneut versenden oder wenn wir Fehler bekommen.

28
00:02:07,470 --> 00:02:13,530
Wenn wir dies also versenden möchten, egal ob wir es bearbeiten oder

29
00:02:13,530 --> 00:02:25,000
erstellen, möchte ich isLoading auf true setzen und meinen Fehler hier auf false oder nicht auf false, auf null setzen , Setzen Sie es zurück.

30
00:02:25,190 --> 00:02:30,420
Sobald wir fertig sind, möchte ich etwas anderes tun, aber dafür müssen wir zunächst warten, bis

31
00:02:30,420 --> 00:02:31,840
der Versand abgeschlossen ist.

32
00:02:31,860 --> 00:02:37,770
Jetzt können wir dies wieder in eine asynchrone Funktion umwandeln, nur damit ich dort auf das

33
00:02:37,770 --> 00:02:44,720
Schlüsselwort warten kann. Die Alternative wäre, dies nicht in eine asynchrone Funktion umzuwandeln und dann einfach hinzuzufügen und danach

34
00:02:44,770 --> 00:02:45,810
zu fangen,

35
00:02:45,810 --> 00:02:52,620
das würde aber auch funktionieren Ich benutze gerne Async Wait. Jetzt können wir also darauf warten, dass beide Versendungen abgeschlossen sind.

36
00:02:52,620 --> 00:02:57,230
Natürlich wird nur einer der beiden ausgeführt, da dies eine if-Bedingung ist, aber wir können

37
00:02:57,330 --> 00:03:00,380
warten, bis dies abgeschlossen ist, und daher wissen wir

38
00:03:00,370 --> 00:03:08,370
nach diesem if-Block, dass der Versand abgeschlossen ist kann isLoading wieder auf false setzen. Das ist also der Ladezustand. Um Fehler zu behandeln,

39
00:03:08,370 --> 00:03:15,420
müssen wir dies nur mit einem try catch-Block umschließen, und wir können den gesamten if-Block hier mit try

40
00:03:15,420 --> 00:03:23,250
catch umschließen. Nehmen wir das also, verschieben Sie es hierher und fangen Sie dann jedes Potenzial ab Fehler, die wir

41
00:03:23,250 --> 00:03:29,400
möglicherweise hier und jetzt hier bekommen. Ich möchte meinen Fehler natürlich auf den Fehler setzen,

42
00:03:29,400 --> 00:03:30,000
den

43
00:03:33,030 --> 00:03:39,720
ich hier bekomme, oder auf die Fehlermeldung, die ich hier bekomme. Jetzt setzen wir den Fehler, wir

44
00:03:39,780 --> 00:03:50,380
setzen das Laden Zustand, natürlich hat dies hier auf diesem Bildschirm keine Auswirkung. Um einen Ladespinner anzuzeigen, müssen wir den Aktivitätsindikator aus React Native

45
00:03:50,410 --> 00:03:54,120
und den Aktivitätsindikator aus React Native importieren.

46
00:03:54,130 --> 00:03:58,930
Um einen Fehler anzuzeigen, möchte ich auch eine Warnung auslösen.

47
00:03:58,930 --> 00:04:10,540
Dazu müssen Sie sicherstellen, dass Sie importieren die Warnung, die wir bereits machen. Als nächsten Schritt, um den Ladezustand zu handhaben, werde ich möglicherweise dort unten,

48
00:04:10,540 --> 00:04:19,930
bevor ich mein Formular zurückschicke, prüfen, ob isLoading wahr ist, und wenn dies der Fall ist, werde ich meine Ansicht

49
00:04:19,930 --> 00:04:30,010
hier mit dem Aktivitätsindikator dort und dort zurückgeben. Wenn Sie die Größe auf groß und die Farbe auf Farben einstellen, müssen Sie

50
00:04:30,310 --> 00:04:38,980
sicherstellen, dass Sie diese Farben als Primärkonstante importieren. Stellen Sie also sicher, dass Sie diese Farbkonstante hier

51
00:04:38,980 --> 00:04:47,480
importiert haben, das ist erforderlich, und jetzt werde ich das Stylesheet hier auch verwenden, um einen neuen Stil

52
00:04:47,500 --> 00:04:55,120
hinzuzufügen, genauer gesagt diesen zentrierten Stil. Hier werde ich zentriert hinzufügen und ja, wir könnten dies

53
00:04:55,120 --> 00:04:59,910
daher auch in einen auslagern separate Verpackungskomponente, wenn Sie möchten.

54
00:05:00,010 --> 00:05:08,300
Dort setze ich Flex auf Eins, begründe das Zentrieren von Inhalten und richte Elemente wie folgt auf Zentrieren aus.

55
00:05:08,410 --> 00:05:15,250
Jetzt können wir diesen zentrierten Stil hier auf die Ansicht anwenden, die ich um meinen Aktivitätsindikator wickle, indem wir

56
00:05:15,250 --> 00:05:19,990
den Stil hier auf Stile setzen. zentriert.

57
00:05:20,040 --> 00:05:26,460
Jetzt sollten wir dies sehen, während wir laden, und nebenbei bemerkt, wir sollten jetzt auch nicht zurück navigieren, bevor

58
00:05:26,460 --> 00:05:27,480
wir fertig sind.

59
00:05:27,840 --> 00:05:33,700
Wenn ich also dieses Ausrufezeichen hinzufüge oder entferne und diese Eingabe dann belasse, damit diese übermittelt wird und ich auf Speichern

60
00:05:33,700 --> 00:05:34,640
klicke, haben Sie

61
00:05:34,770 --> 00:05:38,400
den Ladespinner gesehen, und wir navigieren erst zurück, wenn dies erledigt ist.

62
00:05:38,400 --> 00:05:42,180
Jetzt ist Firebase super schnell, aber genau das ist passiert.

63
00:05:42,330 --> 00:05:52,970
Um nun einen Fehler zu simulieren, gehe ich zu den Produktaktionen und dort im Update-Produkt hier unten werde ich das hier wieder entfernen, um einen Fehler zu erzwingen, und ich werde noch

64
00:05:52,970 --> 00:05:58,310
etwas hinzufügen. Ich werde jetzt die Antwort hier in einem speichern konstant, weil es mich jetzt

65
00:05:58,400 --> 00:06:03,130
wirklich interessiert, ich möchte sicherstellen, dass wenn die Antwort nicht in Ordnung ist. Wenn

66
00:06:03,200 --> 00:06:07,240
wir also einen 400- oder 500-Statuscode haben, wirf ich auch einen neuen

67
00:06:07,250 --> 00:06:14,360
Fehler, wenn ich sage, dass etwas schief gelaufen ist oder wenn Sie einen Fehler machen Behandlung, die Sie tun möchten, damit

68
00:06:14,360 --> 00:06:20,200
wir auch in diesem Fall einen Fehler auslösen. Übrigens mache ich dasselbe beim

69
00:06:20,210 --> 00:06:25,620
Löschen, bevor wir diesen erzwungenen Fehler testen, den ich implementiert habe.

70
00:06:25,670 --> 00:06:29,150
Hier zum Löschen möchte ich dies auch überprüfen und dafür muss ich natürlich

71
00:06:29,360 --> 00:06:36,120
auch hier meine Antwort erhalten, indem ich auf das Abrufen hier warte. Okay, mal sehen, ob dieser erzwungene Fehler

72
00:06:36,120 --> 00:06:40,400
beim Aktualisieren aufgrund des Entlassens von s hier

73
00:06:40,470 --> 00:06:46,680
ist, wenn dies Auswirkungen hat. Wenn ich jetzt zurück zum Administrator gehe, füge ich

74
00:06:46,680 --> 00:06:48,010
dies hinzu, füge

75
00:06:48,030 --> 00:06:54,150
ein Ausrufezeichen hinzu und klicke darauf. Jetzt sehen Sie, dass das Update einfach verworfen wird, sodass wir das Ausrufezeichen

76
00:06:54,240 --> 00:07:00,230
hier nicht sehen, aber wir auch bekomme keine Fehlermeldung, was Sinn macht, weil ich keine Logik dafür habe.

77
00:07:00,310 --> 00:07:01,700
Wie können wir damit umgehen?

78
00:07:01,720 --> 00:07:04,310
Wie gesagt, ich möchte einen Alarm

79
00:07:04,330 --> 00:07:10,610
auslösen und werde daher den Use-Effekt verwenden, so dass der Use-Effekt-Hook, den React anbietet, den wir

80
00:07:10,690 --> 00:07:16,690
hier finden, ich möchte das verwenden und ich kann das hier einfach implementieren, nachdem ich

81
00:07:16,710 --> 00:07:24,490
den Reduzierer initialisiert habe. Die genaue Position spielt keine Rolle. Der hier verwendete Effekt sollte wiederholt werden, wenn sich der

82
00:07:24,880 --> 00:07:28,670
Fehler ändert. Wenn wir also festlegen, dass dieser Fehler

83
00:07:28,750 --> 00:07:34,510
kein Fehler ist, überprüfe ich hier, ob der Fehler wahr ist. Wenn wir also einen

84
00:07:34,510 --> 00:07:39,010
Fehler haben und wenn wir diesen haben, dann ich kann eine Warnung

85
00:07:39,010 --> 00:07:41,380
auslösen, ist ein Fehler aufgetreten.

86
00:07:41,380 --> 00:07:48,920
Ich möchte meinen Fehler hier ausgeben und das sollte die Fehlermeldung sein, da ich dies hier einstelle. Ich setze meinen

87
00:07:48,920 --> 00:07:49,350
Fehler

88
00:07:49,370 --> 00:07:55,270
auf die Meldung, sodass dies eine Zeichenfolge sein sollte, die ich ausgeben kann, und füge dann

89
00:07:55,270 --> 00:08:04,610
eine Schaltfläche hinzu wo ich OK sage, was dies einfach ablehnt. Jetzt auch wichtig, wenn wir einen Fehler bekommen,

90
00:08:04,610 --> 00:08:11,180
möchte ich nicht weg navigieren. Um dies zu vermeiden, möchte ich

91
00:08:11,210 --> 00:08:19,670
sicherstellen, dass hier, diese Requisiten, diese Navigation hier tatsächlich nur ausgeführt wird, wenn wir nicht in diesem Fangblock landen.

92
00:08:19,700 --> 00:08:27,390
Also im Grunde hier nach dem if else-Block, aber immer noch im try-Block, dort möchte ich weg navigieren.

93
00:08:27,410 --> 00:08:29,300
Versuchen wir es jetzt noch einmal, gehen wir

94
00:08:29,300 --> 00:08:30,710
zurück, bearbeiten dies, fügen ein

95
00:08:30,710 --> 00:08:33,920
Ausrufezeichen hinzu, klicken auf eine andere Stelle, klicken auf Speichern und jetzt erhalte

96
00:08:33,920 --> 00:08:40,730
ich hier meine Fehlermeldung und bleibe auf dieser Seite und sie wird auch zurückgesetzt. Ich kann das nochmal hinzufügen, hier klicken

97
00:08:40,760 --> 00:08:43,430
und es ist weg.

98
00:08:43,700 --> 00:08:50,150
Auf der anderen Seite, wenn wir diesen Fehler jetzt hier in den Aktionen beheben, indem wir ihn hier lesen, und wir

99
00:08:50,150 --> 00:08:52,960
gehen jetzt zurück und schauen uns das noch einmal

100
00:08:52,970 --> 00:08:57,170
an. Wenn ich das bearbeite, füge mein Ausrufezeichen hinzu, klicke woanders hin und klicke

101
00:08:57,170 --> 00:08:59,880
jetzt auf Speichern Alles funktioniert wie es sollte.

102
00:08:59,900 --> 00:09:04,200
Jetzt funktioniert das wirklich und jetzt verhält es sich so, wie es sich verhalten sollte.

103
00:09:04,220 --> 00:09:09,890
Jetzt können Sie hier natürlich auch einen Ladespinner und einen Fehlerbehandler zum Benutzerproduktbildschirm hinzufügen, wenn

104
00:09:09,890 --> 00:09:10,840
Sie möchten.

105
00:09:10,850 --> 00:09:15,800
Wenn Sie dies löschen, was ich hier nicht tun werde, aber wenn Sie dies löschen würden, würden Sie

106
00:09:15,800 --> 00:09:17,300
derzeit keinen Spinner erhalten, keinen

107
00:09:17,300 --> 00:09:22,610
Ladespinner, und Sie erhalten auch keinen Fehler, wenn dies fehlschlägt. Um Zeit zu sparen, werde ich dies hier nicht implementieren,

108
00:09:22,610 --> 00:09:26,590
aber Sie können es im Grunde genauso implementieren, wie wir es zuvor getan haben, wenn Sie wollten.

109
00:09:26,600 --> 00:09:28,670
Das können Sie also definitiv auch tun.