1
00:00:02,100 --> 00:00:05,460
W przypadku przycisku usuwania ponownie zacznijmy od logiki Redux.

2
00:00:05,490 --> 00:00:11,850
Więc tutaj, na przykład, możemy zarejestrować nowy identyfikator, usunąć z koszyka brzmi jak odpowiednia nazwa,

3
00:00:11,850 --> 00:00:17,120
biorąc pod uwagę, że wcześniej dodawaliśmy do koszyka, więc usuń z koszyka.

4
00:00:17,110 --> 00:00:22,710
Ponownie dodam tutaj funkcję kreatora akcji, usuwam z koszyka.

5
00:00:22,740 --> 00:00:27,750
To wymaga teraz tylko identyfikatora produktu, który powinien zostać usunięty, więc tylko identyfikator produktu,

6
00:00:27,750 --> 00:00:34,260
a następnie zwraca nowy obiekt akcji, w którym typ kursu jest usuwany z koszyka i gdzie mamy pid, identyfikator

7
00:00:34,260 --> 00:00:40,800
produktu, gdzie przesyłam dalej ID produktu Dostaję się tutaj. Teraz w reduktorze mieliśmy skrzynkę „dodaj

8
00:00:40,800 --> 00:00:44,560
do koszyka”, teraz musimy po prostu dodać

9
00:00:44,560 --> 00:00:48,280
tutaj inną skrzynkę i ta skrzynka to

10
00:00:50,290 --> 00:00:53,030
skrzynka do usunięcia z koszyka.

11
00:00:53,050 --> 00:00:57,960
W tym celu musisz upewnić się, że importujesz identyfikator usuniętej z koszyka akcji

12
00:00:58,000 --> 00:00:58,990
z pliku

13
00:01:01,840 --> 00:01:03,670
działań koszyka, a tutaj

14
00:01:03,670 --> 00:01:07,120
w przypadku usuwania z koszyka znów mamy dwie sprawy.

15
00:01:07,140 --> 00:01:12,660
Jednym z nich jest to, że mieliśmy tylko jeden przedmiot tego produktu w koszyku, jak w

16
00:01:12,660 --> 00:01:13,900
przypadku niebieskiego dywanu,

17
00:01:13,980 --> 00:01:16,760
w tym przypadku musimy go całkowicie usunąć z

18
00:01:16,770 --> 00:01:17,850
obiektu przedmiotów

19
00:01:17,850 --> 00:01:23,400
w koszyku, więc z tego obiektu, a zatem usunie go z tego rzędu które wyprowadzamy tutaj.

20
00:01:23,400 --> 00:01:27,870
Jeśli mamy dwa lub więcej przedmiotów, po prostu chcemy zmniejszyć ilość o 1.

21
00:01:27,870 --> 00:01:33,120
Oczywiście zawsze możesz całkowicie usunąć ten przedmiot, jeśli chcesz, ale chcę ci pokazać, jak

22
00:01:33,120 --> 00:01:35,450
możesz rozróżnić te dwa przypadki.

23
00:01:35,490 --> 00:01:41,130
Tak więc, jeśli mamy ilość większą niż jeden, nie chcę wymazać przedmiotu z koszyka, ale

24
00:01:41,130 --> 00:01:43,870
po prostu zmniejszyć ilość o 1.

25
00:01:44,100 --> 00:01:51,210
Dlatego w celu usunięcia z koszyka musimy dowiedzieć się, jaka jest nasza ilość. Tak więc naszą aktualną ilość, którą przechowuję w tej stałej,

26
00:01:51,210 --> 00:01:57,930
można odjąć od naszego stanu, oczywiście w przedmiotach, musimy znaleźć produkt, którego szukamy i oczywiście możemy to zrobić

27
00:01:57,960 --> 00:02:00,000
za pomocą identyfikatora, który

28
00:02:00,000 --> 00:02:04,770
jest część naszej akcji tutaj w polu pid, ponieważ teraz stan przedmioty jest

29
00:02:05,550 --> 00:02:11,440
przedmiotem i dlatego możemy uzyskać dostęp do akcji. pid tutaj, prawda.

30
00:02:11,450 --> 00:02:16,680
Będzie to dynamicznie uzyskiwać dostęp do wartości za pomocą klucza identyfikatora produktu tutaj w

31
00:02:16,950 --> 00:02:18,380
naszym produkcie, więc

32
00:02:18,390 --> 00:02:21,220
dzięki identyfikatorowi produktu rozpoczynamy tę akcję i

33
00:02:21,240 --> 00:02:24,950
właśnie w ten sposób dodajemy przedmioty do obiektu przedmiotów tutaj.

