1
00:00:02,220 --> 00:00:06,440
Aby dodać funkcję do koszyka, musimy popracować nad dwiema rzeczami -

2
00:00:06,450 --> 00:00:09,850
jedną z nich jest oczywiście to, że możemy mieć

3
00:00:09,880 --> 00:00:17,250
ekran koszyka, że w nagłówku mamy ikonę, która prowadzi nas do ekranu koszyka, gdzie możemy zobaczyć całkowita suma i pozycje

4
00:00:17,250 --> 00:00:20,640
w koszyku oraz miejsce, w którym mamy teraz

5
00:00:20,640 --> 00:00:26,580
to zamówienie, ale powiedziałbym, że to drugi krok, ponieważ ważniejszym pierwszym krokiem jest dodanie logiki do

6
00:00:26,910 --> 00:00:33,030
zarządzania artykułami w koszyku, która obejmuje Redux. W tym celu dodam nowy

7
00:00:33,040 --> 00:00:40,620
reduktor, drugi reduktor, który nazwie nazwę wózek, wózek. js, a także plik akcji, a teraz jest

8
00:00:40,750 --> 00:00:43,280
to plik akcji, który zapełnimy.

9
00:00:43,330 --> 00:00:45,270
Zrobimy to z plikiem produktów później, gdy

10
00:00:45,280 --> 00:00:52,250
zaczniemy dodawać produkty i tak dalej, ale na razie zacznijmy od funkcji koszyka. Więc tutaj w

11
00:00:52,250 --> 00:00:55,010
koszyku. plik js w

12
00:00:55,250 --> 00:01:00,350
folderze reduktorów, ustawię mój stan początkowy dla tego wycinka koszyka i znowu, to są wszystkie te

13
00:01:00,350 --> 00:01:05,390
osobne reduktory i stany, w których udało im się stworzyć cały sklep Redux, ponieważ w

14
00:01:05,390 --> 00:01:11,420
końcu to właśnie tutaj łączycie z połączonymi redukcjami w jeden reduktor korzeni i jeden duży stan na końcu.

15
00:01:11,520 --> 00:01:16,150
Mamy tylko te poszczególne pod-stany, aby ułatwić zarządzanie danymi.

16
00:01:16,230 --> 00:01:22,100
Więc tutaj, w reduktorze koszyków, jak powinien wyglądać stan naszego wózka?

17
00:01:22,500 --> 00:01:31,000
Cóż, nasz koszyk będzie miał mnóstwo przedmiotów, może to być tablica i suma, która początkowo wynosi zero, więc całkowita kwota, którą można powiedzieć,

18
00:01:31,360 --> 00:01:35,680
może oczywiście również podać tę całkowitą kwotę, aby naprawdę wyjaśnić, co

19
00:01:35,680 --> 00:01:36,720
to jest.

20
00:01:36,730 --> 00:01:39,160
Są to więc dwie rzeczy, które składają się na mój koszyk

21
00:01:39,160 --> 00:01:45,460
i jak zawsze nie mogę tego wystarczająco podkreślić, istnieje więcej niż jeden sposób realizacji tego. Więc jeśli chcesz zarządzać także innymi danymi tutaj,

22
00:01:45,460 --> 00:01:47,350
zdecydowanie to zrób, nie

23
00:01:47,380 --> 00:01:48,480
ma jednego

24
00:01:48,490 --> 00:01:50,920
dobrego lub złego podejścia, to tylko

25
00:01:50,920 --> 00:01:53,330
moje podejście do tworzenia tej aplikacji.

26
00:01:53,410 --> 00:01:58,480
Teraz ważne jest, aby dla tego wózka tutaj upewnić się, że jeśli mamy już

27
00:01:58,590 --> 00:02:02,120
przedmiot w koszyku, powiedzmy czerwoną koszulę i klikam, aby koszyk

28
00:02:02,440 --> 00:02:09,340
po raz drugi, nie dodam dwóch przedmiotów do tej tablicy, ale Wciąż mam tam tylko jeden przedmiot, a zamiast tego

29
00:02:09,340 --> 00:02:15,850
każdy przedmiot w tej tablicy przedmiotów powinien być obiektem, w którym mogę zarządzać, podobnie jak identyfikator produktu, gdzie

30
00:02:15,850 --> 00:02:18,940
mam tytuł i ilość towaru w koszyku, więc

31
00:02:18,970 --> 00:02:22,630
wtedy zmień na 2, jeśli kliknę go po raz drugi.

32
00:02:22,720 --> 00:02:31,960
Dlatego możesz argumentować, że przedmioty nie powinny być tablicą, ale może obiektem JavaScript, ponieważ pozwala nam to przechowywać

