Zacznijmy od ulubionych.
Chcę się upewnić, że kiedy jestem w przepisie, mogę kliknąć tę gwiazdkę, a to doda to jako ulubione i pokaże to tutaj na
ulubionym ekranie, na którym obecnie nic nie widzę, ponieważ usunąłem te fikcyjne ulubione.
W tym
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
mylące, ale tak, te dwa pliki posiłków. js tutaj w działaniach
i posiłkach. js w reduktorach i posiłkach czynnościowych. Plik js,
skonfiguruję niektóre akcje Redux, które zwykle zaczynają się od skonfigurowania unikalnych
identyfikatorów, które przechowuję w stałych i które będą przełączać ulubione.
Możesz użyć tutaj, co chcesz,
przechowywana tutaj wartość zwykle jest tym samym identyfikatorem, więc
jest to wartość identyfikatora i jest ona po prostu przechowywana w stałej, abyśmy nie musieli ręcznie
wpisywać tego później, ale zawsze możemy importować ta stała i
unikaj literówek.
Ponownie, jeśli jest to
dla Ciebie zupełnie nowe, zdecydowanie najpierw sprawdź dedykowane zasoby React Redux.
Teraz użyję tutaj wzorca twórcy akcji, co
oznacza, że mam tutaj ten identyfikator, ale teraz wyeksportuję również funkcję, która tworzy mi akcję, ponieważ akcja nie
jest często tylko identyfikatorem, w tym przypadku tak jest, to również potrzebuje dodatkowego
ładunku i dlatego faktycznie mamy akcję, która jest obiektem o identyfikatorze i ładunku, dlatego tutaj dodam
funkcję, która tworzy taki obiekt akcji i nazwiję to przełączanie ulubionych w ten sposób, wybierz identyfikator ale
w przypadku wielbłąda
i jest to funkcja, która może odbierać pewne dane, ponieważ to ja będę ją wywoływać
i która powinna zwrócić obiekt JavaScript, który opisuje tę akcję, a więc powiedzmy, że jest
to typ, tak zazwyczaj nazywamy
to pole identyfikatora ale generalnie możesz swobodnie korzystać z tego, co chcesz, w
moim
przypadku będzie to przełącznik ulubiony,
więc wskazuję ten identyfikator, używam tego ciągu jako identyfikatora, a następnie dowolnych dodatkowych danych, na przykład tutaj
' Będę musiał zareklamować d identyfikator posiłku, który powinien zostać przełączony, a to oznacza, że ta
funkcja musi również uzyskać ten identyfikator wejściowy, ponieważ w przeciwnym razie nie mogę zapisać
go w utworzonej przeze mnie akcji.
To jest mój twórca akcji do przełączania ulubionej akcji, teraz
w reduktorze, chcę działać, gdy dostanę taką przełączoną ulubioną akcję i do tego użyję wzoru, który
prawdopodobnie
widziałeś, jeśli wcześniej pracowałeś z Redux , Użyję tutaj instrukcji switch i włączę mój
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.
Więc włączam ten typ akcji, a następnie obsługuję różne przypadki dla różnych akcji,
które mogę mieć.
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
przechowuję to w osobnej stałej, ponieważ teraz nie muszę ręcznie wpisywać przełączania ulubionych, w której mogę
mieć literówka tam, zamiast tego po
prostu używam tej stałej, w której zapisany jest ciąg. A teraz tutaj uruchamiam dowolną logikę, aby uruchomić
tę akcję i zmieniam swój stan, tak aby posiłek z identyfikatorem posiłku będący częścią mojej akcji
został dodany do ulubionych posiłków lub usunięty, jeśli już był częścią, ponieważ tutaj jest akcja przełączania,
chcę dodać elementy,
które nie są jeszcze ulubionymi, chcę usunąć elementy, które są. Na marginesie, w instrukcji switch dodam również
domyślny przypadek, w którym po prostu zwracam niezmieniony stan.
Naprawdę nie powinniśmy tego osiągnąć, ale na wypadek, gdybyśmy to zrobili, to właśnie to robimy,
ale wracając do przełączania ulubionej skrzynki. Tam chcę teraz na
końcu dowiedzieć się, czy mój posiłek z identyfikatorem jest częścią akcji, ponieważ dodam identyfikator akcji
do akcji, jeśli ten
posiłek jest już częścią ulubionych
posiłków, jeśli
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,
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
równy
niż zero, wiem, że przedmiot był tego częścią. Więc mam tutaj swój istniejący indeks i
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,
którą otrzymuję i tam, będziemy mieli ulubioną właściwość posiłków i mogę użyj metody
find index, normalnej metody Javascript, której można użyć w tablicach, aby uzyskać indeks elementu, który
spełnia określone kryteria, które ustawiłem tutaj w funkcji, którą przekazuję, aby znaleźć indeks, funkcja
ta działa przy każdym posiłku w tablica i jeśli zwróci true, to daje mi indeks elementu,
przez który przebiegał.
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,
na który patrzę w moich ulubionych posiłkach, ma ten sam pomysł, co posiłek, dla którego
ma miejsce ta akcja, i oznacza to, że jeśli jest to prawdą w przypadku dowolnego elementu w ulubionych posiłkach,
to posiłek, który próbujemy przełączyć jest już częścią ulubionych, więc będziemy musieli go usunąć,
ponieważ
spowoduje to zwrócenie nam indeksu elementu, dlatego istniejący indeks będzie większy niż -1, a zatem możemy go użyć,
aby go usunąć.
Jeśli to zwraca prawdę dla żadnego przedmiotu, więc jeśli to
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,
dlatego użyję go tutaj w instrukcji if i sprawdzę, czy istniejący
indeks jest większy czy równy 0, co oznacza, że mamy już ten posiłek jako część ulubionych
posiłków, czy nie.
Teraz w przypadku, jeśli element jest już częścią ulubionych posiłków, chcę go usunąć.
Tak więc tutaj w końcu zwrócę nowy stan, ponieważ w reduktorze ostatecznie
trzeba zwrócić nowy stan, który jest nowym obiektem, w którym najpierw kopiuję istniejący stan za pomocą operatora rozkładania, aby
go wyciągnąć wszystkie pary klucz-wartość istniejącego stanu, aby nie stracić żadnego stanu i
nie zastąpić
żadnego stanu, którego nie chcę zastąpić, a następnie zastąpię tylko ulubione posiłki, więc
dodam to ponownie, aby zastąpić istniejące ulubione posiłki moimi nowymi ulubionymi posiłkami, które ostatecznie powinny
być starymi ulubionymi posiłkami bez pozycji w tym indeksie.
A teraz tutaj, aby uzyskać moje zaktualizowane ulubione posiłki, utworzę nową stałą, zaktualizowaną Ulubioną
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
i zrobię to aby utworzyć kopię tej tablicy, aby nie manipulować oryginalną tablicą, jeśli teraz zacznę
nad tym pracować, ponieważ teraz chcę pobrać zaktualizowane ulubioneFavMeals, wywołać połączenie tutaj, a następnie usunąć
element z istniejącego indeksu i tylko ten element.
To w końcu weźmie zaktualizowany indeks FavMeals, edytuję go i usuniesz element pod tym indeksem i edytuję tę
tablicę, dlatego skopiowałem ją,
aby nie edytować oryginalnej tablicy, a teraz możemy użyć tej zaktualizowanej tablicy FavMeals tutaj i przechowuj
to z powrotem jako ulubione posiłki w naszym sklepie, ponieważ będzie to ulubiony
zestaw posiłków bez posiłku, który właśnie usunęliśmy.
W innym przypadku, który jest oczywiście istotny, jeśli nie znajdziemy produktu, więc chcemy go
dodać, tutaj również chcę przywrócić nowy stan, w którym najpierw skopiuję stary stan, a następnie
zastąpię ulubione posiłki do zasadniczo są moimi starymi ulubionymi posiłkami, a teraz
mogę wywołać concat, metodę JavaScript wbudowaną w Javascript, która zwraca nową tablicę, która
bierze starą tablicę i dodaje nowy element, i tam, tutaj chcę oczywiście dodać posiłek dla
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ę
tutaj tylko do tej struktury stanu tutaj, a
teraz tutaj, mogę znaleźć posiłek, który chcę dodać, a ponieważ staje
się bardzo długo, faktycznie przeniosę to na nową
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,
jeśli mealId jest równy akcji. mealId, a następnie mam posiłek, który chcę dodać, i jest to
posiłek, który łączę z moimi ulubionymi posiłkami, aby dodać go do tej tablicy. To powinna być logika,
która działa i która zarządza naszymi ulubionymi.
Teraz musimy upewnić się, że faktycznie wysyłamy tę akcję za każdym razem, gdy klikniemy ikonę gwiazdki w naszym
nagłówku.
Aby wysłać
akcję, przejdźmy do ekranu szczegółów posiłku, ponieważ tutaj znajduje się
ikona naszej gwiazdy, a kiedy kliknę ten przycisk, w końcu chcę wysłać akcję.
Dobra wiadomość jest taka, że wysyłanie akcji
jest bardzo łatwe,
mamy selektor użycia, mamy także wysyłkę użycia, która w końcu daje nam łatwy sposób uruchomienia funkcji.
Zła wiadomość jest taka, że można tego oczywiście użyć tylko w treści komponentu tutaj, w naszym komponencie funkcjonalnym, a
nie w opcjach nawigacji.
Ponownie będziemy musieli pracować z ustawionymi parametrami, aby komunikować się między opcjami nawigacji a komponentem,
ale to oczywiście możemy zrobić. Więc tutaj, na ekranie szczegółów posiłku,
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
wywołać nowe akcje, i zapiszę w stałej nazwie o nazwie dispatch. Następnie chcę utworzyć ulubiony moduł
obsługi, który jest funkcją, która ostatecznie powinna wywołać tę akcję.
Więc tutaj chcę zadzwonić do wysyłki, która jest dostępna dzięki temu hakowi, a teraz
do wysłania, muszę przekazać akcję, którą chcę wysłać, i w tym
celu użyję tego twórcy akcji do przełączenia tutaj ulubionych.
Musimy tylko zaimportować to, zaimportować z folderu sklepu,
tam z działań, a tam z posiłków. plik js, stamtąd chcę zaimportować przełączanie ulubionych,
nie identyfikator we wszystkich wielkich literach, ale funkcja kreatora akcji. Po zaimportowaniu tego tutaj, w wysyłce możemy
wywołać przełącznik ulubiony w ten sposób, a teraz tutaj musimy
przesłać identyfikator, a to oczywiście jest posiłek, który już
tam wydobywamy lub wybieramy. Id też bym działał,
cokolwiek chcesz, po prostu pójdę na posiłek.
Teraz możemy ponownie aktywować efekt użycia, aby komunikować się z naszym nagłówkiem, ale nie za pomocą tej linii, ale zamiast
tego z ustawionymi parametrami nawigacji rekwizytów, a teraz tutaj, nazwiemy to przełączanie ulubionych, nazwa zależy od ciebie i
wskazuję na mój ulubiony moduł obsługi.
Teraz przełączanie ulubionego modułu obsługi powinno być dodane jako zależność tutaj i aby
uniknąć nieskończonych pętli, ponownie użyję wywołania zwrotnego, które importuję z React, aby zawinąć tę funkcję tutaj.
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,
React Redux upewni się, że to się nigdy
nie zmieni, więc jest to zależność, która nigdy się nie zmieni, zależność druga
jest mealId, to także
nie powinno się zmieniać, gdy jesteśmy na
tej stronie, zawsze będzie miała tę samą wartość. Tak więc przy tej funkcji nie należy tak naprawdę
odtwarzać, co oznacza, że ten efekt nigdy się nie uruchomi, chyba że zostanie odtworzony, co ma miejsce tylko
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
dlatego powinniśmy mieć tutaj bezpieczny kanał komunikacji.
Teraz w nagłówku możemy teraz wyodrębnić ten moduł obsługi, tak przy okazji,
że nie potrzebujemy już posiłku.
Teraz możemy po prostu pobrać funkcję przełączania ulubionej funkcji z naszej nawigacji danych nawigacyjnych, uzyskać parametr, a następnie nazwać to
przełącznik fav , więc jest to nazwa parametru, którą możemy wyodrębnić, co powinno dać
nam dostęp do funkcji, którą przekazujemy. Teraz przełącz faworytem jest to, co powinno zostać wykonane po
naciśnięciu tego przycisku.
Więc tutaj wskażę opcję przełączania ulubionych, ponieważ utrzymuje ona wskaźnik na tej funkcji, a zatem funkcja
ta zostanie wykonana, gdy teraz naciśniemy tę gwiazdkę. Zobaczymy, czy to zadziała.
Zapiszmy to i wróćmy do spaghetti tutaj, kliknij tę gwiazdkę i kliknij ulubione, a to wygląda
dobrze,
spaghetti jest częścią ulubionych.
Kliknijmy ponownie gwiazdkę tutaj i przejdźmy do ulubionych i już jej nie ma,
to ma sens.
Kliknij ponownie, wrócił, przejdź do strony szczegółów tutaj w zakładce ulubionych i kliknij gwiazdkę i
wróć, cóż, już go nie ma.
Sprawdźmy to również na Androidzie. Być może sznycel jest teraz pusty. Wróćmy i kliknij gwiazdkę, przejdź
do ulubionych, oto
jest, wróć, kliknij gwiazdę i zniknęła. Ta logika na ogół działa.
Jest kilka rzeczy, nad którymi nadal chcę pracować, na przykład chcę zmienić
ikonę w oparciu
o ulubiony status, chcę też pokazać tekst na ulubionym ekranie, gdy jest pusty, ale ogólnie, wysyłanie i
używanie danych działa nawet jeśli potrzebujemy tego w nagłówku.