34
00:02:24,960 --> 00:02:28,890
Używamy naszego identyfikatora produktu jako identyfikatora, teraz używam

35
00:02:28,920 --> 00:02:32,410
go tutaj, aby uzyskać do niego dostęp.

36
00:02:32,430 --> 00:02:36,940
Będzie to miało pewną ilość, ponieważ będzie to wartość, która jest produktem, możesz

37
00:02:36,990 --> 00:02:41,120
oczywiście również dodać, czy ten produkt jest rzeczywiście częścią koszyka, ale sposób,

38
00:02:41,130 --> 00:02:46,290
w jaki tworzymy tę aplikację, nigdy nie powinniśmy być w stanie tego osiągnąć akcja bez

39
00:02:46,290 --> 00:02:51,690
tego produktu będącego częścią koszyka, ponieważ możemy tutaj uruchomić akcję usuwania tylko z poziomu ekranu koszyka,

40
00:02:51,690 --> 00:02:55,340
więc nie musimy tutaj sprawdzać, ale zdecydowanie musimy zdobyć ilość.

41
00:02:55,410 --> 00:03:03,780
Teraz możemy sprawdzić, czy bieżąca ilość jest większa niż 1, co oznacza, że musimy ją zmniejszyć, musimy ją

42
00:03:03,780 --> 00:03:06,740
zmniejszyć, a nie usunąć, w przeciwnym

43
00:03:06,750 --> 00:03:08,940
razie musimy ją usunąć.

44
00:03:09,090 --> 00:03:11,790
Teraz zacznijmy od skrzynki kasowania.

45
00:03:11,850 --> 00:03:18,900
Więc tutaj musimy tylko zwrócić nowy obiekt przedmiotów, który zawiera wszystkie stare

46
00:03:18,930 --> 00:03:27,520
przedmioty, ale już go nie zawiera. Możemy więc mieć tutaj nasze zaktualizowane elementy koszyka, w których klonujemy

47
00:03:27,520 --> 00:03:36,870
elementy stanu, takie jak to, a teraz, aby usunąć właściwość, możemy użyć słowa kluczowego delete, które zna Javascript, i tam możemy usunąć

48
00:03:36,870 --> 00:03:41,880
zaktualizowane elementy koszyka do działania. pid.

49
00:03:41,880 --> 00:03:49,290
Spowoduje to usunięcie tego elementu z naszego skopiowanego obiektu JavaScript tutaj, spowoduje całkowite usunięcie tego elementu, ten element produktu całkowicie

50
00:03:49,290 --> 00:03:57,020
z naszego obiektu przedmiotów w koszyku. W ten sposób możemy to usunąć. Teraz w innym przypadku, w

51
00:03:57,020 --> 00:03:59,690
którym po prostu musimy go zmniejszyć, mogę

52
00:04:01,040 --> 00:04:07,250
mieć zaktualizowany element koszyka, więc ten pojedynczy element koszyka, w którym tworzę nowy element koszyka z

53
00:04:07,280 --> 00:04:13,700
klasą elementu koszyka i tam chcę skopiować wartości istniejącego element koszyka, ale po prostu zmniejsz ilość.

54
00:04:14,220 --> 00:04:17,910
Tak więc element koszyka przyjmuje ilość dokładnie jako pierwsze

55
00:04:17,910 --> 00:04:25,290
wartości, więc teraz tutaj celem jest uzyskanie dostępu do elementów stanu dla identyfikatora produktu, który dostaję na akcję,

56
00:04:25,290 --> 00:04:33,450
a ponieważ powtarzanie tego będzie uciążliwe, będę przechowywać go w pomocniku na stałe , wybrany element koszyka jest tutaj, teraz

57
00:04:33,510 --> 00:04:37,290
możemy go wymienić na wybrany element koszyka i tutaj

58
00:04:37,290 --> 00:04:41,760
mogę użyć wybranego elementu cartItem. ilość minus jeden.

59
00:04:41,760 --> 00:04:48,240
Teraz oczywiście wiemy, że nie będzie to zero, ponieważ ilość była większa niż 1 i teraz możemy

60
00:04:48,240 --> 00:04:49,820
oczywiście zachować resztę danych.

61
00:04:49,830 --> 00:04:57,270
Trzymamy tutaj cenę produktu, zachowujemy tytuł produktu, że wszystko się nie zmienia, suma

62
00:04:57,270 --> 00:05:00,840
oczywiście się zmienia i to

63
00:05:00,910 --> 00:05:05,090
jest suma, stara suma minus cena oczywiście,

64
00:05:05,100 --> 00:05:13,410
więc minus cena produktu, ponieważ usunęliśmy jedną element, musimy zmniejszyć sumę o cenę jednego elementu.

