1
00:00:02,320 --> 00:00:09,040
Teraz, gdy element produktu został zreorganizowany, nadszedł czas, aby powiedzieć, że możemy usunąć elementy,

2
00:00:09,040 --> 00:00:14,120
ponieważ jest to jedna z najprostszych rzeczy, jakie możemy zrobić.

3
00:00:14,170 --> 00:00:19,600
To zabiera nas z powrotem do Redux i tam nadszedł czas, aby pracować nad produktami,

4
00:00:19,600 --> 00:00:21,120
a zacznę od

5
00:00:21,160 --> 00:00:26,450
działań, które obecnie są pustym plikiem, produktami. plik js w folderze akcji, w

6
00:00:26,560 --> 00:00:35,350
którym chcę wyeksportować akcję, która pomaga nam w usuwaniu produktów. W związku z tym identyfikator nosi po prostu nazwę usuń

7
00:00:35,350 --> 00:00:46,900
produkt i zawiera tutaj tekst usuwania produktu, a także wyeksportuję kreator akcji usuń produkt, który pobiera identyfikator produktu, taki jak ten, i który następnie zwraca obiekt

8
00:00:46,900 --> 00:00:53,430
akcji, w którym typem jest usuń produkt i pid, identyfikator produktu to po prostu przekazany

9
00:00:53,440 --> 00:00:55,990
identyfikator produktu, taki jak ten.

10
00:00:59,620 --> 00:01:07,990
Teraz w reduktorze, w pliku reduktora produktów, możemy tego słuchać, ponieważ obecnie

11
00:01:08,560 --> 00:01:17,110
nigdy nie dbamy o żadne działanie. Teraz możemy włączyć tutaj typ akcji i obsłużyć przypadek usunięcia produktu, który otrzymujemy z

12
00:01:17,230 --> 00:01:23,900
pliku akcji naszych produktów, a zatem musisz dodać ten import. Jeśli tak jest w przypadku usunięcia produktu, musimy usunąć

13
00:01:23,900 --> 00:01:29,840
produkt z naszej tablicy produktów użytkownika i oczywiście również z tablicy dostępnych produktów, ponieważ jest

14
00:01:29,840 --> 00:01:34,490
on ogólnie usuwany, nie tylko w naszych produktach użytkownika, ale z całej

15
00:01:34,490 --> 00:01:35,290
aplikacji.

16
00:01:37,990 --> 00:01:39,190
Dlatego zwrócę

17
00:01:39,190 --> 00:01:48,100
nowy obiekt, w którym skopiujemy istniejący stan, aby upewnić się, że nie stracimy żadnego stanu, a teraz produkty użytkownika

18
00:01:48,100 --> 00:01:51,630
są po prostu stanem. userProducts, czyli stare produkty

19
00:01:51,640 --> 00:01:57,070
użytkownika, na których możemy filtrować, to wbudowana metoda Javascript, która zwraca nową tablicę,

20
00:01:57,070 --> 00:02:04,640
nową tablicę, która jest zasadniczo tworzona przez uruchomienie funkcji na każdym elemencie w starej tablicy i jeśli ta funkcja

21
00:02:04,660 --> 00:02:09,930
zwraca true , zachowujemy ten element, jeśli zwróci wartość false, upuszczamy element.

22
00:02:10,000 --> 00:02:15,490
Wykonuje więc funkcję, w której otrzymujemy produkt, ta funkcja jest dla nas wykonywana przez

23
00:02:15,490 --> 00:02:20,720
Javascript, że tak powiem, i przekazuje element, który aktualnie ogląda tę funkcję.

24
00:02:20,800 --> 00:02:29,110
Otrzymujemy więc produkt dla każdego produktu z naszej tablicy produktów użytkownika i chcemy zwrócić identyfikator produktu, w przeciwieństwie do pid

25
00:02:29,650 --> 00:02:33,390
akcji, który jest identyfikatorem produktu, który chcemy usunąć.

26
00:02:33,400 --> 00:02:39,530
Oznacza to, że zasadniczo zachowa wszystkie produkty, których identyfikatory się nie zgadzają, jeśli się zgadzają, wiemy, że jest to

