1
00:00:02,630 --> 00:00:05,410
Zacznijmy od ulubionych.

2
00:00:05,420 --> 00:00:13,270
Chcę się upewnić, że kiedy jestem w przepisie, mogę kliknąć tę gwiazdkę, a to doda to jako ulubione i pokaże to tutaj na

3
00:00:13,660 --> 00:00:18,490
ulubionym ekranie, na którym obecnie nic nie widzę, ponieważ usunąłem te fikcyjne ulubione.

4
00:00:19,880 --> 00:00:20,200
W tym

5
00:00:20,210 --> 00:00:25,830
celu rozpocznę w folderze sklepu, w folderze akcji i dodam nowy folder, w którym będę również nazywać posiłki. js, możesz to nazwać inaczej, jeśli jest to dla ciebie

6
00:00:25,840 --> 00:00:30,570
mylące, ale tak, te dwa pliki posiłków. js tutaj w działaniach

7
00:00:30,560 --> 00:00:34,970
i posiłkach. js w reduktorach i posiłkach czynnościowych. Plik js,

8
00:00:34,960 --> 00:00:41,900
skonfiguruję niektóre akcje Redux, które zwykle zaczynają się od skonfigurowania unikalnych

9
00:00:41,930 --> 00:00:48,760
identyfikatorów, które przechowuję w stałych i które będą przełączać ulubione.

10
00:00:49,070 --> 00:00:50,710
Możesz użyć tutaj, co chcesz,

11
00:00:50,780 --> 00:00:53,860
przechowywana tutaj wartość zwykle jest tym samym identyfikatorem, więc

12
00:00:54,350 --> 00:00:59,570
jest to wartość identyfikatora i jest ona po prostu przechowywana w stałej, abyśmy nie musieli ręcznie

13
00:00:59,570 --> 00:01:02,870
wpisywać tego później, ale zawsze możemy importować ta stała i

14
00:01:02,870 --> 00:01:03,690
unikaj literówek.

15
00:01:03,860 --> 00:01:05,440
Ponownie, jeśli jest to

16
00:01:05,440 --> 00:01:09,730
dla Ciebie zupełnie nowe, zdecydowanie najpierw sprawdź dedykowane zasoby React Redux.

17
00:01:09,950 --> 00:01:12,680
Teraz użyję tutaj wzorca twórcy akcji, co

18
00:01:12,680 --> 00:01:19,190
oznacza, że mam tutaj ten identyfikator, ale teraz wyeksportuję również funkcję, która tworzy mi akcję, ponieważ akcja nie

19
00:01:19,280 --> 00:01:24,050
jest często tylko identyfikatorem, w tym przypadku tak jest, to również potrzebuje dodatkowego

20
00:01:24,050 --> 00:01:29,630
ładunku i dlatego faktycznie mamy akcję, która jest obiektem o identyfikatorze i ładunku, dlatego tutaj dodam

21
00:01:29,780 --> 00:01:35,930
funkcję, która tworzy taki obiekt akcji i nazwiję to przełączanie ulubionych w ten sposób, wybierz identyfikator ale

22
00:01:35,930 --> 00:01:37,430
w przypadku wielbłąda

23
00:01:37,490 --> 00:01:42,950
i jest to funkcja, która może odbierać pewne dane, ponieważ to ja będę ją wywoływać

24
00:01:42,950 --> 00:01:48,500
i która powinna zwrócić obiekt JavaScript, który opisuje tę akcję, a więc powiedzmy, że jest

25
00:01:48,500 --> 00:01:50,300
to typ, tak zazwyczaj nazywamy

26
00:01:50,330 --> 00:01:55,010
to pole identyfikatora ale generalnie możesz swobodnie korzystać z tego, co chcesz, w

27
00:01:55,010 --> 00:01:55,590
moim

28
00:01:55,670 --> 00:01:57,490
przypadku będzie to przełącznik ulubiony,

29
00:01:57,500 --> 00:02:03,700
więc wskazuję ten identyfikator, używam tego ciągu jako identyfikatora, a następnie dowolnych dodatkowych danych, na przykład tutaj

30
00:02:03,740 --> 00:02:09,500
' Będę musiał zareklamować d identyfikator posiłku, który powinien zostać przełączony, a to oznacza, że ta