65
00:05:13,470 --> 00:05:21,870
Teraz ten zaktualizowany element koszyka musi zastąpić bieżący element w naszym obiekcie przedmiotów koszyka. Abyśmy mogli również ponownie użyć trochę kodu, właściwie to trochę

66
00:05:21,870 --> 00:05:26,760
zmienię i utworzę zaktualizowane elementy koszyka jako zmienną tutaj zamiast stałej tutaj w

67
00:05:26,760 --> 00:05:32,880
bloku else, więc po prostu zaktualizuję wartość tych zmiennych, tak że tutaj w w bloku if

68
00:05:33,240 --> 00:05:34,230
możemy również

69
00:05:34,230 --> 00:05:40,530
użyć tej samej nazwy zmiennej, zaktualizować elementy koszyka, w których ustawiłem to na równe z kopią istniejących

70
00:05:40,530 --> 00:05:49,890
elementów, ale następnie zastąpiłem tutaj moje pid działania, więc mój identyfikator produktu, mój identyfikator, wartość tam z zaktualizowany produkt w koszyku, który jest moim starym

71
00:05:49,890 --> 00:05:56,610
produktem w koszyku ze zaktualizowaną ilością i sumą. To są zaktualizowane przedmioty w koszyku,

72
00:05:56,700 --> 00:05:57,520
teraz

73
00:05:57,540 --> 00:06:02,550
oczywiście będziemy musieli również dostosować całkowitą kwotę naszego stanu,

74
00:06:02,550 --> 00:06:10,800
więc po tym, jeśli inaczej zablokujemy, zwracamy kopię stanu, przedmioty można ustawić na zaktualizowane przedmioty w

75
00:06:11,160 --> 00:06:14,030
koszyku, a teraz ważne, całkowitą

76
00:06:14,100 --> 00:06:20,160
kwotę można ustawić tak, aby podawała całkowitą kwotę pomniejszoną o cenę produktu

77
00:06:23,530 --> 00:06:31,030
wybranego koszyka, ponieważ tak jak zaktualizowałem sumę dla tego pojedynczego elementu koszyka, całkowita suma koszyka

78
00:06:31,060 --> 00:06:38,200
oczywiście również musi zostać skorygowana jako taka. Teraz możemy spróbować wysłać akcję usuwania z koszyka.

79
00:06:38,200 --> 00:06:46,940
Przejdźmy więc do ekranu koszyka, gdzie mam na końcu tę funkcję usuwania i tam,

80
00:06:46,940 --> 00:06:51,860
teraz chcę wysłać akcję, więc będę potrzebował

81
00:06:51,890 --> 00:07:03,040
dostępu do funkcji wysyłki za pomocą haka wysyłkowego. Możemy teraz użyć tego tutaj, uzyskać do niego dostęp, dzwoniąc, po prostu użyj polecenia dispatch w ten

82
00:07:03,550 --> 00:07:05,740
sposób, a następnie wyślij to tutaj.

83
00:07:05,740 --> 00:07:17,150
Wyślij teraz zaimportuj wszystkie potrzebne akcje, więc zaimportuj wszystko jako akcje koszyka z folderu sklepu, z koszyka akcji takiego jak ten, ponownie za pomocą tego pakietu

84
00:07:17,150 --> 00:07:24,080
importu, który jest całkowicie opcjonalny, możesz również celować w określone rzeczy, których potrzebujesz, więc celuj

85
00:07:24,080 --> 00:07:25,760
w konkretne twórcy

86
00:07:25,790 --> 00:07:31,610
akcji, w tym przypadku usunięcie z kreatora koszyka, którego potrzebowalibyśmy, a następnie tam,

87
00:07:32,480 --> 00:07:35,400
po prostu uruchom tego kreatora akcji,

88
00:07:35,420 --> 00:07:41,780
w moim przypadku za pomocą akcji koszyka. removeFromCart, przekaż ID produktu, który oczywiście tu otrzymamy,

89
00:07:41,780 --> 00:07:45,030
jest to itemData. pozycja.

90
00:07:45,110 --> 00:07:50,810
i teraz pamiętajmy, że przeglądamy przedmioty o tym kształcie, więc będziemy mieć tam pole identyfikatora produktu, a

91
00:07:50,810 --> 00:07:55,840
zatem możemy użyć tego tutaj, aby przesłać je dalej, aby usunąć z koszyka, co powinno,

92
00:07:55,850 --> 00:08:00,770
mam nadzieję, pozwolić nam na aktualizację to. I to powinno być wszystko, Redux powinien

93
00:08:00,770 --> 00:08:05,470
zrobić resztę za kulisami i powinien automatycznie ponownie wysłać ekran koszyka za każdym razem, gdy