33
00:02:32,170 --> 00:02:37,930
identyfikator produktu jako klucz, a wartością może być obiekt z tytułem,

34
00:02:38,220 --> 00:02:42,420
z ilością, z cena, a to tylko alternatywa,

35
00:02:42,470 --> 00:02:43,840
możesz to

36
00:02:43,840 --> 00:02:48,830
wszystko zrobić z tablicą, ale tak właściwie zastosuję to podejście.

37
00:02:49,180 --> 00:02:54,190
Teraz eksportowany przeze mnie reduktor jest więc reduktorem, który oczywiście otrzymuje stan, który

38
00:02:54,190 --> 00:03:00,700
ma nasz stan początkowy jako wartość domyślną i działanie jako argument, który ostatecznie musi zwrócić niektóre dane.

39
00:03:01,150 --> 00:03:04,890
W końcu musi zwrócić nowy stan, który jest następnie używany przez Redux.

40
00:03:04,900 --> 00:03:07,210
Teraz potrzebujemy działania, aby kontynuować.

41
00:03:07,660 --> 00:03:15,610
Więc tutaj wyeksportuję stałą, identyfikator akcji i nadam nazwę dodaniu do koszyka, identyfikator zależy od ciebie,

42
00:03:15,610 --> 00:03:22,790
pójdę z dodawaniem do koszyka w ten sposób, a w pliku działań utworzę taki

43
00:03:22,780 --> 00:03:24,490
funkcja kreatora akcji.

44
00:03:24,610 --> 00:03:26,620
Więc tutaj kolejna stała,

45
00:03:26,650 --> 00:03:34,800
którą nazwiebym dodać do koszyka, która otrzymuje powiedzmy pełny obiekt produktu, który chcę dodać, aby móc wyciągnąć potrzebne

46
00:03:34,800 --> 00:03:40,260
informacje, a następnie tutaj musimy zwrócić taki obiekt akcji, który ma typ,

47
00:03:40,260 --> 00:03:44,730
który jest dodawany do koszyka, a następnie nasz produkt.

48
00:03:44,730 --> 00:03:50,010
Jest to tylko sposób tworzenia tych akcji, który sprawia, że bardzo łatwo jest to zrobić

49
00:03:50,010 --> 00:03:51,240
w naszych komponentach.

50
00:03:51,240 --> 00:03:56,970
W końcu, w reduktorze wózka, właściwie we wszystkich reduktorach, ale w miejscu, w którym dbamy o reduktory

51
00:03:57,310 --> 00:03:58,010
wózka,

52
00:03:58,020 --> 00:04:06,180
dostaniemy akcję dodawania do koszyka, więc tutaj musimy zmienić typ akcji i obsłużyć przypadek, w którym jest dodawany do koszyka, dlatego należy zaimportować

53
00:04:06,360 --> 00:04:07,950
opcję Dodaj do koszyka z

54
00:04:07,950 --> 00:04:14,050
tego folderu działań i tam, z pliku koszyka. Teraz i przy okazji ważne, ta akcja, gdy

55
00:04:14,070 --> 00:04:19,200
jest wysyłana, jest odbierana na wszystkich reduktorach, ale jeśli nie poradzisz sobie z nią osobną

56
00:04:19,200 --> 00:04:26,460
skrzynką, uruchomi się skrzynka domyślna, która normalnie powinna po prostu zwrócić wycinek stanu bieżącego dla tego reduktora, który oznacza, że wycinek

57
00:04:26,460 --> 00:04:31,100
stanu dla tego reduktora jest niezmieniony. Tutaj jednak w reduktorze wózka chcę

58
00:04:31,140 --> 00:04:34,550
oczywiście zmienić swój stan, dlatego radzę sobie dodać tu

59
00:04:34,710 --> 00:04:36,750
i teraz obudowę koszyka,

60
00:04:36,750 --> 00:04:39,660
a teraz dodać do koszyka, co powinno

61
00:04:39,660 --> 00:04:41,240
się tam stać?

62
00:04:42,280 --> 00:04:50,720
Cóż, otrzymujemy nasz dodany produkt, możemy wyciągnąć go z akcji, ponieważ tam w akcji będziemy mieli klucz produktu, to

63
00:04:50,720 --> 00:04:51,750
właśnie

64
00:04:51,770 --> 00:04:56,040
ustawiliśmy tutaj w koszyku akcji. plik js, więc wezmę nasz

65
00:04:56,060 --> 00:05:00,710
produkt i przechowuję go w stałym, dodanym produkcie, z którym możemy teraz pracować i

