1 00:00:02,420 --> 00:00:07,190 Oczywiście chcemy wywołać tę akcję na ekranie filtrów, ponieważ to tutaj ustawiamy 2 00:00:07,190 --> 00:00:08,870 wszystkie te filtry. 3 00:00:08,980 --> 00:00:14,980 Obecnie zarządzamy nimi tutaj w stanie wewnętrznym i tak pozostanie, ponieważ zdecydowanie potrzebujemy tam 4 00:00:15,430 --> 00:00:17,490 naszych filtrów, ale teraz 5 00:00:17,680 --> 00:00:21,610 oczywiście chcę wysłać akcję po naciśnięciu przycisku Zapisz. 6 00:00:21,610 --> 00:00:26,210 Na szczęście mam już połączenie z nagłówkiem skonfigurowane z efektem użycia i ustawieniami 7 00:00:26,530 --> 00:00:31,020 parametrów, więc wszystko, co musimy zrobić, to zastąpić dziennik konsoli tutaj wysyłką. 8 00:00:31,180 --> 00:00:39,280 Teraz, aby użyć wysyłki, najpierw musimy zaimportować tutaj hak użycia wysyłki z React Redux w ten sposób, a 9 00:00:39,330 --> 00:00:41,350 teraz możemy użyć tego 10 00:00:41,350 --> 00:00:46,490 haka tutaj, aby uzyskać dostęp do funkcji wysyłki, więc const dispatch równa 11 00:00:46,910 --> 00:00:51,530 się użyciu wysyłki wykonanej jako funkcja a teraz możemy wywołać 12 00:00:51,530 --> 00:00:57,070 tutaj dyspozytorską, aby wysłać akcję, dlatego też nawiasem mówiąc, musimy dodać dyspozycję jako 13 00:00:57,070 --> 00:01:01,700 zależność, ale React Redux upewni się, że to się nigdy 14 00:01:01,700 --> 00:01:02,910 nie zmieni, 15 00:01:02,990 --> 00:01:06,110 więc to nigdy nie uruchomi ponownego renderowania, 16 00:01:06,290 --> 00:01:07,950 musimy to dodać. 17 00:01:08,120 --> 00:01:23,720 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ć, 18 00:01:23,720 --> 00:01:25,730 aby utworzyć akcję, 19 00:01:25,730 --> 00:01:33,870 którą przekazuję, aby wysłać tam i ustaw filtry po zastosowaniu tego obiektu filtrów, który przesyłam 20 00:01:33,960 --> 00:01:40,170 dalej, a tam mam bezglutenowy, bezlaktozowy, wegański i to powinno być 21 00:01:40,170 --> 00:01:47,550 po prostu wegetariańskie, ważne, ponieważ ustawione tutaj klucze muszą być kluczami, których szukasz w 22 00:01:47,550 --> 00:01:52,380 reduktorze , w przeciwnym razie to nie zadziała, ważne. 23 00:01:52,380 --> 00:01:55,110 Naprawdę upewnij się, że są 24 00:01:55,110 --> 00:01:58,820 one równe, w przeciwnym razie ta logika nie zadziała. 25 00:01:58,840 --> 00:02:03,370 Teraz wysyłamy to za każdym razem, gdy zostanie naciśnięty przycisk Zapisz, i mam 26 00:02:03,370 --> 00:02:09,220 nadzieję, że powinno to zmienić nasze przefiltrowane posiłki, co powinno zostać odzwierciedlone na ekranie kategorii posiłków, ponieważ 27 00:02:09,220 --> 00:02:12,010 tam pobieramy przefiltrowane posiłki. Spróbujmy, zachowajmy to 28 00:02:12,040 --> 00:02:13,340 i 29 00:02:13,750 --> 00:02:17,590 na przykład ten burger, prawdopodobnie nie wegański. 30 00:02:18,010 --> 00:02:29,120 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 31 00:02:29,120 --> 00:02:30,010 reduktor 32 00:02:30,020 --> 00:02:35,710 posiłków, więc spójrzmy na to. Tak, to nie są akcje, oczywiście 33 00:02:35,720 --> 00:02:37,020 to akcja, 34 00:02:37,040 --> 00:02:39,230 taka jest nazwa argumentu. 35 00:02:39,230 --> 00:02:40,610 To powinna być 36 00:02:40,610 --> 00:02:42,120 akcja, drobny błąd, tylko 37 00:02:42,140 --> 00:02:43,150 literówka, 38 00:02:43,580 --> 00:02:44,660 spróbujmy jeszcze raz. 39 00:02:44,690 --> 00:02:46,220 Wróć do filtrów, 40 00:02:46,220 --> 00:02:52,070 włącz wegańskie, zapisz to, a teraz idź na posiłki, hamburgery i nie widzę ich tutaj, 41 00:02:52,090 --> 00:02:58,710 co jest dobre, ponieważ oznacza to, że jest odfiltrowane. Moje spaghetti z sosem pomidorowym, 42 00:02:58,710 --> 00:03:04,310 wciąż tam jest, ponieważ oczywiście jest to wegańskie, przynajmniej bez sera. 43 00:03:04,500 --> 00:03:07,680 Tak to jest, po niemiecku sznycel zniknął, szybko i łatwo, 44 00:03:07,670 --> 00:03:10,050 sałatka jest tam, co ma sens. 45 00:03:10,050 --> 00:03:12,060 Wypróbujmy także inny filtr, 46 00:03:12,060 --> 00:03:13,110 bezglutenowy, 47 00:03:13,110 --> 00:03:15,030 teraz spaghetti powinno już 48 00:03:15,030 --> 00:03:16,350 zniknąć, więc 49 00:03:16,350 --> 00:03:18,150 spójrzmy, tak, zniknęły. 50 00:03:18,150 --> 00:03:19,140 Sałatka wciąż tam jest, 51 00:03:19,140 --> 00:03:20,030 nie ma 52 00:03:20,040 --> 00:03:24,240 spaghetti, więc ta logika wydaje się działać. Teraz ważne, jeśli wyłączyłem bezglutenowe 53 00:03:24,450 --> 00:03:32,040 i dlatego znów widzę moje spaghetti, jeśli dodam je do ulubionych, a następnie ponownie dodam ten filtr, 54 00:03:32,070 --> 00:03:41,160 oczywiście pod posiłkami, już ich nie ma, pod ulubionymi widzę je, ponieważ taka jest logika ustaliliśmy, że ulubione nie pobierają danych 55 00:03:41,160 --> 00:03:46,860 z naszych przefiltrowanych posiłków, a tylko dbają o to, czy to ulubione, 56 00:03:46,860 --> 00:03:48,090 czy nie. 57 00:03:48,210 --> 00:03:53,370 Możesz oczywiście zmienić tę logikę, ale tutaj jest ona logiką i tylko posiłki 58 00:03:53,370 --> 00:03:57,980 w kategoriach tutaj są odfiltrowywane zgodnie z ustawionymi tutaj filtrami. 59 00:03:58,200 --> 00:04:04,650 Byłoby miło mieć tutaj mały komunikat zastępczy, jeśli nie mamy danych z powodu 60 00:04:05,130 --> 00:04:06,840 naszych filtrów, 61 00:04:06,840 --> 00:04:17,310 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 62 00:04:17,310 --> 00:04:26,170 posiłków do wyświetl, a następnie chcę zwrócić tutaj widok z domyślnym tekstem, co oznacza, że musimy zaimportować 63 00:04:26,170 --> 00:04:34,980 oba, musimy zaimportować widok, a także będziemy potrzebować arkusza stylów z React Native i zaimportować domyślny komponent 64 00:04:35,070 --> 00:04:46,570 tekstowy z komponenty tekst domyślny, a następnie dodaj styl tutaj, style. 65 00:04:50,270 --> 00:04:56,200 treści i domyślnego tekstu, który wyświetlamy, nie można znaleźć posiłków, 66 00:04:56,380 --> 00:04:59,310 może sprawdź filtry, po 67 00:04:59,310 --> 00:05:05,630 prostu podpowiedź, że może filtry wyłączają przepisy, które powinieneś zobaczyć tutaj. 68 00:05:05,640 --> 00:05:13,120 Teraz po prostu dodajmy tę stałą stylów tutaj, gdzie tworzymy nowy arkusz stylów i tam, 69 00:05:13,160 --> 00:05:20,390 chcę skonfigurować ten klucz zawartości, w którym używam Flex One, a następnie ponownie wyśrodkowujemy zawartość 70 00:05:20,390 --> 00:05:26,640 w poziomie i w pionie za pomocą tych właściwości Flexbox, jak to. 71 00:05:28,100 --> 00:05:32,570 Jeśli teraz spróbujemy i może przetestujemy to na Androidzie, tylko 72 00:05:32,570 --> 00:05:43,440 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 73 00:05:43,440 --> 00:05:49,470 jest tam więc dostaję tę wiadomość. Z drugiej strony szybko i łatwo, tam 74 00:05:49,470 --> 00:05:53,320 mam posiłek, a więc nie otrzymuję tego komunikatu, 75 00:05:53,400 --> 00:06:00,140 a zatem nie wygląda to tak źle i oczywiście spróbujmy jeszcze raz wyłączyć ten filtr 76 00:06:00,160 --> 00:06:05,980 i wróć, oto spaghetti . To wszystko działa teraz i w ten sposób możemy zarządzać naszym stanem dzięki Redux.