27
00:02:39,550 --> 00:02:41,890
produkt, którego chcemy się pozbyć, dlatego zwracamy

28
00:02:41,890 --> 00:02:43,240
wartość false, co

29
00:02:43,240 --> 00:02:46,340
oznacza w nowej tablicy, że nie będzie w zestawie.

30
00:02:46,370 --> 00:02:50,890
Teraz jest zasadniczo taka sama logika dla dostępnych produktów,

31
00:02:50,900 --> 00:02:55,530
musimy tylko przejrzeć wszystkie dostępne produkty i odfiltrować tam produkt.

32
00:02:55,550 --> 00:03:01,090
Jest to jedna zmiana, którą musimy wprowadzić, należy wprowadzić kolejną zmianę w koszyku, ponieważ po

33
00:03:01,090 --> 00:03:06,400
usunięciu produktu należy go również usunąć z koszyka, ponieważ w przeciwnym razie mamy

34
00:03:06,400 --> 00:03:09,690
produkt w koszyku, który już nie istnieje .

35
00:03:09,820 --> 00:03:17,410
Więc tutaj dodam także skrzynkę do usunięcia produktu, a zatem musisz zaimportować produkt usuwania z działań produktów w

36
00:03:17,410 --> 00:03:18,810
koszyku. reduktor

37
00:03:18,820 --> 00:03:20,290
js i tutaj,

38
00:03:23,060 --> 00:03:27,830
musimy upewnić się, że usuwamy produkt z koszyka, jeśli został usunięty.

39
00:03:29,670 --> 00:03:36,150
Tak więc tutaj, w koszyku, oczywiście otrzymujemy nasz identyfikator produktu, który chcemy usunąć,

40
00:03:36,300 --> 00:03:47,940
to ten pid w tej akcji jest wysyłany, dlatego tutaj zwracamy nowy stan, w którym chcemy zaktualizować nasz koszyk i całkowitą kwotę tak że

41
00:03:47,950 --> 00:03:53,680
produkt zniknął i zniknął, mam na myśli całkowite usunięcie z koszyka, nie

42
00:03:53,680 --> 00:04:01,920
tylko zmniejszenie o jeden, ale całkowite usunięcie. Więc przedmioty są tutaj w końcu kopią istniejących

43
00:04:01,920 --> 00:04:02,760
elementów

44
00:04:02,760 --> 00:04:12,610
bez tego produktu, więc utworzę nowe stałe, zaktualizowane elementy, w których skopiuję tutaj moje istniejące elementy stanu, w

45
00:04:12,610 --> 00:04:13,910
ten sposób,

46
00:04:15,010 --> 00:04:22,820
a następnie usunę zaktualizowane elementy dla pid akcji, więc usuwam ten przedmiot z koszyka.

47
00:04:22,820 --> 00:04:29,600
Oczywiście ma to sens tylko wtedy, gdy ten przedmiot istnieje w koszyku, więc najpierw sprawdzę, czy elementy stanu

48
00:04:29,750 --> 00:04:33,940
dla akcji pid, jeśli to zwróci coś znaczącego, a jeśli

49
00:04:34,220 --> 00:04:40,310
tak nie jest, to po prostu zwrócę istniejący stan, ponieważ skończę z tą sprawą, nie muszę

50
00:04:40,310 --> 00:04:44,750
nic zmieniać w stanie, więc po prostu przywrócę istniejący stan bez zmian.

51
00:04:45,230 --> 00:04:46,840
Jeśli przejdę przez to,

52
00:04:46,850 --> 00:04:52,330
jeśli to sprawdzę, to wiem, że produkt z identyfikatorem, który mamy usunąć, jest częścią produktu.

53
00:04:52,340 --> 00:05:00,790
Następnie kontynuuję kopiowanie moich produktów, a następnie usuwam stamtąd produkt, ale zanim to

54
00:05:00,790 --> 00:05:11,970
zrobię, uzyskaj sumę produktu, uzyskując dostęp do pozycji stanu dla pid akcji i tam oczywiście mamy to, jeśli

55
00:05:11,970 --> 00:05:20,150
spojrzymy na koszyk model przedmiotu Mam na myśli to pole sumy tutaj, więc