66
00:05:01,920 --> 00:05:08,910
będziemy mieli naszą cenę produktu, która jest oczywiście dodana Produkt. cenę, a my dodamy tytuł produktu,

67
00:05:08,940 --> 00:05:16,170
który został dodany Produkt. tytuł. Zanim przejdziemy dalej, określmy, w

68
00:05:16,170 --> 00:05:21,460
jaki sposób koszyk, więc to, co przechowujemy, powinno wyglądać, jaką mamy wartość.

69
00:05:21,650 --> 00:05:30,550
Więc przejdę do folderu moich modeli i dodam element koszyka. tutaj plik js, a następnie dodaj klasę elementu

70
00:05:30,580 --> 00:05:32,650
koszyka, która otrzymuje

71
00:05:32,890 --> 00:05:39,370
konstruktor, i zanim znów go zapomnę, którą należy wyeksportować tu i

72
00:05:39,370 --> 00:05:46,750
teraz w tym konstruktorze, spodziewam się uzyskać ilość produktu, który zamierzamy dodać, cena

73
00:05:47,020 --> 00:05:56,950
produktu, tytuł produktu i suma tego produktu, jeśli mamy trzy razy czerwoną koszulę, nasza suma wyniesie trzy razy

74
00:05:56,950 --> 00:05:58,980
29. 99,

75
00:05:59,110 --> 00:06:01,690
czyli około 90 USD.

76
00:06:01,690 --> 00:06:10,220
Teraz nie dostaję tutaj identyfikatora produktu, ponieważ użyję go jako klucza wewnątrz mojego obiektu, który przechowuje elementy, a następnie

77
00:06:10,220 --> 00:06:13,440
stanie się wyraźniejszy, gdy go zaimplementujemy.

78
00:06:14,150 --> 00:06:17,690
Więc tutaj, w koszyku, po prostu

79
00:06:17,840 --> 00:06:22,890
przechowuję wszystkie dane, które otrzymuję, ilość, cenę produktu i mam

80
00:06:22,900 --> 00:06:34,200
te dane, które muszę później wydrukować, więc tytuł produktu i suma, jak to, a teraz z powrotem w reduktorze, możemy oczywiście

81
00:06:34,260 --> 00:06:41,520
zaimportować tę klasę koszyka z folderu modeli i z koszyka tutaj i teraz z

82
00:06:41,520 --> 00:06:47,880
powrotem w tym pudełku „dodaj do koszyka”, przede wszystkim musimy dowiedzieć się,

83
00:06:47,980 --> 00:06:52,680
czy ten produkt jest już częścią naszych produktów.

84
00:06:52,680 --> 00:06:59,370
Teraz, jak już wspomniałem, dodam każdy nowy produkt, dodając nowy klucz do przedmiotów, który jest identyfikatorem tego

85
00:06:59,370 --> 00:07:01,020
produktu, ponieważ jest

86
00:07:01,020 --> 00:07:06,870
to unikatowe, zawsze mamy każdy klucz tylko raz, a następnie wartość będzie koszykiem, ponieważ zdefiniowałem

87
00:07:07,110 --> 00:07:12,990
to w modelach i dlatego wiem, że jeśli identyfikator produktu, który tu otrzymuję, jest już

88
00:07:13,170 --> 00:07:17,050
kluczem przedmiotów, to ma już nasz przedmiot jako przedmiot koszyka.

89
00:07:17,070 --> 00:07:26,190
Więc tutaj możemy po prostu sprawdzić, czy przedmioty do dodanego produktu. Identyfikator istnieje, więc jeśli to zwraca coś prawdziwego,

90
00:07:26,200 --> 00:07:36,290
więc nieokreślonego, to mamy już przedmiot w koszyku, co jest w porządku, ale wtedy musimy tylko zmienić ilość,

91
00:07:36,290 --> 00:07:38,800
w przeciwnym razie będziemy

92
00:07:38,860 --> 00:07:41,600
musieli dodać zupełnie nowy przedmiot.

93
00:07:41,600 --> 00:07:45,920
Zacznijmy więc od przypadku else, ponieważ taki przypadek napotkamy po

94
00:07:45,920 --> 00:07:47,170
raz pierwszy,

95
00:07:47,330 --> 00:07:51,910
gdy dodamy coś po raz pierwszy, potrzebujemy nowego elementu koszyka, tworzę

96
00:07:51,920 --> 00:07:58,460
to za pomocą nowego słowa kluczowego i zdefiniowanej przeze mnie klasy elementu koszyka , musimy podać

97
00:07:58,520 --> 00:08:00,530
ilość, która oczywiście jest jedna,

