1 00:00:02,510 --> 00:00:05,000 Zacznijmy od zmiany tej ikony gwiazdy 2 00:00:05,020 --> 00:00:08,580 w zależności od tego, czy jest ona obecnie ulubioną, czy nie. 3 00:00:08,600 --> 00:00:14,390 Chcę mieć tę wypełnioną gwiazdę tylko wtedy, gdy jest ona ulubioną i pustą gwiazdą, jeśli nie jest. 4 00:00:14,390 --> 00:00:19,040 Na koniec na ekranie szczegółów posiłku musimy zamienić tę ikonę, którą tutaj renderujemy, w 5 00:00:19,040 --> 00:00:25,270 oparciu o ulubiony status tego posiłku, który tutaj załadowaliśmy. Teraz znowu problem polega na tym, że 6 00:00:25,350 --> 00:00:32,040 możemy dowiedzieć się, czy ten posiłek jest ulubiony, czy nie w bardzo łatwy sposób w funkcji 7 00:00:32,040 --> 00:00:34,910 komponentu, ale nie w opcjach nawigacji. 8 00:00:34,920 --> 00:00:42,010 Więc znowu będziemy potrzebować parametrów do komunikacji między tymi dwoma, ale ogólnie rzecz biorąc, nie jest to zbyt trudne. 9 00:00:43,620 --> 00:00:49,830 Chcę tutaj zrobić moje ulubione posiłki za pomocą selektora użycia w funkcji komponentu ekranu szczegółów posiłku za 10 00:00:49,830 --> 00:00:56,260 pomocą stanu, a następnie stanu. posiłki. ulubione posiłki, więc chcę 11 00:00:56,270 --> 00:01:01,380 dostać wszystkie moje ulubione posiłki, a teraz po prostu chcę sprawdzić, czy 12 00:01:04,190 --> 00:01:12,410 ten posiłek jest częścią ulubionych posiłków, a tak naprawdę możemy to udoskonalić, a nawet nazwać ten obecny posiłek jest 13 00:01:12,410 --> 00:01:18,830 ulubiony, a selektor nie tylko wraca ulubione posiłki, ale dodaj trochę więcej logiki i po 14 00:01:18,950 --> 00:01:23,300 prostu dodaj zaznaczenie, w którym nazywamy niektóre, co jest również 15 00:01:23,300 --> 00:01:30,170 wbudowaną metodą, która zwraca true, jeśli warunek, który zamierzamy określić, jest prawdziwy dla co najmniej jednego 16 00:01:30,320 --> 00:01:41,090 elementu w tym i tam sprawdzam każdy posiłek, który tam jest, czy identyfikator posiłku jest równy identyfikatorowi posiłku, który tu pobieram i dlatego muszę zamieniać wiersze. 17 00:01:41,260 --> 00:01:46,570 Więc tutaj dostaję posiłek z posiłku, który ładujemy na ekranie szczegółów, a następnie 18 00:01:46,570 --> 00:01:54,290 sprawdzam moje ulubione posiłki, jeśli ten identyfikator posiłku jest ich częścią, co oznaczałoby, że ten posiłek należy do naszych ulubionych. 19 00:01:54,320 --> 00:01:59,600 Dzięki temu mamy ten aktualny ulubiony posiłek, teraz musimy przekazać go do opcji nawigacji i 20 00:01:59,630 --> 00:02:07,010 znowu możemy to zrobić z efektem użycia, może tam. Tak jak poprzednio, podaj tutaj funkcję w tablicy 21 00:02:07,010 --> 00:02:15,020 zależności, w funkcji tutaj ustawię rekwizyty zestaw parametrów nawigacyjnych, aby scalić więcej danych z moimi parametrami i może to 22 00:02:15,050 --> 00:02:21,620 jest fav param, nazwa zależy od ciebie, która trzyma bieżący posiłek jest ulubioną wartością, więc 23 00:02:21,620 --> 00:02:27,740 ta wartość, którą właśnie wyprowadziliśmy, a teraz zależność tej funkcji, tego wywołania efektu użycia, 24 00:02:27,740 --> 00:02:33,710 to znaczy, oczywiście, że obecny posiłek jest ulubiony, kiedy to się zmieni, chcę przekazać 25 00:02:33,710 --> 00:02:41,170 nowe informacje do parametrów i dlatego do nagłówka, w przeciwnym razie ten efekt nie powinien zostać ponownie uruchomiony. 26 00:02:41,240 --> 00:02:48,740 Więc teraz z powrotem w opcjach nawigacji, możemy pobrać tę informację tutaj, ulubioną 27 00:02:48,740 --> 00:02:54,960 można pobrać z navigationData. nawigacja za pomocą get param i tam nazywam 28 00:02:54,980 --> 00:02:58,640 to fav, oto jest, więc to jest nazwa, dzięki 29 00:02:59,460 --> 00:03:01,360 której możemy go odzyskać. 30 00:03:01,370 --> 00:03:06,080 Teraz mamy ulubioną informację w nagłówku i możemy jej teraz użyć do renderowania innej ikony 31 00:03:06,080 --> 00:03:06,610 tutaj. 32 00:03:06,620 --> 00:03:12,260 Więc zamiast zawsze renderować gwiazdę iOS, mam tutaj dynamiczne wyrażenie i sprawdzę, czy ulubiona 33 00:03:12,260 --> 00:03:13,610 jest prawda, jeśli 34 00:03:13,610 --> 00:03:17,440 tak, to chcę użyć gwiazdy iOS, która jest tą 35 00:03:17,810 --> 00:03:18,500 gwiazdą 36 00:03:18,620 --> 00:03:22,220 polową, jeśli nie, Wyrenderuję kontur gwiazdy iOS i będzie 37 00:03:22,220 --> 00:03:23,570 to pusta gwiazda. 38 00:03:24,730 --> 00:03:28,960 Dzięki temu mamy nadzieję, że konfiguracja działa zgodnie z oczekiwaniami. 39 00:03:29,020 --> 00:03:30,400 Jeśli pójdę do spaghetti, 40 00:03:30,400 --> 00:03:32,760 teraz jest to pusta gwiazda, a jeśli 41 00:03:32,770 --> 00:03:35,640 ją kliknę, jest to gwiazda wypełniona i należy do ulubionych. 42 00:03:35,650 --> 00:03:41,020 Jeśli następnie przejdę tutaj do ekranu szczegółów, zobaczysz, że zajmie to trochę czasu, zanim 43 00:03:41,020 --> 00:03:47,590 gwiazda też się wypełni, będziemy musieli to naprawić. Jeśli teraz kliknę tutaj i wrócę do posiłków, tam również 44 00:03:47,590 --> 00:03:53,660 się zaktualizowałem i to jest magia Redux, aktualizuje jedną część aplikacji, jeśli coś związanego zmienia się w innej części, 45 00:03:53,740 --> 00:03:58,570 dokładnie tak powinno się tutaj zachowywać. Więc to ogólnie działa, jedyną 46 00:03:58,570 --> 00:04:05,890 rzeczą, która nie była zbyt piękna, jest to, że ta gwiazda tutaj początkowo jest pusta i wypełnia się 47 00:04:05,890 --> 00:04:08,640 dopiero po załadowaniu, więc możemy to 48 00:04:08,650 --> 00:04:15,760 naprawić, ale poza tym działa to tak, jak powinno. Teraz, aby naprawić tę początkowo pustą gwiazdę, 49 00:04:15,880 --> 00:04:16,950 ponownie możemy 50 00:04:16,990 --> 00:04:21,400 zastosować obejście, które wyjaśniłem wcześniej dla tych początkowych danych nagłówka. 51 00:04:21,550 --> 00:04:24,040 Nie chcemy czekać na zakończenie pierwszego 52 00:04:24,040 --> 00:04:29,140 renderowania, zamiast tego powinniśmy przekazać te początkowe dane do tego komponentu podczas nawigacji do niego. 53 00:04:30,090 --> 00:04:35,910 Dlatego nadszedł czas, aby lista posiłków ponownie, w której mamy tę akcję nawigacyjną, 54 00:04:35,910 --> 00:04:43,170 aby przekazać dalej, to już jest klawisz ulubionych, więc ten klucz, który próbowałem wyodrębnić tutaj na 55 00:04:44,040 --> 00:04:50,580 ekranie szczegółów posiłku, pobierz param, jest ulubiony. Chcę przekazać bieżącą wartość, gdy ładujemy ten komponent, 56 00:04:50,790 --> 00:04:55,680 kiedy ładujemy tutaj ten ekran z listy posiłków, która jest komponentem, który 57 00:04:56,390 --> 00:04:57,540 uruchamia nawigację 58 00:04:57,690 --> 00:05:03,390 do szczegółów posiłku i oczywiście itemData. przedmiot jest pojedynczym posiłkiem, ale nie zawiera informacji o tym, czy należy on do naszych 59 00:05:03,390 --> 00:05:04,070 ulubionych, czy nie, 60 00:05:04,180 --> 00:05:08,460 ale oczywiście możemy dowiedzieć się, czy tak jest, czy nie. Na liście posiłków 61 00:05:08,460 --> 00:05:14,360 możemy również skorzystać ze sklepu Redux, nie tylko ze składników ekranu. 62 00:05:14,370 --> 00:05:22,260 Więc tutaj mogę również użyć selektora użycia z React Redux w ten sposób, a następnie w moim komponencie mogę uzyskać moje ulubione posiłki 63 00:05:22,260 --> 00:05:31,560 za pomocą selektora użycia, w którym uzyskuję mój stan, a następnie zwracam stan. posiłki kropkują ulubione posiłki, aby uzyskać wszystkie moje ulubione posiłki, a 64 00:05:31,560 --> 00:05:34,150 teraz, gdy renderujemy pojedynczy posiłek, możemy 65 00:05:34,260 --> 00:05:39,240 go użyć, aby dowiedzieć się, czy ten posiłek należy do naszych 66 00:05:39,240 --> 00:05:41,070 ulubionych. Nawiasem mówiąc, 67 00:05:41,100 --> 00:05:43,710 nie możesz użyć selektora use, który 68 00:05:43,770 --> 00:05:49,680 nie byłby prawidłowym użyciem, ponieważ musisz użyć haków React tylko na poziomie głównym funkcji 69 00:05:49,680 --> 00:05:53,950 komponentu, a nie w zagnieżdżonych funkcjach lub zagnieżdżonych, jeśli bloki 70 00:05:53,970 --> 00:05:56,370 lub coś w tym rodzaju, 71 00:05:57,430 --> 00:06:03,500 więc użycie selektora użycia tutaj jest niedozwolone, ale możemy oczywiście użyć naszych ulubionych posiłków, a 72 00:06:03,830 --> 00:06:12,890 zatem tutaj możemy dowiedzieć się, czy jest to ulubiony, po prostu sprawdzając ulubione posiłki i szukając posiłku, którego identyfikator odpowiada pozycji itemData 73 00:06:12,890 --> 00:06:14,840 . 74 00:06:14,840 --> 00:06:14,840 pozycja. 75 00:06:14,870 --> 00:06:20,990 id, więc identyfikator posiłku, który obecnie renderujemy. Dlatego ulubiony będzie przechowywać przedmiot, który tam 76 00:06:20,990 --> 00:06:27,290 znaleźliśmy, alternatywnie używamy tutaj, który jest wbudowaną metodą Javascript, która zwróci wartość true, jeśli dowolny element 77 00:06:27,290 --> 00:06:29,930 w ulubionych posiłkach spełnia ten warunek. 78 00:06:29,930 --> 00:06:35,570 Więc jeśli faworyt jest prawdą, wiemy, że ten przedmiot jest faworytem, dlatego możemy użyć faworyta 79 00:06:35,570 --> 00:06:40,300 jako wartości fav, którą przekazujemy jako początkowy parametr do ekranu szczegółów posiłku, a 80 00:06:40,460 --> 00:06:44,930 teraz ta migocząca gwiazda, która początkowo jest pusta, powinna być odszedł. 81 00:06:44,930 --> 00:06:50,630 Teraz, jeśli oznaczę to jako ulubione tutaj i zostawię to i wrócę, zostanie ono 82 00:06:50,630 --> 00:06:51,550 wypełnione od 83 00:06:51,590 --> 00:06:56,660 samego początku, również na ulubionym ekranie. Więc to jest to, w jaki sposób możemy 84 00:06:56,730 --> 00:06:58,830 pracować z ulubionymi, upewnijmy się teraz, 85 00:06:58,830 --> 00:07:03,660 że pokazujemy tutaj tekst fikcyjny na ulubionym ekranie, na wypadek, gdybyśmy nie mieli danych do 86 00:07:03,680 --> 00:07:05,400 wyświetlenia inaczej, a następnie zadbajmy 87 00:07:05,400 --> 00:07:06,960 o nasze filtry.