Oczywiście chcemy wywołać tę akcję na ekranie filtrów, ponieważ to tutaj ustawiamy
wszystkie te filtry.
Obecnie zarządzamy nimi tutaj w stanie wewnętrznym i tak pozostanie, ponieważ zdecydowanie potrzebujemy tam
naszych filtrów, ale teraz
oczywiście chcę wysłać akcję po naciśnięciu przycisku Zapisz.
Na szczęście mam już połączenie z nagłówkiem skonfigurowane z efektem użycia i ustawieniami
parametrów, więc wszystko, co musimy zrobić, to zastąpić dziennik konsoli tutaj wysyłką.
Teraz, aby użyć wysyłki, najpierw musimy zaimportować tutaj hak użycia wysyłki z React Redux w ten sposób, a
teraz możemy użyć tego
haka tutaj, aby uzyskać dostęp do funkcji wysyłki, więc const dispatch równa
się użyciu wysyłki wykonanej jako funkcja a teraz możemy wywołać
tutaj dyspozytorską, aby wysłać akcję, dlatego też nawiasem mówiąc, musimy dodać dyspozycję jako
zależność, ale React Redux upewni się, że to się nigdy
nie zmieni,
więc to nigdy nie uruchomi ponownego renderowania,
musimy to dodać.
Więc to jest wysyłka, teraz ważna, musimy również zaimportować mojego twórcę akcji z posiłków w sklepie i oczywiście mówię o twórcy akcji ustawionych filtrów, ponieważ muszę to tutaj wywołać,
aby utworzyć akcję,
którą przekazuję, aby wysłać tam i ustaw filtry po zastosowaniu tego obiektu filtrów, który przesyłam
dalej, a tam mam bezglutenowy, bezlaktozowy, wegański i to powinno być
po prostu wegetariańskie, ważne, ponieważ ustawione tutaj klucze muszą być kluczami, których szukasz w
reduktorze , w przeciwnym razie to nie zadziała, ważne.
Naprawdę upewnij się, że są
one równe, w przeciwnym razie ta logika nie zadziała.
Teraz wysyłamy to za każdym razem, gdy zostanie naciśnięty przycisk Zapisz, i mam
nadzieję, że powinno to zmienić nasze przefiltrowane posiłki, co powinno zostać odzwierciedlone na ekranie kategorii posiłków, ponieważ
tam pobieramy przefiltrowane posiłki. Spróbujmy, zachowajmy to
i
na przykład ten burger, prawdopodobnie nie wegański.
Przejdźmy więc do filtrów, włączmy wegańskie, zapiszmy to i dostaję błąd, nie mogę znaleźć działań zmiennych, rzucanych przez
reduktor
posiłków, więc spójrzmy na to. Tak, to nie są akcje, oczywiście
to akcja,
taka jest nazwa argumentu.
To powinna być
akcja, drobny błąd, tylko
literówka,
spróbujmy jeszcze raz.
Wróć do filtrów,
włącz wegańskie, zapisz to, a teraz idź na posiłki, hamburgery i nie widzę ich tutaj,
co jest dobre, ponieważ oznacza to, że jest odfiltrowane. Moje spaghetti z sosem pomidorowym,
wciąż tam jest, ponieważ oczywiście jest to wegańskie, przynajmniej bez sera.
Tak to jest, po niemiecku sznycel zniknął, szybko i łatwo,
sałatka jest tam, co ma sens.
Wypróbujmy także inny filtr,
bezglutenowy,
teraz spaghetti powinno już
zniknąć, więc
spójrzmy, tak, zniknęły.
Sałatka wciąż tam jest,
nie ma
spaghetti, więc ta logika wydaje się działać. Teraz ważne, jeśli wyłączyłem bezglutenowe
i dlatego znów widzę moje spaghetti, jeśli dodam je do ulubionych, a następnie ponownie dodam ten filtr,
oczywiście pod posiłkami, już ich nie ma, pod ulubionymi widzę je, ponieważ taka jest logika ustaliliśmy, że ulubione nie pobierają danych
z naszych przefiltrowanych posiłków, a tylko dbają o to, czy to ulubione,
czy nie.
Możesz oczywiście zmienić tę logikę, ale tutaj jest ona logiką i tylko posiłki
w kategoriach tutaj są odfiltrowywane zgodnie z ustawionymi tutaj filtrami.
Byłoby miło mieć tutaj mały komunikat zastępczy, jeśli nie mamy danych z powodu
naszych filtrów,
dlatego też na ekranie kategorii posiłków chcę również sprawdzić, czy wyświetlana długość posiłków wynosi zero, co oznacza, że nie mam
posiłków do wyświetl, a następnie chcę zwrócić tutaj widok z domyślnym tekstem, co oznacza, że musimy zaimportować
oba, musimy zaimportować widok, a także będziemy potrzebować arkusza stylów z React Native i zaimportować domyślny komponent
tekstowy z komponenty tekst domyślny, a następnie dodaj styl tutaj, style.
treści i domyślnego tekstu, który wyświetlamy, nie można znaleźć posiłków,
może sprawdź filtry, po
prostu podpowiedź, że może filtry wyłączają przepisy, które powinieneś zobaczyć tutaj.
Teraz po prostu dodajmy tę stałą stylów tutaj, gdzie tworzymy nowy arkusz stylów i tam,
chcę skonfigurować ten klucz zawartości, w którym używam Flex One, a następnie ponownie wyśrodkowujemy zawartość
w poziomie i w pionie za pomocą tych właściwości Flexbox, jak to.
Jeśli teraz spróbujemy i może przetestujemy to na Androidzie, tylko
po to, aby coś pomieszać, nawet jeśli jest to trochę wolniejsze, mogę tam przejść do filtrów, ustawić bezglutenowe, wrócić do moich posiłków, dlatego włoski nie
jest tam więc dostaję tę wiadomość. Z drugiej strony szybko i łatwo, tam
mam posiłek, a więc nie otrzymuję tego komunikatu,
a zatem nie wygląda to tak źle i oczywiście spróbujmy jeszcze raz wyłączyć ten filtr
i wróć, oto spaghetti . To wszystko działa teraz i w ten sposób możemy zarządzać naszym stanem dzięki Redux.