Będziemy kontynuować pracę nad aplikacją, którą zbudowaliśmy w ostatnim module kursu, z naszymi przepisami
tutaj i filtrami, które moglibyśmy ustawić itd. Są dwie rzeczy, które musimy dodać tam, gdzie będziemy potrzebować Redux.
Jednym z nich jest to, że możemy oznaczyć przepis jako ulubiony, klikając tę ikonę gwiazdy, że to faktycznie oznacza to jako ulubiony
i że dla jednej z nich zmieniamy również tę ikonę, aby pokazać, czy jest ona już ulubiona, czy nie, ale
co ważniejsze, że
możemy zobaczyć ten przepis jako ulubiony tutaj w zakładce ulubionych. Inną rzeczą, w której będziemy potrzebować
Redux, jest tutaj, w filtrach, kiedy ustawimy filtr, a następnie zapiszemy go, oczywiście
powinno to mieć wpływ na posiłki, które ładujemy tutaj, w naszej karcie posiłków na liście posiłki, kiedy
wybieramy kategorię. Tam
należy to odzwierciedlić, co ustawiliśmy na filtrach. Więc nad tym pracujemy, do czego potrzebujemy Redux i
do tego, zainstalujmy Redux i zacznijmy od tego.
Aby rozpocząć pracę z Redux, opuszczę tutaj mój
serwer expo, proces uruchamiania npm, zamknę go tymczasowo i zainstaluję
pakiet, a to będzie
Redux, a oprócz Redux, musimy również zainstalować React Redux, ponieważ to wymagane również do pracy
z Redux.
Tak więc oba pakiety muszą zostać zainstalowane tutaj, a podczas ich instalacji możemy już
zacząć trochę pracować nad naszymi plikami kodu, ponieważ w tym projekcie chcę teraz dodać nowy folder i
jest to folder sklepu.
Teraz możesz nazwać ten folder, jak chcesz, nie musi on nosić nazwy sklep, Redux nie
ma znaczenia, ale jest to folder, w którym chcę zarządzać moją konfiguracją Redux, ponieważ Redux dotyczy całego
centralnego magazynu stanów.
Więc tutaj, w tym folderze sklepu, możemy teraz zacząć od Redux i nie będę omawiał Redux w najdrobniejszych szczegółach tutaj,
mam kompletny
kurs React i Redux do tego, jeśli chcesz poznać tajniki tego, na przykład
ten kurs faktycznie zakładam wcześniejszą znajomość React i Redux, dlatego będzie to tylko krótkie odświeżenie.
Redux w końcu dotyczy reduktorów, akcji, a następnie budowy sklepu opartego na tych reduktorach
i akcjach.
Teraz, w tym folderze sklepu, dodam folder akcji i dodam folder reduktorów, w rzeczywistości w tym projekcie będzie
tylko jedna akcja i jeden plik reduktora, ale jeśli masz więcej plików, oddzielne podfoldery mogą
być dobrym pomysłem na utrzymanie porządku i dlatego tworzę je tutaj, chociaż
dla tej prostej aplikacji nie potrzebowalibyśmy tego, ponieważ nie będziemy mieć tak wielu plików.
Zacznijmy od reduktora. W folderze
reduktora dodam moje posiłki. plik js i to jest plik, w którym poszedłem zarządzać logiką aktualizacji stanu
reduktora posiłków.
To jest koniec pliku, w którym napiszemy logikę oznaczania posiłku jako
ulubionego i zarządzania naszymi filtrami.
Teraz reduktor w React jest tylko funkcją, więc
tutaj utworzę funkcję, nadam jej nazwę reduktor posiłków, nazwa zależy wyłącznie od Ciebie i ta funkcja
faktycznie otrzyma dwa argumenty - stan, bieżący stan migawki, na którym możesz zbudować i uzyskaj nowy stan, ponieważ
reduktor w końcu będzie musiał zwrócić nowy stan, który jest następnie przejmowany przez
Redux i przechowywany w jego sklepie.
Dostajesz więc aktualny, stary stan tutaj i dostajesz akcję, ponieważ funkcja reduktora jest tutaj wykonywana
przez Redux za każdym
razem, gdy nowa akcja jest wysyłana, a zatem uzyskujemy dostęp do akcji tutaj, abyśmy
mogli dowiedzieć się, czy musimy działać i co musimy zrobić.
Więc w ramach tej funkcji, w końcu musisz przywrócić nowy stan, w najprostszej formie, co
oczywiście oznacza, że przywrócimy bieżący stan, co z drugiej strony oznacza, że ten reduktor
nie robi nic użytecznego, ale zrobimy to Zmień to.
Teraz, kiedy uruchamiamy naszą aplikację po raz pierwszy, chcemy również ustawić początkowy stan,
który jest używany początkowo,
tak aby inicjował nasz stan po uruchomieniu tej aplikacji i dodam tutaj nową stałą stanu
początkowego, która zawiera prosty Javascript obiekt i tam chcę zapisać listę moich posiłków, a następnie listę moich przefiltrowanych posiłków, ponieważ
będziemy potrzebować zarówno - listy wszystkich posiłków, jak i listy posiłków, które pasują do filtrów ustawionych przez
użytkownika i ja też chcę tu mieć moje ulubione posiłki. Więc trzy rodzaje tablic posiłków, które przechowuję na końcu i oczywiście jest to
tylko
jedno z możliwych podejść, które możesz tutaj zastosować,
z pewnością możemy znaleźć inne sposoby zarządzania naszymi danymi tutaj, ale podoba mi się ten.
Teraz w tym pliku będę potrzebować danych fikcyjnych moich posiłków, więc zaimportuję posiłki z mojego folderu danych i
tam z danych fikcyjnych. plik js i zainicjuję tutaj posiłki za pomocą tablicy danych manekina posiłków.
Filtrowane posiłki są również inicjalizowane, ponieważ początkowo po uruchomieniu tej aplikacji
nie mamy skonfigurowanych filtrów. Z drugiej strony ulubione posiłki to początkowo pusta tablica, ponieważ ponownie, gdy aplikacja się
uruchomi, nie będziemy mieć ulubionych posiłków.
Oczywiście w prawdziwej aplikacji możesz zapisać ten stan na serwerze, aby gdy użytkownik zamknął
aplikację i wrócił później, nie zaczynasz od zera, ale
nie zrobimy tego tutaj, Nauczę
się, jak dotrzeć do serwera i zapisywać dane tam i ładować dane stamtąd w osobnych
modułach
w dalszej części tego kursu, tutaj skupimy się na Redux.
To jest mój stan początkowy, tutaj w tej funkcji możemy teraz użyć składni Javascript, w której
przypisujemy nasz stan początkowy jako domyślną wartość argumentu state, co oznacza, że gdy ta
funkcja reduktora działa, a stan jest niezdefiniowany, to jest w przypadku, gdy Redux uruchamia nasz reduktor po
raz pierwszy, zaczniemy od
tego stanu początkowego, dzięki czemu automatycznie
załadujemy nasz stan początkowy, że tak powiem, ponieważ kiedy Redux się uruchomi i uruchomi, nastąpi jedno działanie
początkowe, które jest kiedyś przebiegł przez reduktor, a następnie załaduje nasz stan początkowy.
Dzięki temu możemy pracować z pewnym stanem początkowym, co jest miłe, ale samo w sobie nie pomaga
nam zbytnio. Na razie jednak
podłączmy
teraz ten reduktor do Redux, abyśmy mogli faktycznie korzystać z naszego sklepu Redux wszędzie w aplikacji, zanim
zaczniemy wywoływać akcje i robić bardziej przydatne rzeczy w reduktorze. Dlatego tutaj na razie po prostu wyeksportuję
reduktor posiłków jako domyślny tu i teraz w aplikacji. js, czyli plik, w którym uruchamia się
cała nasza aplikacja,
musimy skonfigurować nasz sklep Redux. W
tym celu importujemy tworzenie sklepu z Redux.
Ponadto będziemy musieli stamtąd zaimportować reduktory kombajnów.
To pozwala nam teraz stworzyć sklep, potrzebujemy tylko naszego reduktora,
więc tutaj zaimportuję mój reduktor posiłków z i teraz wskażę folder sklepu, folder reduktorów i
tam posiłki. plik js,
a teraz może tutaj, możemy stworzyć nasz sklep tutaj, wywołując create store. Teraz tworzenie sklepu ma na końcu reduktor,
który musisz przekazać. Teraz oczywiście mamy reduktor i możemy
to przekazać, ale w większych aplikacjach możesz mieć więcej niż jeden reduktor, ponieważ
często masz reduktory dla różnych obszarów funkcji aplikacji, jeden do uwierzytelniania, jeden dla Twoich produktów, jeden powiedzmy, że
obszar wsparcia Twojej aplikacji i musisz połączyć wszystkie te pojedyncze reduktory, te różne reduktory w jeden
reduktor główny i to właśnie działa funkcja połączonych reduktorów, znowu tutaj
nie będziemy go potrzebować, ponieważ mamy tylko jeden reduktor ale aby pokazać
wam podejście, które można zastosować
również w przypadku wielu reduktorów, użyję go również tutaj. Będę więc miał mój reduktor root, który tworzę, wywołując
kombinatory reduktorów, połączone reduktory biorą obiekt JavaScript, w którym teraz mapujemy nasze pojedyncze reduktory, nasze różne
reduktory na klucze.
Na przykład tutaj moglibyśmy brać posiłki za klucz, ale ta nazwa zależy wyłącznie od Ciebie i łączysz to
z reduktorem posiłków, tak jak to.
To, co to robi, to w końcu łączy ten reduktor posiłków z tym reduktorem korzeni, a później będziemy mogli
pracować ze stanem zarządzanym przez reduktor posiłków, więc z tym
stanem, który jest inicjowany w ten sposób, za pomocą tych posiłków będziemy mogli uzyskać dostęp
do tego stanu,
tego fragmentu stanu z tą właściwością później, ale zobaczycie to wszystko.
To jest nasz reduktor roota, a teraz musimy tylko przejść reduktor roota, aby stworzyć
sklep, to daje nam sklep i co teraz?
Teraz ten sklep musi zostać dostarczony do naszej aplikacji i do tego
potrzebujemy innego pakietu, który zainstalowaliśmy, czyli React Redux.
Stamtąd możemy zaimportować komponent dostawcy, dostawca taki jak ten. W końcu owijamy dostawcę wokół naszego głównego komponentu aplikacji, więc wokół najwyższego komponentu,
który przechowuje wszystkie inne komponenty, które ostatecznie będą wchodzić w interakcje z naszym sklepem, a nawigator
posiłków jest do tego całkiem dobry, ponieważ zawiera wszystkie nasze
ekrany, więc zawiera wszystkie komponenty, które w końcu będziemy potrzebować, aby wywołać działania lub uzyskać
dostęp do naszego stanu, więc przeczytaj nasz stan. Dlatego tutaj owijamy komponent dostawcy wokół nawigatora posiłków, a
teraz dostawca bierze jedną ważną właściwość, jeden rekwizyt, który musisz przekazać, i jest to rekwizyt sklepu
i oczywiście tam, jako wartość, którą przekazujemy nasz sklep tutaj.
Tak więc ten stały sklep, w którym znajduje się utworzony sklep, jest przekazywany do dostawcy rekwizytów i za kulisami, daje
nam to wszystko, czego potrzebujemy teraz do interakcji z Redux, ze sklepem Redux w dowolnym komponencie, dowolnym
ekranie lub dowolnym innym komponencie w naszej aplikacji .
Teraz pozwól mi zrestartować to z uruchomieniem npm i na razie nie zrobi to
dużej różnicy, ale nasza aplikacja z pewnością
powinna nadal działać, więc nie powinna się z tego powodu zawiesić, więc po prostu sprawdźmy, czy tak jest i przeładuj tutaj,
naciskamy r dwa razy na Androidzie i komendę r na iOS i zobaczmy, gdzie to nadal ładuje się tak, jak powinno, tak, wygląda to dobrze tutaj
na iOS i jestem całkiem pewien, że ładuje się również dobrze na Androidzie, tak, to też działa.
Więc teraz skonfigurowano Redux,
nasz sklep został zainicjowany, ale go nie używamy.
Tak więc, w następnym kroku, upewnijmy się, że korzystamy z naszego sklepu, zanim zajmiemy się działaniami i
wykonamy prawdziwą pracę w reduktorze.