1
00:00:02,060 --> 00:00:07,190
Tak więc w kreatorze tworzenia akcji produktu, który obecnie jest funkcją, która tylko zwraca

2
00:00:07,550 --> 00:00:12,560
akcję, możemy teraz nieco ją ulepszyć. Zamiast zwracać akcję, możemy teraz zwrócić

3
00:00:12,560 --> 00:00:13,050
tam

4
00:00:13,070 --> 00:00:18,890
inną funkcję dzięki Redux Thunk, dzięki temu pakietowi możemy to zrobić teraz i będzie to

5
00:00:18,890 --> 00:00:29,650
funkcja, która odbiera funkcję wysyłania jako argument, a następnie z kolei musi wysłać akcja. Więc tutaj, w tej funkcji powrotu, po prostu

6
00:00:29,650 --> 00:00:31,100
nie

7
00:00:31,180 --> 00:00:36,310
muszę tego zwracać, ale wysłać tę akcję,

8
00:00:36,310 --> 00:00:42,090
to ważna różnica i brakuje mi tutaj nawiasów klamrowych.

9
00:00:42,130 --> 00:00:43,110
Więc co się stało?

10
00:00:43,360 --> 00:00:50,230
Zmieniam opcję tworzenia produktu, aby była funkcją, którą nadal możemy wywołać z wnętrza naszych komponentów, ale która

11
00:00:50,740 --> 00:00:53,500
teraz może nadal działać tak jak

12
00:00:53,530 --> 00:00:58,870
poprzednio, więc nie musimy zmieniać wszystkich tych twórców akcji, więc możesz trzymać się

13
00:00:58,870 --> 00:01:03,770
starej składni, ale teraz dzięki Redux Thunk, alternatywna składnia, że tak powiem,

14
00:01:03,970 --> 00:01:10,180
jest również obsługiwana tam, gdzie ta funkcja twórcy akcji nie zwraca natychmiast obiektu akcji, ale zamiast

15
00:01:10,180 --> 00:01:15,970
tego, gdzie zwraca funkcję, a jeśli tak, to Redux Thunk wkroczy i upewni się, że

16
00:01:16,510 --> 00:01:22,180
wszystko jest nadal działa i jeśli zwróci funkcję, to jest to funkcja, która musi

17
00:01:22,390 --> 00:01:28,390
otrzymać argument, funkcję wysyłającą, która zostanie przekazana automatycznie przez Redux Thunk, więc Redux Thunk w

18
00:01:28,390 --> 00:01:28,900
końcu

19
00:01:29,620 --> 00:01:35,560
wywoła tę funkcję dla ciebie, a zatem możesz następnie wyślij nową akcję i tutaj, wyślij

20
00:01:35,560 --> 00:01:39,680
rzeczywisty obiekt akcji, który wcześniej chcieliśmy wysłać, ale zanim to

21
00:01:39,850 --> 00:01:47,170
zrobisz, możesz teraz wykonać dowolny kod asynchroniczny, który chcesz i który będzie dozwolony i nie zepsuje twojego Redux przepływ,

22
00:01:47,200 --> 00:01:52,240
ponieważ Redux Thunk zajmie się tym i możesz dowiedzieć się więcej na ten

23
00:01:52,240 --> 00:01:56,020
temat na przykład w moim React Course lub oczywiście

24
00:01:56,110 --> 00:02:00,340
w oficjalnej dokumentacji Redux Thunk, również w oficjalnych dokumentach Redux.

25
00:02:00,350 --> 00:02:05,900
Więc teraz możemy wysłać żądanie HTTP, aw React Native możemy użyć wbudowanego interfejsu API pobierania,

26
00:02:05,900 --> 00:02:08,120
a pobieranie tutaj działa w

27
00:02:08,120 --> 00:02:12,590
zasadzie jak interfejs API pobierania w przeglądarce, gdzie jest on również dostępny.

28
00:02:12,590 --> 00:02:17,210
Wymaga adresu URL, na który chcesz wysłać żądanie, i to jest ten adres URL, który tu mamy,