98
00:08:00,920 --> 00:08:08,840
jeśli po prostu dodamy nowy przedmiot, musimy podać cenę produktu, tytuł produktu tutaj oraz sumę i sumę oczywiście początkowo

99
00:08:09,050 --> 00:08:11,580
to tylko nasza cena produktu, prawda?

100
00:08:11,600 --> 00:08:17,810
Ponieważ jeśli dodamy jeden element tej ceny, wówczas suma tego elementu koszyka będzie naszą ceną produktu, a teraz ten nowy

101
00:08:17,810 --> 00:08:21,200
element koszyka musi zostać dodany do naszych elementów koszyka tutaj.

102
00:08:24,100 --> 00:08:29,050
Zwracamy więc kopię naszego stanu i ustawiamy elementy równe

103
00:08:29,220 --> 00:08:38,290
nowemu obiektowi, do którego kopiuję wszystkie moje istniejące elementy stanu, tak że kopiuję tutaj mój istniejący

104
00:08:38,290 --> 00:08:39,630
obiekt

105
00:08:39,640 --> 00:08:47,200
elementów, a następnie dodam nowy klucz z tą składnią dynamiczną za pomocą nawiasy

106
00:08:47,200 --> 00:08:55,280
kwadratowe, w których dodano nazwę klucza Produkt. Identyfikator, to miałem na myśli, ponieważ identyfikator produktu jest kluczem w naszym

107
00:08:55,340 --> 00:08:59,190
obiekcie przedmiotów, a wartością jest nasz nowy produkt w koszyku.

108
00:08:59,390 --> 00:09:04,730
To tylko składnia, którą musisz znać, jest to waniliowy JavaScript, w ten sposób możesz dodać lub uzyskać dostęp

109
00:09:04,730 --> 00:09:11,570
do właściwości dynamicznej zamiast zakodować ją tutaj jako ciąg znaków. Nawiasem mówiąc, tutaj też powinno

110
00:09:11,600 --> 00:09:20,170
być oczywiście państwo. przedmioty, mój błąd. W związku z tym powinniśmy dodać tutaj nowy przedmiot do koszyka.

111
00:09:20,230 --> 00:09:24,790
Teraz, jeśli masz już przedmiot w koszyku, to oczywiście nie tworzymy nowego

112
00:09:24,790 --> 00:09:31,480
przedmiotu w koszyku, zamiast tego chcemy zaktualizować istniejący. Będę więc miał tutaj mój zaktualizowany

113
00:09:31,480 --> 00:09:35,470
element koszyka, a do tego nadal tworzę nowy

114
00:09:35,800 --> 00:09:46,960
element koszyka, ale wstępnie wypełnię go istniejącymi danymi, na przykład ilością tutaj. Otrzymujemy to z elementów stanu dla identyfikatora dodanego produktu, ponieważ powinien on już być częścią

115
00:09:46,960 --> 00:09:52,150
elementów stanu, sprawdzamy to tutaj i będzie to oczywiście miało klucz ilościowy, ponieważ taki

116
00:09:52,150 --> 00:09:57,730
element tutaj w moich przedmiotach jest po prostu wpisz elementy koszyka, aby miał on właściwość

117
00:09:57,730 --> 00:09:58,480
ilości,

118
00:09:58,600 --> 00:10:02,020
a my po prostu ją dodamy, ponieważ dodajemy nowy

119
00:10:02,080 --> 00:10:09,560
element koszyka, więc musimy to zwiększyć. Teraz pozycja w koszyku jako drugi argument bierze cenę produktu. Oczywiście, ponieważ zbudujemy aplikację w

120
00:10:09,570 --> 00:10:14,540
taki sposób, że cena nigdy się nie zmieni, co zwiększyłoby tutaj złożoność,

121
00:10:14,550 --> 00:10:19,860
musielibyśmy zarządzać koszykiem w zupełnie inny sposób, w takim przypadku musielibyśmy przechowywać każdy

122
00:10:19,890 --> 00:10:25,350
koszyk jako lista transakcji dla tego produktu w koszyku, która jest tu za duża.

123
00:10:25,350 --> 00:10:30,760
Ponieważ to się nigdy nie zmienia, ponieważ cena nigdy się nie zmienia, możemy w końcu

124
00:10:30,760 --> 00:10:36,930
wziąć otrzymaną cenę prod lub wziąć istniejącą cenę, którą wcześniej przechowaliśmy, ponieważ to znowu nigdy się nie zmieni.

125
00:10:36,930 --> 00:10:42,150
Tytuł może się zmienić i chcę zapisać tutaj najnowszy tytuł, więc zdecydowanie wezmę ten

126
00:10:42,150 --> 00:10:46,620
produkt, który tu otrzymamy, zamiast mojej starej migawki i ostatnią, ale nie