31
00:02:09,500 --> 00:02:14,540
funkcja musi również uzyskać ten identyfikator wejściowy, ponieważ w przeciwnym razie nie mogę zapisać

32
00:02:14,540 --> 00:02:16,700
go w utworzonej przeze mnie akcji.

33
00:02:16,710 --> 00:02:21,120
To jest mój twórca akcji do przełączania ulubionej akcji, teraz

34
00:02:21,120 --> 00:02:27,810
w reduktorze, chcę działać, gdy dostanę taką przełączoną ulubioną akcję i do tego użyję wzoru, który

35
00:02:27,810 --> 00:02:28,370
prawdopodobnie

36
00:02:28,380 --> 00:02:34,020
widziałeś, jeśli wcześniej pracowałeś z Redux , Użyję tutaj instrukcji switch i włączę mój

37
00:02:34,020 --> 00:02:40,890
typ akcji, ponieważ pamiętaj, że akcja będzie obiektem z właściwością type, która identyfikuje akcję, która miała miejsce.

38
00:02:40,890 --> 00:02:45,330
Więc włączam ten typ akcji, a następnie obsługuję różne przypadki dla różnych akcji,

39
00:02:45,330 --> 00:02:46,650
które mogę mieć.

40
00:02:46,650 --> 00:02:53,040
Więc tutaj mam opcję przełączania ulubionych akcji. W tym celu musisz zaimportować opcję przełączania ulubionych z akcji posiłków i dlatego

41
00:02:53,390 --> 00:02:58,590
przechowuję to w osobnej stałej, ponieważ teraz nie muszę ręcznie wpisywać przełączania ulubionych, w której mogę

42
00:02:58,590 --> 00:03:00,820
mieć literówka tam, zamiast tego po

43
00:03:00,840 --> 00:03:07,410
prostu używam tej stałej, w której zapisany jest ciąg. A teraz tutaj uruchamiam dowolną logikę, aby uruchomić

44
00:03:07,410 --> 00:03:13,310
tę akcję i zmieniam swój stan, tak aby posiłek z identyfikatorem posiłku będący częścią mojej akcji

45
00:03:13,350 --> 00:03:19,470
został dodany do ulubionych posiłków lub usunięty, jeśli już był częścią, ponieważ tutaj jest akcja przełączania,

46
00:03:19,470 --> 00:03:20,790
chcę dodać elementy,

47
00:03:20,820 --> 00:03:28,770
które nie są jeszcze ulubionymi, chcę usunąć elementy, które są. Na marginesie, w instrukcji switch dodam również

48
00:03:28,770 --> 00:03:33,150
domyślny przypadek, w którym po prostu zwracam niezmieniony stan.

49
00:03:33,150 --> 00:03:36,900
Naprawdę nie powinniśmy tego osiągnąć, ale na wypadek, gdybyśmy to zrobili, to właśnie to robimy,

50
00:03:37,380 --> 00:03:40,800
ale wracając do przełączania ulubionej skrzynki. Tam chcę teraz na

51
00:03:42,770 --> 00:03:48,740
końcu dowiedzieć się, czy mój posiłek z identyfikatorem jest częścią akcji, ponieważ dodam identyfikator akcji

52
00:03:48,740 --> 00:03:50,450
do akcji, jeśli ten

53
00:03:50,450 --> 00:03:52,550
posiłek jest już częścią ulubionych

54
00:03:52,550 --> 00:03:53,660
posiłków, jeśli

55
00:03:53,690 --> 00:04:00,960
tak, chcę usuń go, jeśli nie, chcę go dodać. W tym celu zacznę od znalezienia indeksu posiłku w tablicy ulubionych posiłków,

56
00:04:00,960 --> 00:04:07,380
ponieważ jeśli to jest -1, wiem, że nie znalazłem indeksu, więc nie był on częścią, jeśli jest on większy lub

57
00:04:07,390 --> 00:04:07,820
równy

58
00:04:07,840 --> 00:04:13,540
niż zero, wiem, że przedmiot był tego częścią. Więc mam tutaj swój istniejący indeks i