29
00:02:17,210 --> 00:02:21,180
więc po prostu skopiuję ten adres URL z Firebase i wprowadzę go tutaj.

30
00:02:21,380 --> 00:02:24,440
Teraz pobieranie brzmi, jakby zawsze tylko pobierało

31
00:02:24,440 --> 00:02:30,440
dane, więc jeśli pobiera dane, ale w rzeczywistości nazwa jest tutaj nieco myląca, nie służy tylko

32
00:02:30,440 --> 00:02:33,950
do pobierania danych, możesz również użyć go do wysłania żądania

33
00:02:34,040 --> 00:02:40,640
postu lub żądania sprzedaży, więc dowolne rodzaj żądania HTTP. Teraz również nie wysyłamy tylko żądania na ten adres

34
00:02:40,640 --> 00:02:47,930
URL, ale teraz, jak powiedziałem, Firebase tłumaczy twoje zapytania na rodzaj zapytania do bazy danych i struktury bazy danych, dzięki

35
00:02:47,930 --> 00:02:50,990
czemu możesz dodać dowolny węzeł, który chcesz tutaj,

36
00:02:50,990 --> 00:02:57,230
dowolny segment, na przykład na przykład produkty i Firebase utworzą folder w bazie danych i tam będą

37
00:02:57,230 --> 00:02:58,410
przechowywać twoje dane.

38
00:02:58,700 --> 00:03:03,800
Ważne, a to tylko specyficzna dla Firebase rzecz, którą musisz dodać. Json tutaj.

39
00:03:03,830 --> 00:03:11,140
To nie jest wymagane z powodu React Native lub z powodu Javascript lub ponieważ jest to żądanie HTTP, jest to

40
00:03:11,140 --> 00:03:15,690
tylko kwestia specyficzna dla Firebase. Domyślnie wysyłałoby to żądanie get,

41
00:03:15,700 --> 00:03:21,280
ale do przechowywania danych Firebase chce żądania post i aby je wysłać, musimy przekazać drugi

42
00:03:21,280 --> 00:03:27,610
argument do pobrania, który powinien być obiektem Javascript. W tym drugim argumencie możesz ustawić

43
00:03:27,610 --> 00:03:34,480
klucz metody i opisać metodę HTTP tego żądania, którą można uzyskać, umieścić itd.

44
00:03:34,480 --> 00:03:42,070
I tutaj powinien być post, który dodaje produkt, który zamierzamy wysłać do tego węzła, który

45
00:03:42,070 --> 00:03:44,130
zostaną tam utworzone.

46
00:03:44,140 --> 00:03:47,760
Teraz możesz również ustawić tam niektóre nagłówki i musimy

47
00:03:47,920 --> 00:03:53,530
ustawić nagłówek, musimy dodać nagłówek typu zawartości, a ty po prostu dodajesz nagłówki jako obiekt, a

48
00:03:53,530 --> 00:03:58,950
następnie masz pary klucz-wartość z identyfikatorami nagłówków jako kluczami, a wartości jako wartości, a tutaj

49
00:03:59,200 --> 00:04:04,290
wartością jest application / json, która informuje Firebase, że zamierzamy wysłać pewne dane JSON,

50
00:04:04,360 --> 00:04:06,530
a następnie musimy to zrobić.

51
00:04:06,580 --> 00:04:11,680
Musimy dodać treść z danymi, które chcemy dołączyć do tego żądania, a dane powinny mieć

52
00:04:11,680 --> 00:04:12,730
format JSON.

53
00:04:12,730 --> 00:04:19,240
Na szczęście React Native obsługuje obiekt JSON, który obsługuje także Javascript w przeglądarce, i

54
00:04:19,240 --> 00:04:26,440
tam możemy wywołać stringify, aby przekształcić tablicę lub obiekt JavaScript w format JSON, więc w końcu

55
00:04:26,440 --> 00:04:28,040
na końcu i

56
00:04:28,040 --> 00:04:33,210
tam chcę dołączyć mój produkt. Więc w końcu chcę skreślić

57
00:04:33,210 --> 00:04:37,420
tutaj obiekt, który zawiera mój tytuł, mój opis, mój