127
00:10:46,710 --> 00:10:51,480
mniej ważną, ostatnią wartość tutaj, moją całkowitą sumę dla tego elementu koszyka jest

128
00:10:51,480 --> 00:10:59,520
to oczywiście bieżąca suma, więc uzyskuję dostęp do elementów stanu dla identyfikatora tutaj, sumy plus cena produktu, ponieważ tutaj dodamy jeden nowy

129
00:10:59,520 --> 00:11:06,660
element, musimy dodać cenę razy 1 do bieżącej sumy. To jest zaktualizowany element

130
00:11:06,660 --> 00:11:08,570
koszyka.

131
00:11:08,580 --> 00:11:16,750
Teraz możemy zwrócić nasz nowy wycinek stanu tutaj, kopiując stare stany i ustawiając elementy równe i teraz ważne,

132
00:11:16,930 --> 00:11:26,460
do obiektu, w którym kopiujemy stan. elementy, ale w których teraz ponownie ustawiliśmy addedProduct. Identyfikator i tak, to już istnieje, ale

133
00:11:26,460 --> 00:11:33,310
po prostu zastępujemy go naszym zaktualizowanym produktem w koszyku, więc robimy tę samą aktualizację,

134
00:11:33,310 --> 00:11:37,070
którą tam robimy. Teraz jednak nie

135
00:11:37,100 --> 00:11:40,150
wszystko, co musimy zrobić, musimy również

136
00:11:40,250 --> 00:11:43,750
zmienić całkowitą kwotę, ponieważ oczywiście się to zmienia.

137
00:11:43,940 --> 00:11:52,420
Więc kiedy dodajemy przedmiot po raz pierwszy, wówczas całkowita kwota powinna być w zasadzie naszą starą całkowitą kwotą, więc

138
00:11:52,430 --> 00:11:57,530
podaj sumę całkowitą plus cenę produktu i to samo, jeśli dodamy

139
00:11:57,530 --> 00:12:04,910
przedmiot do istniejącego koszyka lub gdy już tam jest ponieważ ostatecznie nasza suma zawsze jest tylko

140
00:12:04,910 --> 00:12:10,130
starą sumą plus cena, ponieważ zawsze dodajemy jeden element tego produktu,

141
00:12:10,130 --> 00:12:12,190
tak działa ta aplikacja.

142
00:12:12,200 --> 00:12:14,480
Tak więc nasza instrukcja aktualizacji

143
00:12:14,480 --> 00:12:18,920
jest prawie taka sama, jedyne, co się różni, to sposób tworzenia tego elementu

144
00:12:18,920 --> 00:12:24,110
koszyka, dlatego możemy oczywiście również ponownie użyć tego kodu, przenieść go z bloku if else

145
00:12:24,110 --> 00:12:27,590
i zamiast mieć tutaj dwie różne stałe , możemy utworzyć

146
00:12:30,670 --> 00:12:33,150
zmienną przed wprowadzeniem instrukcji if, zaktualizowanej lub

147
00:12:33,190 --> 00:12:36,990
nowej pozycji w koszyku, może to być nazwa, ponieważ nie wiemy,

148
00:12:37,090 --> 00:12:44,590
co to będzie z góry, a następnie tutaj, w gałęzi if, ustawiliśmy aktualizację lub nowy element koszyka do tego zaktualizowanego elementu koszyka,

149
00:12:44,590 --> 00:12:49,900
tutaj z drugiej strony ustawiamy go na ten nowy element koszyka, a tutaj zawsze używamy zaktualizowanego

150
00:12:49,930 --> 00:12:54,270
lub nowego elementu koszyka, a dzięki temu mamy tutaj trochę ponownego użycia kodu

151
00:12:54,400 --> 00:13:00,610
i nie powtarzajcie się, co jest zawsze dobre. Inna uwaga, kopiowanie stanu tutaj jest oczywiście zawsze

152
00:13:00,610 --> 00:13:04,420
zbędne, ponieważ zawsze ustawia się zarówno pozycje, jak i całkowitą kwotę.

153
00:13:04,420 --> 00:13:09,520
Więc jeśli zawsze masz tylko te dwa pola tutaj i zawsze zmieniasz oba, nie

154
00:13:09,520 --> 00:13:15,940
musisz kopiować istniejącego stanu, jeśli kiedykolwiek wprowadzisz kolejny kawałek danych do swojego wycinka stanu tutaj, którego tu nie

155
00:13:15,940 --> 00:13:20,680
zmienisz musisz jednak skopiować swój stary stan, aby nie utracić tych dodatkowych