59
00:04:13,540 --> 00:04:21,960
otrzymuję go, używając stanowych ulubionych posiłków, i tam wprowadziłem znak równości, a stan to po prostu moja bieżąca migawka stanu,

60
00:04:22,010 --> 00:04:27,510
którą otrzymuję i tam, będziemy mieli ulubioną właściwość posiłków i mogę użyj metody

61
00:04:27,510 --> 00:04:33,780
find index, normalnej metody Javascript, której można użyć w tablicach, aby uzyskać indeks elementu, który

62
00:04:33,840 --> 00:04:39,810
spełnia określone kryteria, które ustawiłem tutaj w funkcji, którą przekazuję, aby znaleźć indeks, funkcja

63
00:04:40,230 --> 00:04:47,040
ta działa przy każdym posiłku w tablica i jeśli zwróci true, to daje mi indeks elementu,

64
00:04:47,040 --> 00:04:48,610
przez który przebiegał.

65
00:04:48,660 --> 00:04:56,900
Więc tutaj chcę zwrócić prawdę, jeśli posiłek. id jest równy akcji. posiłek Oznacza to po prostu, że posiłek,

66
00:04:56,930 --> 00:05:02,090
na który patrzę w moich ulubionych posiłkach, ma ten sam pomysł, co posiłek, dla którego

67
00:05:02,090 --> 00:05:08,450
ma miejsce ta akcja, i oznacza to, że jeśli jest to prawdą w przypadku dowolnego elementu w ulubionych posiłkach,

68
00:05:08,540 --> 00:05:13,490
to posiłek, który próbujemy przełączyć jest już częścią ulubionych, więc będziemy musieli go usunąć,

69
00:05:13,490 --> 00:05:13,990
ponieważ

70
00:05:13,990 --> 00:05:20,090
spowoduje to zwrócenie nam indeksu elementu, dlatego istniejący indeks będzie większy niż -1, a zatem możemy go użyć,

71
00:05:20,090 --> 00:05:21,120
aby go usunąć.

72
00:05:21,170 --> 00:05:23,660
Jeśli to zwraca prawdę dla żadnego przedmiotu, więc jeśli to

73
00:05:23,720 --> 00:05:29,870
w końcu zwraca -1, wiem, że przedmiot nie jest jeszcze częścią ulubionych posiłków. Tak więc istniejący indeks zawiera bardzo ważne informacje,

74
00:05:29,870 --> 00:05:34,520
dlatego użyję go tutaj w instrukcji if i sprawdzę, czy istniejący

75
00:05:34,520 --> 00:05:40,760
indeks jest większy czy równy 0, co oznacza, że mamy już ten posiłek jako część ulubionych

76
00:05:41,390 --> 00:05:43,040
posiłków, czy nie.

77
00:05:43,040 --> 00:05:48,290
Teraz w przypadku, jeśli element jest już częścią ulubionych posiłków, chcę go usunąć.

78
00:05:48,290 --> 00:05:53,210
Tak więc tutaj w końcu zwrócę nowy stan, ponieważ w reduktorze ostatecznie

79
00:05:53,210 --> 00:06:00,740
trzeba zwrócić nowy stan, który jest nowym obiektem, w którym najpierw kopiuję istniejący stan za pomocą operatora rozkładania, aby

80
00:06:00,740 --> 00:06:05,810
go wyciągnąć wszystkie pary klucz-wartość istniejącego stanu, aby nie stracić żadnego stanu i

81
00:06:05,870 --> 00:06:06,980
nie zastąpić

82
00:06:06,980 --> 00:06:12,200
żadnego stanu, którego nie chcę zastąpić, a następnie zastąpię tylko ulubione posiłki, więc

83
00:06:12,200 --> 00:06:17,870
dodam to ponownie, aby zastąpić istniejące ulubione posiłki moimi nowymi ulubionymi posiłkami, które ostatecznie powinny

84
00:06:17,930 --> 00:06:21,520
być starymi ulubionymi posiłkami bez pozycji w tym indeksie.

85
00:06:24,250 --> 00:06:30,360
A teraz tutaj, aby uzyskać moje zaktualizowane ulubione posiłki, utworzę nową stałą, zaktualizowaną Ulubioną

