Jak możemy korzystać z naszego sklepu?
Pamiętaj, że w końcu tutaj zarządzam posiłkami, a nie kategoriami, ponieważ nie planujemy żadnych działań,
które by coś tam zmieniły,
ale zarządzam tutaj posiłkami.
Tak więc jednym wielkim zadaniem byłoby pójść wszędzie w naszej aplikacji, w której importujemy posiłki z fałszywych danych i pozbyć się tego
importu, a zamiast tego wyciągnąć dane z naszego sklepu, ponieważ różnica polega
na tym, że możemy później dodać logikę, aby zmienić dane w naszym sklepie, podczas gdy dane zastępcze
nigdy się nie zmienią.
Powinniśmy więc zaimportować dane z naszego sklepu, abyśmy mogli następnie dodać logikę do manipulowania
tymi danymi, na przykład w celu ograniczenia posiłków, które wyświetlamy.
Gdzie zatem potrzebujemy posiłków? Na ekranie
kategorii nie importujemy posiłków. Mamy kilka innych importów, których właściwie możemy się pozbyć, ale
to
tylko dodatkowa uwaga, nie importujemy posiłków.
Kategorie mogą tam pozostać, ponieważ znowu nie będziemy mieli logiki,
która to zmienia, więc możemy przejść dalej. Ekran kategorii posiłków to inna historia, tam importujemy posiłki, a teraz
celem jest pozbycie się tego importu i wyjęcie posiłków ze sklepu Redux,
a pytanie brzmi, jak to zrobić? Ponownie pomaga nam w tym pakiet React Redux. Z tego pakietu
React Redux możemy coś zaimportować, możemy zaimportować hak, użyj haka selektora.
To pozwala nam wybrać wycinek naszego stanu, naszego globalnie zarządzanego stanu i wykorzystać go w tym komponencie.
Teraz używam haka tutaj, ponieważ pozwala nam to wykorzystać w komponencie
funkcjonalnym, możesz również wiedzieć o innym podejściu, w którym faktycznie importujesz funkcję connect i zawijasz
eksport i używasz stanu mapy do rekwizytów, wysyłki mapy do rekwizytów, to też
możesz użyć, to
absolutnie zadziała, ale jest to nieco szczuplejsze,
więc pójdę tutaj z selektorem użycia. Po dodaniu tego, teraz, kiedy
korzystamy z naszych posiłków, nie używamy ich w ten
sposób, zamiast tego możemy je uzyskać za pomocą selektora użycia. Więc aby czerpać nasze wyświetlane posiłki, utworzę
tutaj nową stałą, dostępną potrawę, może to nazwa zależy od ciebie i użyj selektora tutaj w ten sposób, ponieważ
spowoduje to odzyskanie danych ze stanu i powrót to, więc
to właśnie zapiszę tutaj w tej stałej, zwrócona wartość i selektor użycia przyjmują
funkcję, która zostanie dla nas wykonana przez React Redux.
Funkcja, która automatycznie pobiera stan jako argument, React Redux, który wykonuje dla nas funkcję, zapewni
bieżący stan, aktualny stan Redux do tej funkcji, a następnie będzie w stanie zwrócić dowolne dane z tego
stanu, z tego globalnego sklep, ze stanu globalnego i używam tych
terminów zamiennie tutaj.
Jak więc możemy pobrać dane z tego stanu tutaj w ciele
funkcji, a ja używam tutaj zapisu strzałki skrótu, gdzie po prawej stronie strzałki jest ona automatycznie
zwracana, jeśli nie jest owinięta nawiasami klamrowymi. Cóż, aby uzyskać dostęp do czegoś ze stanu,
musimy wrócić do miejsca, w którym tworzymy sklep, tam przekazuję reduktor korzeni, który powstaje przez
połączenie wszystkich reduktorów.
Znów mamy tylko jeden, ale wyjaśniłem, dlaczego to zrobiłem.
Teraz mamy ten klucz, posiłki, które całkowicie zależą od ciebie, możesz
nazwać to, co chcesz.
Dzięki temu wycinek naszego stanu zarządzany przez ten reduktor jest identyfikatorem i możemy
teraz użyć tego identyfikatora, aby przejąć tę
część naszego stanu, za którą ten reduktor jest odpowiedzialny.
W końcu stan, który będzie wyglądał tak, jak ten stan początkowy. Więc na ekranie kategorii posiłków, tutaj
mam dostęp do stanu. posiłki lub cokolwiek, co wybierzesz jako identyfikator w
połączonych reduktorach, a następnie tutaj uzyskam dostęp do przefiltrowanych posiłków. Nie posiłki, które też tam chciałbym,
mamy tu również posiłki, ale chcę uszanować wszelkie ustawione filtry.
W tej chwili nie mamy logiki, aby
je ustawić, ale z tym zmienimy w przyszłości, więc tutaj chcę dostać moje przefiltrowane posiłki, aby
zawsze dostawać posiłki, które naprawdę powinienem być w stanie wyświetlić, posiłki, które
szanują filtry ustawione przez użytkownika, a teraz są dostępne posiłki, które chcę jeszcze filtrować tutaj, aby znaleźć posiłek
dla wybranej kategorii ID lub posiłki dla wybranej przeze mnie kategorii. Dzięki temu w tym pliku nie ma już
wielkich liter posiłków, to wszystko jest po prostu małymi literami i
pomyślnie pozbyliśmy się importu, przejdźmy teraz. Na ulubionym ekranie importujemy również posiłki i
tak
jak poprzednio, powinniśmy się tego pozbyć, więc zróbmy to. Zamiast tego, tak jak poprzednio, użyję selektora z React
Redux, aby dostać moje posiłki ze sklepu, a zatem tutaj, gdzie używam posiłków, faktycznie dostaję dostępne posiłki za
pomocą selektora użytkowania.
Ponownie daje mi to stan i mogę uzyskać dostęp do stanu. posiłki. filtrowane posiłki, ale teraz tak
naprawdę
dla ulubionych, nie chcę szanować ustawionych filtrów, ponieważ moim zdaniem ma
sens, że kiedy chcemy oglądać ulubione, zawsze widzimy wszystkie ulubione.
Oczywiście możesz mieć inną logikę i wybrać przefiltrowane posiłki, ale użyję tutaj tylko
posiłków, więc. posiłki. posiłki
mogą wyglądać dziwnie, to wybiera kawałek naszego stanu, a następnie w tym kawałku, ta rzecz posiłków tutaj uzyskuje dostęp do tej
właściwości posiłków w
naszym kawałku stanu, ale oczywiście, jeśli spojrzysz na swój reduktor, to tylko częściowo
ma sens, ponieważ my mamy ulubioną potrawę tutaj i rzeczywiście to robimy.
Więc właściwie nie musimy już filtrować naszych ulubionych w ten sposób, a to i tak był tylko
fikcyjny filtr, zawsze zabierał posiłki z m1 i m2 jako identyfikator, zamiast tego dla naszych ulubionych
posiłków, możemy je po prostu uzyskać, uzyskując dostęp tutaj na naszych posiłkach zaznaczamy
ulubione posiłki, więc ta właściwość, ponieważ później będziemy zarządzać ulubionymi posiłkami w oddzielnej tablicy w naszym
sklepie, więc jest
to jeszcze łatwiejsze, bardzo krótki kod. Dzięki temu pozbyliśmy się również importu posiłków
tutaj, przejdźmy do ekranu filtrów.
Nie ma tu importu
posiłków, z drugiej strony jest ekran szczegółów posiłków.
Więc tutaj chcę
się go pozbyć, a
teraz potrzebujemy tej właściwości innych posiłków, którą pokazałem sekundę temu, ponieważ ponownie tutaj możemy użyć
selektora z React Redux, aby wybrać nasze posiłki, ponieważ tutaj mamy teraz komponent tutaj, gdzie używamy naszych posiłków i tam, chcę mieć tablicę ze wszystkimi posiłkami,
ponieważ próbuję załadować pojedynczy posiłek według ID, a zatem moja podstawa, moja tablica, w której szukam tego identyfikatora,
powinna oczywiście być tablica ze wszystkimi posiłkami i nie są filtrowane,
ponieważ nie dbam o żadne ustawione filtry, tutaj szukam konkretnego posiłku o określonym
identyfikatorze i chcę uzyskać pełną listę posiłków, dlatego potrzebujemy tego niefiltrowanego lista posiłków, którymi
tu zarządzamy.
Tak więc tutaj możemy teraz uzyskać nasze dostępne posiłki za pomocą selektora użycia i
tam ponownie używamy posiłków państwowych. posiłki teraz za prawdziwe i teraz możemy użyć
dostępnych posiłków tutaj, aby znaleźć posiłek o tym identyfikatorze. Dzięki temu pozbywamy się również tego importu tutaj, możemy również usunąć import przycisku
teraz, gdy go widzę, ale w rzeczywistości będziemy mieć problem.
Możesz zauważyć, że w nagłówku próbuję również znaleźć posiłek z tablicy posiłków i
usuwamy ten import.
Teraz problem występuje również w opcjach nawigacji, nie możemy użyć haka wyboru selektora, ponieważ można
używać tylko haków wewnątrz innych haczyków lub elementów funkcjonalnych i to nie jest to,
to normalna funkcja, a nie funkcjonalna składnik, a także nie hak.
Nie możemy tutaj użyć selektora, aby to nie zadziałało.
Teraz oczywiście możemy przywrócić import posiłków, ale byłoby to trochę tanie, ponieważ w rzeczywistych aplikacjach czasami
będziesz mieć sytuację, w której potrzebujesz danych ze sklepu Redux w danych nawigacyjnych, a zatem w
następnym
wykładzie rozwiązać ten problem i upewnić się, że możemy również uzyskać dostęp do tego tutaj.