56
00:05:20,150 --> 00:05:27,300
w końcu muszę usunąć sumę. Interesuje mnie ta suma, ponieważ teraz mogę zaktualizować

57
00:05:27,300 --> 00:05:34,440
swoje produkty tam, gdzie zostały usunięte, za pomocą słowa kluczowego delete, a całkowita kwota koszyka to całkowita

58
00:05:34,620 --> 00:05:44,540
kwota minus całkowita pozycja, więc suma tego koszyka element, który dodaliśmy wcześniej. Więc teraz odpowiednio aktualizujemy koszyk,

59
00:05:44,540 --> 00:05:45,760
gdy

60
00:05:45,860 --> 00:05:50,600
go usuwamy. Teraz musimy tylko wysłać to

61
00:05:50,660 --> 00:05:52,960
usunięcie, więc z powrotem

62
00:05:52,990 --> 00:06:00,170
w produktach użytkowników, tutaj w usunięciu, chcemy wysłać. Tak więc z React Redux możemy zaimportować use

63
00:06:00,170 --> 00:06:04,140
dispatch, aby uzyskać dostęp do funkcji dispatch tutaj,

64
00:06:04,490 --> 00:06:12,290
wywołując use dispatch, tak jak to robiliśmy wiele razy wcześniej, a następnie tutaj, po naciśnięciu Delete, możemy

65
00:06:12,290 --> 00:06:13,870
wysłać nasze działanie

66
00:06:13,880 --> 00:06:24,130
i oczywiście potrzebujemy aby zaimportować tę akcję, więc zróbmy to, zaimportujmy może wszystko jako akcje produktów z folderu sklepu, tam z folderu

67
00:06:24,160 --> 00:06:29,650
akcji i tam z pliku produktów, a teraz używamy akcji produktów

68
00:06:29,650 --> 00:06:36,100
tam, gdy wysyłamy to, aby wywołać usunięcie produktu i przekaż identyfikator produktu, który oczywiście

69
00:06:36,100 --> 00:06:40,340
jest itemData. pozycja. id tutaj, ponieważ przeglądamy

70
00:06:40,480 --> 00:06:46,830
wszystkie produkty tutaj, a to w zasadzie oznacza, że itemData. pozycja odnosi się do instancji naszego modelu produktu,

71
00:06:46,840 --> 00:06:51,870
każda instancja ma właściwość ID, a my przesyłamy to w celu usunięcia produktu.

72
00:06:51,940 --> 00:06:58,900
Więc jeśli spróbujemy i przejdziemy do administratora, a ja kliknę usuń czerwoną koszulę, rzeczywiście już tu poszła,

73
00:06:58,900 --> 00:07:01,960
a jeśli wrócę do produktów, również tutaj.

74
00:07:02,200 --> 00:07:08,680
Teraz, jeśli przeładujemy to i dodam czerwoną koszulę do koszyka, zobaczycie to tutaj, dodałem ją dwa razy.

75
00:07:08,680 --> 00:07:16,380
Teraz, jeśli przejdę do administratora i usunę go, a następnie wrócę do produktów i koszyka, koszyk jest pusty.

76
00:07:16,520 --> 00:07:23,090
Z drugiej strony, jeśli dodam, powiedzmy teraz dywan i kubek kawy, wróć do administratora,

77
00:07:23,090 --> 00:07:28,460
usuń dywan, ale nie kubek kawy, widać w produktach, kubek kawy

78
00:07:28,520 --> 00:07:35,850
jest nadal w koszyku, więc praca. Nawiasem mówiąc, możesz zauważyć, że kubek do kawy jest tutaj trochę

79
00:07:35,880 --> 00:07:41,240
odcięty, to coś naprawię później wraz z faktem, że tutaj widzimy teraz minus dla całości,

80
00:07:41,250 --> 00:07:43,680
to również coś naprawię w druga.

81
00:07:43,680 --> 00:07:45,810
Przede wszystkim upewnijmy się, że

82
00:07:45,840 --> 00:07:52,830
możemy jednak w sekcji administratora przejść do ekranu edycji lub że mamy tam również element, który pozwala

83
00:07:52,830 --> 00:07:54,720
nam dodać nowy produkt.