86
00:06:30,360 --> 00:06:39,470
potrawę, tam przede wszystkim utworzę nową tablicę i zapełnię ją istniejącymi posiłkami, więc przenieś moje istniejące ulubione posiłki w ten sposób

87
00:06:39,470 --> 00:06:46,240
i zrobię to aby utworzyć kopię tej tablicy, aby nie manipulować oryginalną tablicą, jeśli teraz zacznę

88
00:06:46,250 --> 00:06:53,000
nad tym pracować, ponieważ teraz chcę pobrać zaktualizowane ulubioneFavMeals, wywołać połączenie tutaj, a następnie usunąć

89
00:06:53,660 --> 00:06:57,470
element z istniejącego indeksu i tylko ten element.

90
00:06:57,470 --> 00:07:03,950
To w końcu weźmie zaktualizowany indeks FavMeals, edytuję go i usuniesz element pod tym indeksem i edytuję tę

91
00:07:04,250 --> 00:07:06,200
tablicę, dlatego skopiowałem ją,

92
00:07:06,200 --> 00:07:12,110
aby nie edytować oryginalnej tablicy, a teraz możemy użyć tej zaktualizowanej tablicy FavMeals tutaj i przechowuj

93
00:07:12,110 --> 00:07:17,330
to z powrotem jako ulubione posiłki w naszym sklepie, ponieważ będzie to ulubiony

94
00:07:17,390 --> 00:07:19,880
zestaw posiłków bez posiłku, który właśnie usunęliśmy.

95
00:07:23,360 --> 00:07:29,680
W innym przypadku, który jest oczywiście istotny, jeśli nie znajdziemy produktu, więc chcemy go

96
00:07:29,690 --> 00:07:36,380
dodać, tutaj również chcę przywrócić nowy stan, w którym najpierw skopiuję stary stan, a następnie

97
00:07:36,380 --> 00:07:42,230
zastąpię ulubione posiłki do zasadniczo są moimi starymi ulubionymi posiłkami, a teraz

98
00:07:42,230 --> 00:07:48,380
mogę wywołać concat, metodę JavaScript wbudowaną w Javascript, która zwraca nową tablicę, która

99
00:07:48,410 --> 00:07:55,520
bierze starą tablicę i dodaje nowy element, i tam, tutaj chcę oczywiście dodać posiłek dla

100
00:07:55,700 --> 00:08:05,130
tego ID Mogę znaleźć ten posiłek na moim stanie, tam na posiłkach, to jest ta właściwość, stan tutaj zawsze odnosi się

101
00:08:05,130 --> 00:08:08,940
tutaj tylko do tej struktury stanu tutaj, a

102
00:08:08,940 --> 00:08:14,240
teraz tutaj, mogę znaleźć posiłek, który chcę dodać, a ponieważ staje

103
00:08:14,380 --> 00:08:18,210
się bardzo długo, faktycznie przeniosę to na nową

104
00:08:18,490 --> 00:08:27,770
linię, więc mój posiłek, który chcę dodać, można znaleźć za pomocą metody find, która działa na wszystkich posiłkach i tam,

105
00:08:27,800 --> 00:08:33,560
jeśli mealId jest równy akcji. mealId, a następnie mam posiłek, który chcę dodać, i jest to

106
00:08:33,560 --> 00:08:40,180
posiłek, który łączę z moimi ulubionymi posiłkami, aby dodać go do tej tablicy. To powinna być logika,

107
00:08:40,180 --> 00:08:45,690
która działa i która zarządza naszymi ulubionymi.

108
00:08:45,700 --> 00:08:52,120
Teraz musimy upewnić się, że faktycznie wysyłamy tę akcję za każdym razem, gdy klikniemy ikonę gwiazdki w naszym

109
00:08:52,120 --> 00:08:52,540
nagłówku.

110
00:08:55,360 --> 00:08:56,570
Aby wysłać

111
00:08:56,570 --> 00:09:00,550
akcję, przejdźmy do ekranu szczegółów posiłku, ponieważ tutaj znajduje się

112
00:09:00,550 --> 00:09:05,590
ikona naszej gwiazdy, a kiedy kliknę ten przycisk, w końcu chcę wysłać akcję.

