Zacznijmy od zmiany tej ikony gwiazdy
w zależności od tego, czy jest ona obecnie ulubioną, czy nie.
Chcę mieć tę wypełnioną gwiazdę tylko wtedy, gdy jest ona ulubioną i pustą gwiazdą, jeśli nie jest.
Na koniec na ekranie szczegółów posiłku musimy zamienić tę ikonę, którą tutaj renderujemy, w
oparciu o ulubiony status tego posiłku, który tutaj załadowaliśmy. Teraz znowu problem polega na tym, że
możemy dowiedzieć się, czy ten posiłek jest ulubiony, czy nie w bardzo łatwy sposób w funkcji
komponentu, ale nie w opcjach nawigacji.
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.
Chcę tutaj zrobić moje ulubione posiłki za pomocą selektora użycia w funkcji komponentu ekranu szczegółów posiłku za
pomocą stanu, a następnie stanu. posiłki. ulubione posiłki, więc chcę
dostać wszystkie moje ulubione posiłki, a teraz po prostu chcę sprawdzić, czy
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
ulubiony, a selektor nie tylko wraca ulubione posiłki, ale dodaj trochę więcej logiki i po
prostu dodaj zaznaczenie, w którym nazywamy niektóre, co jest również
wbudowaną metodą, która zwraca true, jeśli warunek, który zamierzamy określić, jest prawdziwy dla co najmniej jednego
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.
Więc tutaj dostaję posiłek z posiłku, który ładujemy na ekranie szczegółów, a następnie
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.
Dzięki temu mamy ten aktualny ulubiony posiłek, teraz musimy przekazać go do opcji nawigacji i
znowu możemy to zrobić z efektem użycia, może tam. Tak jak poprzednio, podaj tutaj funkcję w tablicy
zależności, w funkcji tutaj ustawię rekwizyty zestaw parametrów nawigacyjnych, aby scalić więcej danych z moimi parametrami i może to
jest fav param, nazwa zależy od ciebie, która trzyma bieżący posiłek jest ulubioną wartością, więc
ta wartość, którą właśnie wyprowadziliśmy, a teraz zależność tej funkcji, tego wywołania efektu użycia,
to znaczy, oczywiście, że obecny posiłek jest ulubiony, kiedy to się zmieni, chcę przekazać
nowe informacje do parametrów i dlatego do nagłówka, w przeciwnym razie ten efekt nie powinien zostać ponownie uruchomiony.
Więc teraz z powrotem w opcjach nawigacji, możemy pobrać tę informację tutaj, ulubioną
można pobrać z navigationData. nawigacja za pomocą get param i tam nazywam
to fav, oto jest, więc to jest nazwa, dzięki
której możemy go odzyskać.
Teraz mamy ulubioną informację w nagłówku i możemy jej teraz użyć do renderowania innej ikony
tutaj.
Więc zamiast zawsze renderować gwiazdę iOS, mam tutaj dynamiczne wyrażenie i sprawdzę, czy ulubiona
jest prawda, jeśli
tak, to chcę użyć gwiazdy iOS, która jest tą
gwiazdą
polową, jeśli nie, Wyrenderuję kontur gwiazdy iOS i będzie
to pusta gwiazda.
Dzięki temu mamy nadzieję, że konfiguracja działa zgodnie z oczekiwaniami.
Jeśli pójdę do spaghetti,
teraz jest to pusta gwiazda, a jeśli
ją kliknę, jest to gwiazda wypełniona i należy do ulubionych.
Jeśli następnie przejdę tutaj do ekranu szczegółów, zobaczysz, że zajmie to trochę czasu, zanim
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ż
się zaktualizowałem i to jest magia Redux, aktualizuje jedną część aplikacji, jeśli coś związanego zmienia się w innej części,
dokładnie tak powinno się tutaj zachowywać. Więc to ogólnie działa, jedyną
rzeczą, która nie była zbyt piękna, jest to, że ta gwiazda tutaj początkowo jest pusta i wypełnia się
dopiero po załadowaniu, więc możemy to
naprawić, ale poza tym działa to tak, jak powinno. Teraz, aby naprawić tę początkowo pustą gwiazdę,
ponownie możemy
zastosować obejście, które wyjaśniłem wcześniej dla tych początkowych danych nagłówka.
Nie chcemy czekać na zakończenie pierwszego
renderowania, zamiast tego powinniśmy przekazać te początkowe dane do tego komponentu podczas nawigacji do niego.
Dlatego nadszedł czas, aby lista posiłków ponownie, w której mamy tę akcję nawigacyjną,
aby przekazać dalej, to już jest klawisz ulubionych, więc ten klucz, który próbowałem wyodrębnić tutaj na
ekranie szczegółów posiłku, pobierz param, jest ulubiony. Chcę przekazać bieżącą wartość, gdy ładujemy ten komponent,
kiedy ładujemy tutaj ten ekran z listy posiłków, która jest komponentem, który
uruchamia nawigację
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
ulubionych, czy nie,
ale oczywiście możemy dowiedzieć się, czy tak jest, czy nie. Na liście posiłków
możemy również skorzystać ze sklepu Redux, nie tylko ze składników ekranu.
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
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
teraz, gdy renderujemy pojedynczy posiłek, możemy
go użyć, aby dowiedzieć się, czy ten posiłek należy do naszych
ulubionych. Nawiasem mówiąc,
nie możesz użyć selektora use, który
nie byłby prawidłowym użyciem, ponieważ musisz użyć haków React tylko na poziomie głównym funkcji
komponentu, a nie w zagnieżdżonych funkcjach lub zagnieżdżonych, jeśli bloki
lub coś w tym rodzaju,
więc użycie selektora użycia tutaj jest niedozwolone, ale możemy oczywiście użyć naszych ulubionych posiłków, a
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
.
pozycja.
id, więc identyfikator posiłku, który obecnie renderujemy. Dlatego ulubiony będzie przechowywać przedmiot, który tam
znaleźliśmy, alternatywnie używamy tutaj, który jest wbudowaną metodą Javascript, która zwróci wartość true, jeśli dowolny element
w ulubionych posiłkach spełnia ten warunek.
Więc jeśli faworyt jest prawdą, wiemy, że ten przedmiot jest faworytem, dlatego możemy użyć faworyta
jako wartości fav, którą przekazujemy jako początkowy parametr do ekranu szczegółów posiłku, a
teraz ta migocząca gwiazda, która początkowo jest pusta, powinna być odszedł.
Teraz, jeśli oznaczę to jako ulubione tutaj i zostawię to i wrócę, zostanie ono
wypełnione od
samego początku, również na ulubionym ekranie. Więc to jest to, w jaki sposób możemy
pracować z ulubionymi, upewnijmy się teraz,
że pokazujemy tutaj tekst fikcyjny na ulubionym ekranie, na wypadek, gdybyśmy nie mieli danych do
wyświetlenia inaczej, a następnie zadbajmy
o nasze filtry.