94
00:08:05,570 --> 00:08:12,060
koszyk się zmienia, więc za każdym razem, gdy usuwamy przedmioty. Dodałem więc dwie czerwone koszule i jeden niebieski dywan, a jeśli

95
00:08:13,260 --> 00:08:13,790
zdejmę

96
00:08:13,800 --> 00:08:17,000
jedną czerwoną koszulę, rzeczywiście jeden problem, jaki mamy, to przełączniki zamówień,

97
00:08:17,010 --> 00:08:19,800
musimy to naprawić, ale widać, że ilość została poprawnie zaktualizowana.

98
00:08:19,920 --> 00:08:25,620
Jeśli teraz to usunę, całkowita kwota również zostanie poprawnie zaktualizowana, jeśli teraz to usunę, rzeczywiście zniknie całkowicie, a

99
00:08:26,360 --> 00:08:28,080
teraz to również zostanie wyłączone.

100
00:08:28,080 --> 00:08:31,970
Więc to ogólnie działa, ale oczywiście zmiana kolejności, to nie jest

101
00:08:31,980 --> 00:08:34,140
coś, co chcę się tutaj wydarzyć.

102
00:08:34,380 --> 00:08:40,620
Teraz, aby uniknąć zmiany kolejności, możemy po prostu przejść do ekranu koszyka, w którym zmieniam moje przedmioty na tablicę i

103
00:08:40,620 --> 00:08:45,960
tam musimy tylko upewnić się, że tablica jest zawsze posortowana w ten sam sposób, ponieważ ten

104
00:08:45,990 --> 00:08:51,690
selektor zawsze będzie ponownie wyzwalać i pobierać nasze dane za każdym razem, gdy zmienia się nasz stan Redux.

105
00:08:52,320 --> 00:08:57,540
Dlatego tutaj zawsze otrzymamy najnowszą migawkę danych, którą tam mamy, i stąd właśnie tutaj musimy po

106
00:08:57,540 --> 00:09:02,670
prostu sortować ją w ten sam sposób przez cały czas i dlatego zawsze będziemy renderować w

107
00:09:02,670 --> 00:09:03,790
ten sam sposób.

108
00:09:03,900 --> 00:09:11,250
Musimy tylko upewnić się, że nasza tablica transformowanych koszyków jest posortowana, wywołując sort tam.

109
00:09:11,410 --> 00:09:17,310
Jeśli nazywam to w ten sposób, zaczynam dodawać tutaj trochę danych, teraz widzisz,

110
00:09:17,410 --> 00:09:21,820
że to nie załatwiło sprawy, ponieważ nie mówimy, jak to

111
00:09:21,820 --> 00:09:28,480
sortować i nie wie, jak to zrobić dla obiektów z pole, ale możemy przekazać funkcję

112
00:09:28,480 --> 00:09:34,490
do sortowania, w której zawsze porównujemy ze sobą dwa elementy, aib, a następnie

113
00:09:34,600 --> 00:09:38,140
sortowanie musi zwrócić liczbę na końcu, która

114
00:09:38,190 --> 00:09:40,780
określa, co jest pierwsze i

115
00:09:40,800 --> 00:09:50,530
tam, oczywiście można to jednak posortować chcesz, na przykład według identyfikatora produktu, abyśmy mogli po prostu zwrócić porównanie, w którym sprawdzamy identyfikator

116
00:09:50,530 --> 00:09:58,110
produktu A, porównujemy go z identyfikatorem produktu B, a jeśli jest większy, to z wyrażeniem potrójnym tutaj

117
00:09:58,150 --> 00:10:02,210
zwróciłem jeden, w przeciwnym razie zwracam minus jeden .

118
00:10:02,370 --> 00:10:07,620
Jest to normalna funkcja sortowania, w którą Javascript jest dostarczany, a teraz zapewnia to,

119
00:10:07,620 --> 00:10:08,610
że zawsze

120
00:10:08,670 --> 00:10:17,520
sortujemy w ten sam sposób, dlatego teraz zobaczysz, czy to usunę, czerwona krótka pozostanie na swoim miejscu i dlatego nasza logika koszyka jest skończona.

121
00:10:17,520 --> 00:10:23,620
Teraz możemy upewnić się, że faktycznie możemy również kliknąć przycisk tego zamówienia teraz i dodajemy to jako zamówienie,

122
00:10:23,610 --> 00:10:29,250
które następnie możemy odwiedzić za pomocą pomocnej szuflady, która pozwala nam przejść do ekranu zamówień, które

123
00:10:29,250 --> 00:10:31,190
oczywiście jeszcze nie musieliśmy Dodaj.