156
00:13:20,680 --> 00:13:21,150
danych.

157
00:13:21,190 --> 00:13:26,470
Dlatego zostawię tę funkcję kopiowania, chociaż technicznie jej tu nie potrzebujemy, ale jeśli

158
00:13:26,470 --> 00:13:30,750
kiedykolwiek powinniśmy zmienić stan, w którym został zapisany, i nie

159
00:13:31,030 --> 00:13:34,310
zapomnimy go skopiować, a zatem utracimy dane.

160
00:13:34,330 --> 00:13:36,190
Cóż, było dużo pracy,

161
00:13:36,190 --> 00:13:38,300
dzięki czemu możemy rozpocząć wysyłanie tej

162
00:13:38,320 --> 00:13:42,130
akcji i oczywiście chcę wysłać ją z przeglądu produktu i szczegółów

163
00:13:42,190 --> 00:13:45,650
produktu, ponieważ na obu ekranach mam przyciski dodawania do koszyka.

164
00:13:45,710 --> 00:13:50,890
Zacznijmy więc od ekranu przeglądu produktów, aby wysłać działania Redux,

165
00:13:50,890 --> 00:13:52,380
musimy dołączyć

166
00:13:52,600 --> 00:14:00,880
tutaj użycie haka wysyłki, tutaj możemy po prostu uzyskać dostęp do tej funkcji wysyłki, wywołując use dispatch

167
00:14:00,880 --> 00:14:08,410
w ten sposób, a teraz po kliknięciu Dodaj do tam na dole, możemy wysłać naszą akcję

168
00:14:08,410 --> 00:14:13,330
tutaj i oczywiście przy okazji, zamiast korzystać z funkcji wbudowanych

169
00:14:13,480 --> 00:14:15,930
tutaj, możesz mieć funkcje przechowywane

170
00:14:16,090 --> 00:14:24,700
w oddzielnych stałych wewnątrz komponentu funkcjonalnego tutaj, alternatywnie, będę trzymać się funkcji wbudowanych dla teraz i zaimportuję tutaj

171
00:14:24,790 --> 00:14:32,080
wszystkie moje akcje jako akcje koszyka z folderu sklepu, a tam folder akcji, plik koszyka.

172
00:14:32,080 --> 00:14:37,060
Teraz jest to składnia importu, która łączy wszystkie eksporty z pliku razem w jeden

173
00:14:37,060 --> 00:14:40,020
obiekt, mamy tutaj tylko jeden eksport, więc

174
00:14:40,030 --> 00:14:42,610
możesz również celować w ten konkretny

175
00:14:42,610 --> 00:14:46,630
eksport, później będziemy mieli wiele eksportów i dlatego użyję tego podejścia.

176
00:14:46,630 --> 00:14:49,750
Więc tutaj wysyłamy akcję koszyka.

177
00:14:49,930 --> 00:14:55,400
dodaj do koszyka i jest to funkcja, którą musimy wykonać, to jest nasza funkcja do tworzenia

178
00:14:55,400 --> 00:14:57,050
akcji i to jako

179
00:14:57,430 --> 00:15:05,270
argument bierze nasz produkt, więc w końcu tutaj musimy przekazać itemData. pozycja, która jest tylko naszym produktem tutaj na ekranie

180
00:15:05,270 --> 00:15:06,330
szczegółów produktu.

181
00:15:06,410 --> 00:15:12,850
Dlatego robimy dokładnie to samo, importujemy use dispatch z React Redux, dlatego tutaj możemy uzyskać

182
00:15:12,890 --> 00:15:17,560
dostęp do funkcji wysyłki, wywołując use dispatch, a następnie dla

183
00:15:18,050 --> 00:15:23,990
tego przycisku tutaj w funkcji wbudowanej lub w osobnej funkcji nazwanej, jeśli Ci

184
00:15:24,440 --> 00:15:26,330
się spodoba , możesz

185
00:15:26,360 --> 00:15:31,490
wywołać wysyłkę, teraz musimy zaimportować nasze akcje, a ja użyję tej

186
00:15:31,490 --> 00:15:42,190
samej składni, co wcześniej, gdzie importuję wszystko jako akcje koszyka z folderu sklepu, folderu akcji, pliku koszyka, a teraz akcje koszyka, połączenie dodaj do koszyk

187
00:15:42,190 --> 00:15:48,630
tutaj i prześlij wybrany produkt, który jest naszym produktem, który chcemy dodać do koszyka tutaj.

188
00:15:48,820 --> 00:15:54,190
Miejmy nadzieję, że wywoła takie działania, że przedmiot zostanie dodany do koszyka, ale oczywiście nie