113
00:09:05,710 --> 00:09:08,520
Dobra wiadomość jest taka, że wysyłanie akcji

114
00:09:08,530 --> 00:09:09,800
jest bardzo łatwe,

115
00:09:09,850 --> 00:09:16,190
mamy selektor użycia, mamy także wysyłkę użycia, która w końcu daje nam łatwy sposób uruchomienia funkcji.

116
00:09:16,200 --> 00:09:24,110
Zła wiadomość jest taka, że można tego oczywiście użyć tylko w treści komponentu tutaj, w naszym komponencie funkcjonalnym, a

117
00:09:24,260 --> 00:09:26,150
nie w opcjach nawigacji.

118
00:09:26,210 --> 00:09:32,690
Ponownie będziemy musieli pracować z ustawionymi parametrami, aby komunikować się między opcjami nawigacji a komponentem,

119
00:09:32,720 --> 00:09:37,970
ale to oczywiście możemy zrobić. Więc tutaj, na ekranie szczegółów posiłku,

120
00:09:38,040 --> 00:09:45,470
po prostu zacznę od wywołania use dispatch, a to oznacza, że daje nam funkcję wysyłania, funkcję, którą możemy wywołać, aby

121
00:09:45,470 --> 00:09:53,650
wywołać nowe akcje, i zapiszę w stałej nazwie o nazwie dispatch. Następnie chcę utworzyć ulubiony moduł

122
00:09:53,650 --> 00:10:01,210
obsługi, który jest funkcją, która ostatecznie powinna wywołać tę akcję.

123
00:10:01,210 --> 00:10:06,390
Więc tutaj chcę zadzwonić do wysyłki, która jest dostępna dzięki temu hakowi, a teraz

124
00:10:06,610 --> 00:10:10,600
do wysłania, muszę przekazać akcję, którą chcę wysłać, i w tym

125
00:10:10,600 --> 00:10:14,410
celu użyję tego twórcy akcji do przełączenia tutaj ulubionych.

126
00:10:14,620 --> 00:10:18,340
Musimy tylko zaimportować to, zaimportować z folderu sklepu,

127
00:10:20,780 --> 00:10:27,410
tam z działań, a tam z posiłków. plik js, stamtąd chcę zaimportować przełączanie ulubionych,

128
00:10:27,410 --> 00:10:35,740
nie identyfikator we wszystkich wielkich literach, ale funkcja kreatora akcji. Po zaimportowaniu tego tutaj, w wysyłce możemy

129
00:10:35,740 --> 00:10:40,940
wywołać przełącznik ulubiony w ten sposób, a teraz tutaj musimy

130
00:10:40,940 --> 00:10:45,440
przesłać identyfikator, a to oczywiście jest posiłek, który już

131
00:10:48,480 --> 00:10:53,310
tam wydobywamy lub wybieramy. Id też bym działał,

132
00:10:55,350 --> 00:10:58,910
cokolwiek chcesz, po prostu pójdę na posiłek.

133
00:10:59,010 --> 00:11:07,110
Teraz możemy ponownie aktywować efekt użycia, aby komunikować się z naszym nagłówkiem, ale nie za pomocą tej linii, ale zamiast

134
00:11:07,110 --> 00:11:14,130
tego z ustawionymi parametrami nawigacji rekwizytów, a teraz tutaj, nazwiemy to przełączanie ulubionych, nazwa zależy od ciebie i

135
00:11:14,130 --> 00:11:16,890
wskazuję na mój ulubiony moduł obsługi.

136
00:11:16,890 --> 00:11:22,980
Teraz przełączanie ulubionego modułu obsługi powinno być dodane jako zależność tutaj i aby

137
00:11:23,580 --> 00:11:30,180
uniknąć nieskończonych pętli, ponownie użyję wywołania zwrotnego, które importuję z React, aby zawinąć tę funkcję tutaj.

138
00:11:30,180 --> 00:11:37,060
Więc tutaj funkcja callback jest zawinięta wokół tej funkcji i musimy tutaj określić zależności, a zależność numer jeden to dispatch,

139
00:11:37,200 --> 00:11:40,020
React Redux upewni się, że to się nigdy