58
00:04:39,100 --> 00:04:42,100
imageUrl i moją cenę, a nie

59
00:04:42,100 --> 00:04:47,830
identyfikator, ponieważ faktycznie Firebase wygeneruje dla nas tutaj identyfikator, który jest naprawdę wygodny.

60
00:04:49,070 --> 00:04:54,610
Teraz wyśle to żądanie, ale oczywiście chcę utworzyć produkt lokalnie tylko wtedy,

61
00:04:54,820 --> 00:05:00,490
gdy żądanie to się powiedzie, ponieważ wtedy mogę faktycznie użyć automatycznie utworzonego identyfikatora,

62
00:05:00,490 --> 00:05:08,410
który Firebase do mnie zwróci i po pobraniu wygodnie zwróci obietnicę, którą jest obiekt JavaScript które ostatecznie rozwiążą

63
00:05:08,410 --> 00:05:12,620
się w przyszłości lub spowodują błąd w przyszłości.

64
00:05:12,940 --> 00:05:19,290
Aby więc poczekać na tę odpowiedź, możemy dodać ją tutaj po pobraniu,

65
00:05:19,290 --> 00:05:26,170
więc na tej obietnicy i otrzymamy naszą odpowiedź tutaj, abyśmy mogli zrobić wszystko z odpowiedzią.

66
00:05:26,190 --> 00:05:31,200
Możesz również wysłuchać błędów z catch i to jest coś, co powinieneś

67
00:05:31,200 --> 00:05:33,290
już wiedzieć, ponieważ obietnice

68
00:05:33,300 --> 00:05:39,900
nie są specyficzne dla React Native, to jest waniliowy JavaScript, a React Native obsługuje również bardziej

69
00:05:39,900 --> 00:05:46,270
nowoczesną składnię asynchroniczną zamiast tego i catch. Aby tego użyć, dodajesz async tutaj przed swoją

70
00:05:46,290 --> 00:05:53,700
funkcją, to słowo kluczowe asynchroniczne, a teraz możesz poczekać na swoją odpowiedź tutaj i przechowywać ją w stałej składni z

71
00:05:53,700 --> 00:05:55,400
tym słowem kluczowym „czekaj”.

72
00:05:55,410 --> 00:05:59,520
Teraz, za kulisami, przekształca to w starą składnię z wtedy,

73
00:05:59,580 --> 00:06:05,640
więc jest to tak, jakbyś dodał to tutaj i użył swojej odpowiedzi w otrzymanym wywołaniu zwrotnym.

74
00:06:05,640 --> 00:06:09,480
Ale jest to nieco łatwiejsze do odczytania, dlatego użyję tej asynchronicznej funkcji czekania,

75
00:06:09,480 --> 00:06:17,160
tylko pamiętaj o tym, że to jest jak dodawanie, tylko bardziej czytelne. Kiedy przy okazji używasz asynchronicznego oczekiwania, ta

76
00:06:17,160 --> 00:06:22,770
funkcja zawsze automatycznie zwraca obietnicę, dlatego cała funkcja tworzenia

77
00:06:22,770 --> 00:06:23,780
produktu

78
00:06:23,820 --> 00:06:25,880
zwraca teraz obietnicę.

79
00:06:26,010 --> 00:06:27,330
Nie robił tego

80
00:06:27,330 --> 00:06:28,300
wcześniej, teraz

81
00:06:28,350 --> 00:06:33,040
zobaczysz, że tutaj, teraz zwraca obietnicę. Więc to nasza odpowiedź, ta

82
00:06:34,280 --> 00:06:38,960
odpowiedź może być teraz trochę rozpakowana, aby wprowadzić tam dane, więc

83
00:06:39,140 --> 00:06:45,430
dane odpowiedzi są wykonywane przez wywołanie odpowiedzi. json, jest to metoda dostępna

84
00:06:45,430 --> 00:06:50,730
dla otrzymywanego obiektu odpowiedzi. To znowu jest zadanie asynchroniczne, na które

85
00:06:51,050 --> 00:06:56,910
musimy czekać, a teraz to w końcu da nam dane zwrócone przez Firebase po dodaniu produktu.