189
00:15:54,190 --> 00:15:56,040
możemy tego teraz potwierdzić.

190
00:15:56,110 --> 00:16:04,390
Właściwie możemy. Możesz uruchomić debuger React Native, a ja wcześniej tego

191
00:16:04,990 --> 00:16:12,010
nie używałem, ale tam możesz teraz nacisnąć klawisz Command lub kontrolować t, aby otworzyć nową kartę, a

192
00:16:15,030 --> 00:16:15,660
następnie

193
00:16:19,500 --> 00:16:20,520
potwierdzić import

194
00:16:23,560 --> 00:16:30,790
tutaj, a następnie przejść do aplikacji i tam, otworzyć menu debugowania na iOS z poleceniem D, na Androidzie

195
00:16:35,000 --> 00:16:43,990
ze sterowaniem lub poleceniem M i kliknij na zdalne debugowanie Javascript. Teraz moje otworzyło się właściwie na porcie 19003, więc otworzyłem React

196
00:16:43,990 --> 00:16:45,290
Native debugger

197
00:16:45,300 --> 00:16:52,120
na niewłaściwym porcie, wybierz mnie ponownie, naciśnij komendę T lub kontroluj T w debuggerze i wybierz 19003,

198
00:16:52,120 --> 00:17:00,460
użyj dowolnego portu otwartego dla Ciebie w Chrome, kliknij potwierdź, a teraz to łączy się z działającą aplikacją React tutaj w

199
00:17:01,210 --> 00:17:05,550
debuggerze, pamiętaj, aby zamknąć debugger Chrome, a następnie ponownie załadować

200
00:17:05,590 --> 00:17:09,630
aplikację, teraz to powinno się połączyć tutaj i teraz

201
00:17:09,640 --> 00:17:11,940
nie tylko możesz sprawdzić swoją aplikację

202
00:17:11,980 --> 00:17:17,950
tutaj, jak to wcześniej wyjaśniłem, nie, możesz również spójrz na część tam, gdzie jest twój

203
00:17:17,950 --> 00:17:22,200
debugger Redux, tam możesz zobaczyć, co Redux robi dla ciebie.

204
00:17:22,280 --> 00:17:28,620
Jedyne, co musisz zrobić, aby to działało, to zainstalować nowy pakiet z

205
00:17:28,660 --> 00:17:34,160
instalacją npm - save dev, ponieważ jest to zależność programistyczna, której

206
00:17:34,160 --> 00:17:40,520
potrzebujemy tylko podczas programowania, i tam zainstaluj rozszerzenie narzędzi programistycznych Redux, przejdź do

207
00:17:40,650 --> 00:17:44,870
swojej aplikacji . Następnie plik js,

208
00:17:47,350 --> 00:17:50,010
a następnie zaimportuj z

209
00:17:50,010 --> 00:17:56,280
tego rozszerzenia narzędzi programistycznych Redux. Stamtąd możesz zaimportować komponowanie za pomocą narzędzi programistycznych, a tę

210
00:17:56,300 --> 00:18:00,050
funkcję przekazujesz, aby utworzyć sklep jako drugi argument, możesz po prostu uruchomić

211
00:18:00,090 --> 00:18:03,260
go w ten sposób. Nawiasem mówiąc, jest to

212
00:18:03,260 --> 00:18:04,530
kod, ten import

213
00:18:04,560 --> 00:18:10,020
i użycie, które powinieneś usunąć przed wdrożeniem aplikacji, ponieważ jest to tylko coś, co powinno być

214
00:18:10,020 --> 00:18:14,160
uruchomione podczas programowania, a nie w aplikacji produkcyjnej, musisz to usunąć przed

215
00:18:14,160 --> 00:18:20,580
wdrożeniem aplikacji ale na etapie rozwoju jest w porządku. Po dodaniu tego, jeśli teraz to zapiszesz,

216
00:18:20,580 --> 00:18:26,940
zobaczysz, że tutaj, w tym Inspektorze Redux, widzisz wysyłanie akcji inicjującej, nie widziałeś tego wcześniej.

217
00:18:26,940 --> 00:18:30,560
To działanie jest automatycznie uruchamiane po uruchomieniu aplikacji.

218
00:18:30,570 --> 00:18:35,670
Jeśli teraz kliknę tutaj, aby koszyk tutaj, zobaczysz również akcję dodawania do koszyka, a

219
00:18:35,670 --> 00:18:41,990
teraz tutaj możesz wyświetlić szczegółowe informacje o tej akcji, takie jak dane, które zostały do niej dołączone,

220
00:18:41,990 --> 00:18:48,120
a także o swoim stanie tutaj i tam, na przykład to: jest stan mojego produktu i gdzie