140
00:11:40,020 --> 00:11:44,640
nie zmieni, więc jest to zależność, która nigdy się nie zmieni, zależność druga

141
00:11:45,210 --> 00:11:46,730
jest mealId, to także

142
00:11:46,740 --> 00:11:49,270
nie powinno się zmieniać, gdy jesteśmy na

143
00:11:49,340 --> 00:11:54,900
tej stronie, zawsze będzie miała tę samą wartość. Tak więc przy tej funkcji nie należy tak naprawdę

144
00:11:54,900 --> 00:12:00,360
odtwarzać, co oznacza, że ten efekt nigdy się nie uruchomi, chyba że zostanie odtworzony, co ma miejsce tylko

145
00:12:00,360 --> 00:12:07,820
w przypadku, gdy mamy nowy identyfikator, w którym to przypadku byłoby dobrze, gdyby zostało odtworzone, ale w przeciwnym razie wygrałoby nie zmieniają się i

146
00:12:07,820 --> 00:12:10,340
dlatego powinniśmy mieć tutaj bezpieczny kanał komunikacji.

147
00:12:10,550 --> 00:12:16,490
Teraz w nagłówku możemy teraz wyodrębnić ten moduł obsługi, tak przy okazji,

148
00:12:16,510 --> 00:12:19,040
że nie potrzebujemy już posiłku.

149
00:12:19,150 --> 00:12:28,420
Teraz możemy po prostu pobrać funkcję przełączania ulubionej funkcji z naszej nawigacji danych nawigacyjnych, uzyskać parametr, a następnie nazwać to

150
00:12:28,420 --> 00:12:35,080
przełącznik fav , więc jest to nazwa parametru, którą możemy wyodrębnić, co powinno dać

151
00:12:35,080 --> 00:12:41,050
nam dostęp do funkcji, którą przekazujemy. Teraz przełącz faworytem jest to, co powinno zostać wykonane po

152
00:12:41,050 --> 00:12:42,130
naciśnięciu tego przycisku.

153
00:12:42,550 --> 00:12:49,570
Więc tutaj wskażę opcję przełączania ulubionych, ponieważ utrzymuje ona wskaźnik na tej funkcji, a zatem funkcja

154
00:12:49,600 --> 00:12:56,740
ta zostanie wykonana, gdy teraz naciśniemy tę gwiazdkę. Zobaczymy, czy to zadziała.

155
00:12:56,750 --> 00:13:04,760
Zapiszmy to i wróćmy do spaghetti tutaj, kliknij tę gwiazdkę i kliknij ulubione, a to wygląda

156
00:13:04,760 --> 00:13:05,450
dobrze,

157
00:13:05,450 --> 00:13:07,600
spaghetti jest częścią ulubionych.

158
00:13:07,670 --> 00:13:11,440
Kliknijmy ponownie gwiazdkę tutaj i przejdźmy do ulubionych i już jej nie ma,

159
00:13:11,480 --> 00:13:12,730
to ma sens.

160
00:13:12,740 --> 00:13:18,290
Kliknij ponownie, wrócił, przejdź do strony szczegółów tutaj w zakładce ulubionych i kliknij gwiazdkę i

161
00:13:18,290 --> 00:13:20,550
wróć, cóż, już go nie ma.

162
00:13:20,750 --> 00:13:27,410
Sprawdźmy to również na Androidzie. Być może sznycel jest teraz pusty. Wróćmy i kliknij gwiazdkę, przejdź

163
00:13:27,410 --> 00:13:30,560
do ulubionych, oto

164
00:13:30,560 --> 00:13:39,250
jest, wróć, kliknij gwiazdę i zniknęła. Ta logika na ogół działa.

165
00:13:39,250 --> 00:13:43,150
Jest kilka rzeczy, nad którymi nadal chcę pracować, na przykład chcę zmienić

166
00:13:43,150 --> 00:13:44,250
ikonę w oparciu

167
00:13:44,260 --> 00:13:49,600
o ulubiony status, chcę też pokazać tekst na ulubionym ekranie, gdy jest pusty, ale ogólnie, wysyłanie i

168
00:13:49,600 --> 00:13:52,840
używanie danych działa nawet jeśli potrzebujemy tego w nagłówku.