86
00:06:56,920 --> 00:07:03,620
Teraz możemy po prostu zapisać te dane odpowiedzi, aby zobaczyć, co tam jest, a ja nadal wysyłam tutaj

87
00:07:03,620 --> 00:07:09,320
moją akcję, ale ponieważ tutaj czekamy, a zatem jest to tak, jakby było w wielu

88
00:07:09,320 --> 00:07:13,520
blokach, zostanie to wysłane dopiero po wykonaniu tych operacji tutaj. gotowy.

89
00:07:13,520 --> 00:07:19,190
Tak więc, zapiszmy to i dodajmy nowy produkt, przechodząc do sekcji administratora

90
00:07:19,190 --> 00:07:21,580
tutaj, a następnie dodam białą

91
00:07:21,830 --> 00:07:24,820
koszulę, wybrałem do tego ładny imageUrl,

92
00:07:24,820 --> 00:07:26,320
oto jest.

93
00:07:26,320 --> 00:07:34,510
Powiedzmy, że kosztuje 39. 99, jest to biała koszula, która jest dość stylowa.

94
00:07:34,510 --> 00:07:39,110
Jeśli teraz to zapiszę, najpierw muszę to załadować, teraz jest to dodane, oto jest

95
00:07:39,110 --> 00:07:40,130
i teraz, jeśli

96
00:07:40,130 --> 00:07:41,130
spojrzysz na

97
00:07:41,210 --> 00:07:46,310
Firebase, widzimy również, że teraz jest węzeł produktów. Tam jest to ten unikalny identyfikator, a

98
00:07:46,310 --> 00:07:50,430
tam mamy dane, które przesłaliśmy, a jeśli spojrzysz na swoją

99
00:07:50,620 --> 00:07:53,440
konsolę, zobaczysz, że to właśnie otrzymaliśmy, oto

100
00:07:53,440 --> 00:07:55,100
dane odpowiedzi tutaj.

101
00:07:55,120 --> 00:08:01,780
Przechowuje klucz nazwy, a następnie także ten identyfikator wygenerowany przez Firebase, co oznacza, że kiedy wysyłamy nasze dane

102
00:08:01,780 --> 00:08:08,670
tutaj, możemy faktycznie dodać klucz ID i dodać resData. name, aby uzyskać dostęp do tego klucza

103
00:08:08,720 --> 00:08:14,800
nazwy po zwróceniu odpowiedzi przez Firebase w celu przekazania wygenerowanego po stronie serwera

104
00:08:14,800 --> 00:08:21,330
identyfikatora do naszego reduktora tworzenia produktu na końcu lub do logiki działającej w reduktorze.

105
00:08:21,340 --> 00:08:28,960
Tak więc teraz w reduktorze produktów nie możemy faktycznie użyć tego fałszywego identyfikatora tutaj, ale zamiast

106
00:08:28,960 --> 00:08:36,530
tego oczekiwać tego na naszych danych produktu. Teraz otrzymujemy pole ID, które jest generowanym po stronie serwera

107
00:08:36,530 --> 00:08:43,430
identyfikatorem, ale na razie pozostanę przy tym fałszywym identyfikatorze użytkownika, ale otrzymamy ten identyfikator wygenerowany po stronie serwera tutaj i

108
00:08:43,430 --> 00:08:48,910
oto on, dlatego używamy go na również frontend, który będzie ważny na później, kiedy usuniemy również

109
00:08:48,920 --> 00:08:50,600
rzeczy i tak dalej.

110
00:08:50,630 --> 00:08:55,460
To dodaje produkt, ale oczywiście, gdy tylko przeładujemy aplikację, nie ma go, ponieważ w aplikacji był

111
00:08:55,460 --> 00:08:56,810
przechowywany tylko w pamięci.

112
00:08:56,810 --> 00:09:01,190
Teraz przechowujemy go również na serwerze, ale nigdy nie pobieramy go z serwera, więc

113
00:09:01,220 --> 00:09:03,170
upewnijmy się, że to zrobimy.