221
00:18:48,590 --> 00:18:50,380
jest stan mojego koszyka?

222
00:18:50,670 --> 00:18:54,840
Cóż, oczywiście tego brakuje, ponieważ podczas gdy mamy reduktor w konfiguracji działania, w aplikacji. plik js, w

223
00:18:54,840 --> 00:18:58,660
połączonych reduktorach, nie uwzględniamy stanu koszyka.

224
00:18:58,740 --> 00:19:07,110
Więc zaimportujmy reduktor koszyka. / StoreReducers / cart, a teraz po zaimportowaniu możemy dodać go

225
00:19:07,440 --> 00:19:13,890
do naszego połączonego obiektu reduktorów, a teraz dodamy wycinek koszyka, na przykład, wskaż na reduktor koszyka, a zatem

226
00:19:13,890 --> 00:19:20,560
teraz zostanie on włączony do naszego sklepu Redux. Dzięki temu, jeśli teraz zaczekasz na ponowne załadowanie

227
00:19:20,560 --> 00:19:25,830
i klikniesz ponownie, aby koszyk, teraz w tej akcji dodawania do koszyka, w stanie,

228
00:19:25,830 --> 00:19:30,960
zobaczysz, że teraz jest wycinek koszyka, a teraz widzisz całkowitą kwotę, widzisz, że

229
00:19:30,990 --> 00:19:35,700
jest przedmiot z kluczem P1, który jest naszym produktem w ilości 1,

230
00:19:35,710 --> 00:19:43,900
ta cena, suma tego, a jeśli teraz kliknę, aby koszyk tutaj drugi raz, wysyłana jest kolejna akcja i jeśli mamy spójrz

231
00:19:43,900 --> 00:19:48,790
na stan po tej akcji, widzimy teraz, fajny tylko jeden przedmiot, ale teraz

232
00:19:48,790 --> 00:19:52,620
z ilością drugą, cena produktu za przedmiot jest taka, ale

233
00:19:52,630 --> 00:19:54,030
suma jest taka.

234
00:19:54,190 --> 00:19:55,120
To jest

235
00:19:55,120 --> 00:19:57,760
koszula, jeśli teraz wysyłam również niebieski dywan, musimy

236
00:19:57,760 --> 00:20:02,590
jeszcze raz dodać do koszyka, a tam w stanie, teraz rzeczywiście widzimy, że są tam

237
00:20:02,590 --> 00:20:04,190
dwa przedmioty, P1 i

238
00:20:04,270 --> 00:20:09,930
P2, P1 pozostaje niezmieniony, ale P2 został teraz dodany, a łączna kwota również wygląda dla mnie dobrze.

239
00:20:09,940 --> 00:20:16,150
Wydaje się, że to działa i w ten sposób możesz sprawdzić swój stan Redux podczas działania aplikacji bez wyświetlania

240
00:20:16,240 --> 00:20:17,140
go tutaj.

241
00:20:17,140 --> 00:20:21,610
Teraz oczywiście chcemy również wyświetlać go wizualnie, ale jest to dobry sposób na

242
00:20:21,610 --> 00:20:25,120
sprawdzenie swojego stanu za kulisami za pomocą debugera React Native.

243
00:20:25,120 --> 00:20:30,010
Teraz go tutaj zamkniemy, ponieważ nieco spowalnia aplikację i dlatego tutaj,

244
00:20:30,010 --> 00:20:35,230
w menu debugowania, zatrzymam też moje zdalne debugowanie i całkowicie zamknę tutaj inspektora.

245
00:20:35,260 --> 00:20:40,660
Również z powrotem w aplikacji. Plik js, pozbędę się tutaj komponowania z narzędziami

246
00:20:40,660 --> 00:20:42,000
deweloperskimi, aby nie

247
00:20:42,070 --> 00:20:47,020
zapomnieć go później, ale zawsze możesz go dodać tutaj lub pozostawić tutaj, gdy się rozwijasz, abyś

248
00:20:47,020 --> 00:20:48,380
mógł zajrzeć do swojego sklepu.

249
00:20:48,460 --> 00:20:51,010
Najważniejsze dla nas jest to, że

250
00:20:51,010 --> 00:20:57,280
wydaje się, że to działa i przy tej pracy oczywiście możemy teraz pracować nad dodaniem przycisku akcji do nagłówka

251
00:20:57,280 --> 00:21:03,430
i upewnić się, że możemy przejść do strony koszyka z tego lub z pomocą tego przycisk akcji, aby

252
00:21:03,430 --> 00:21:06,220
na stronie koszyka wyświetlać informacje o naszym koszyku.