Celem ekranu przeglądu produktu jest oczywiście przedstawienie listy wszystkich produktów, które możemy zamówić, dlatego też
tutaj oczywiście będziemy mieli normalny komponent React, więc
musimy zaimportować React z React.
Musimy też zaimportować kilka rzeczy z React Native, na przykład potrzebuję tutaj
płaskiej listy, ponieważ wypiszę listę produktów, nie wiemy, jak długo ta lista będzie, ale potencjalnie
jest to bardzo długo, więc chcemy być w stanie zoptymalizować go pod kątem przewijania
i to właśnie
robi płaska lista od razu po wyjęciu z pudełka i możemy zaimportować więcej potrzebnych komponentów.
Więc to są
dwa podstawowe importy, teraz z tym, że utworzę tutaj składniki ekranu przeglądu moich produktów po prostu w tej funkcji tutaj, gdzie otrzymujemy rekwizyty, a
następnie musimy zwrócić trochę jsx tutaj na końcu, a na końcu będę wyeksportuj tutaj również ekran
przeglądu moich produktów jako domyślny tego pliku. Teraz, oczywiście, pytanie, co
tam jest? Co jest w środku naszego komponentu i tam
oczywiście chcę renderować moją płaską
listę, chcę renderować moją płaską listę produktów.
Teraz oczywiście nie mamy jeszcze żadnych produktów, ale możemy je dodać. Tak jak poprzednio, dodam zatem folder modeli,
w którym mogę określić, jak powinien wyglądać produkt.
Nie jest to konieczne, ale może pomóc w uporządkowaniu danych i upewnieniu się, że nigdy nie
przypadkowo pracujesz z różnymi rodzajami produktów, w których po prostu zapomniałeś dodać określoną właściwość w jednym miejscu
swojej aplikacji.
Dlatego też tutaj w produktach. Plik js w folderze modeli, utworzę
klasę produktu, która ma konstruktor, w którym określam, jak powinien wyglądać produkt i chcę, aby każdy
produkt miał unikalny identyfikator, powinien także mieć identyfikator właściciela, który jest identyfikatorem użytkownik, który go utworzył.
Powinien mieć tytuł,
powinien mieć imageUrl, powinien mieć opis i powinien mieć cenę, są
to rzeczy, które składają się na produkt w tej aplikacji.
Teraz, oczywiście, gdy otrzymamy wszystkie te rzeczy jako argumenty w konstruktorze, chcę
je zapisać we właściwościach tego obiektu, który możemy stworzyć za pomocą
tego konstruktora, dlatego wykonuję to zadanie, które
widzieliście także wcześniej, gdzie przechowuję wszystkie te dane, które otrzymujemy we właściwościach tworzonego obiektu.
Tutaj przechowujemy tytuł, imageUrl, identyfikatory i oczywiście opis i cenę. Po skonfigurowaniu tego tutaj mamy plan produktu i
użyjemy go następnie w Redux, a na końcu otrzymamy taką listę produktów
tutaj na naszym ekranie przeglądu produktów. Aby to osiągnąć, musimy skorzystać z
Redux i aby było to możliwe, musimy skonfigurować Redux.
Przejdźmy teraz do folderu sklepu i tam chcę mieć podfolder akcji i podfolder reduktorów,
w tej aplikacji, przy okazji, będziemy mieli różne reduktory i akcje,
w przeciwieństwie do ostatniego modułu tutaj.
Na razie zaczniemy od produktów. Plik js tutaj
w folderze reduktorów, a także dodam produkty. plik js w folderze akcji.
Znowu, jeśli jest to dla ciebie mylące, że mamy tę samą nazwę w różnych folderach, zawsze
możesz zobaczyć, w którym pliku jestem tutaj na górze z tą funkcją nawigacyjną
i oczywiście możesz również pracować z różnymi nazwami w swojej aplikacji,
jeśli jest to mylące, myślę, że jest całkiem jasne, w którym pliku pracuję, jest również wyraźnie wybrane tutaj.
Zacznijmy więc od reduktora produktów i tam chcę zdefiniować mój stan początkowy, ponieważ
ten rodzaj określa, jak będzie wyglądać wycinek stanu związany z
produktami i oczywiście, jak zawsze w programowaniu jest więcej niż
jedno możliwe podejście, myślę, że to warto powiedzieć, że mamy listę dostępnych produktów, to jest tablica, a także produkty
użytkownika i produkty użytkownika, są to
po prostu produkty, które
stworzyliśmy, więc gdzie identyfikator właściciela jest identyfikatorem aktualnie zalogowanego użytkownika i dla za chwilę
nie będziemy mieć funkcji logowania, ale później tak będzie, na
razie po prostu skonfigurujesz to w sposób sztuczny. Dostępnym produktem powinny być wszystkie produkty, a może tylko te, których
nie stworzyliśmy, abyśmy nie mogli kupować własnych produktów, chociaż w rzeczywistości w większości sklepów można również kupić
to, co sprzedajesz, więc myślę, że możemy również
po prostu weź wszystkie produkty tutaj, ale możesz to również dostroić w swojej aplikacji.
Mamy więc te dwie tablice produktów. Teraz w reduktorze, który jest funkcją, w której otrzymujemy stan, który powinien zostać
zainicjowany naszym stanem początkowym i
powinien przyjąć tę wartość jako wartość domyślną i gdzie otrzymujemy akcję, tam będziemy później obsługiwać inny typ
akcji, abyśmy mogli na przykład dodaj nowy produkt i tak dalej. Na razie po prostu zawsze przywrócę tutaj mój
stan, dlatego też zawsze
przywrócę swój początkowy stan, co pozwoli nam na podłączenie się do Redux
i przynajmniej uzyskanie tego początkowego stanu.
Teraz, oczywiście bez możliwości dodawania nowych produktów, nasz początkowy stan nie jest tak przydatny, ponieważ ma
tutaj puste listy produktów, więc nic
nie możemy renderować.
Tak jak wcześniej
to zrobiłem, dodam również folder danych i skonfiguruję tutaj dane pozorne, których nie będziemy używać w całym
module, ale których możemy użyć na razie, abyśmy mieli kilka produktów na
początek z i do tego dołączasz ten atrapa-dane. plik js, który możesz po prostu zastąpić lub w którym możesz po
prostu skopiować zawartość do swoich danych-atrap. Plik js i tam,
co tam robię, importuję mój model produktu, więc oczywiście
powinieneś upewnić się, że ta ścieżka jest dla Ciebie poprawna,
jeśli właśnie skopiowałeś mój kod, a następnie skonfigurowałem tę tablicę produktów tutaj, w której mam kilka produktów
zastępczych, a teraz jest to ważne, otrzymujemy identyfikator produktu, następnie mamy identyfikator właściciela, następnie mamy tytuł i
powinieneś upewnić się, że model produktu jest skonfigurowany, aby to zamówienie było prawidłowe.
Tak więc otrzymujemy tytuł, następnie mamy imageUrl jako czwarty otrzymany argument, a następnie masz opis
jako piąty, a cenę jako ostatni argument,
więc upewnij się, że model produktu jest skonfigurowany w sposób jest kolejnością argumentów.
Oto, co tu masz,
ostatecznie eksportuję tę tablicę jako domyślną
i dlatego teraz w tym reduktorze produktów możemy ją po prostu zaimportować.
Możemy tam importować produkty, naszą listę produktów zastępczych z folderu danych, a tam
z danych zastępczych. plik js i możemy w tej
chwili po prostu zainicjować nasze dostępne produkty za pomocą produktów, a produkty użytkownika można również zainicjować za pomocą
tego, chociaż dla produktów użytkownika jest jedna niewielka różnica, którą chcę wprowadzić, chcę je filtrować określony identyfikator właściciela,
ponieważ ostatecznie nie wszystkie produkty zostaną utworzone przez nas. Zamiast tego tutaj filtruję tę fikcyjną tablicę, patrzę
na każdy produkt, który zawiera tylko produkty w mojej tablicy produktów użytkownika, gdzie identyfikator właściciela jest
równy U1, co jeśli spojrzysz na fikcyjne dane, to po prostu przypadek niektórych produktów, a nie dla nich
wszystkich.
Niektóre z nich mają identyfikator właściciela U1 i będą to produkty, których używam jako
produktów użytkownika, jako konfiguracji zastępczej. dzięki temu konfigurowany jest tutaj nasz reduktor produktów. możemy na razie zignorować działania produktów,
oczywiście dodamy je później i teraz możemy przejść do aplikacji. plik js i tam też
skonfiguruj Redux.
W tym celu musimy zaimportować coś z
Redux i oczywiście musimy również zaimportować coś z React Redux.
Teraz musimy coś zaimportować z Redux, a jest
to oczywiście funkcja tworzenia magazynu i połączone funkcje reduktorów, abyśmy mogli
utworzyć jeden reduktor root. W tej chwili oczywiście mamy tylko
jeden reduktor, ale jak wspomniałem w tej aplikacji, w końcu
będziemy mieli wiele reduktorów, więc tutaj zdecydowanie musisz połączyć swoje reduktory, a od React Redux potrzebujemy
komponentu dostawcy, który pakujemy wokół naszej aplikacji, aby coś zapewnić. Będziemy wtedy oczywiście musieli również zaimportować reduktor
produktów lub jakkolwiek chcesz nazwać go z folderu sklepu, tam z reduktorów i tam z
pliku produktów, abyśmy mogli następnie utworzyć nasz reduktor główny, wywołując kombinowane reduktory,
gdzie następnie przekazać obiekt, w którym mapujemy powiedzmy na produkty, ale to zależy od Ciebie, nasz reduktor
produktów, a później dodamy tam więcej reduktorów, a następnie możemy stworzyć nasz sklep
z funkcją tworzenia sklepu, a to w końcu przyjmuje nasz reduktor root jako argument, a następnie
w kodzie jsx, utworzę mój komponent dostawcy między tagami otwierającym i zamykającym, potem też
będę mieć swój ekran, na razie nic tam nie będzie, to nie jest
poprawny jsx przy okazji, ale naprawimy to później, a dla
komponentu dostawcy oczywiście musimy ustawić prop sklepu i ustawić stałą sklepu
lub sklep, który tworzymy tutaj. Dzięki temu Redux powinien zostać skonfigurowany, dzięki czemu będziemy mogli później
skorzystać z niego tutaj z ekranu przeglądu produktów, a przy tym oczywiście kolejnym krokiem jest dodanie nawigacji, abyśmy
mogli zobaczyć ten ekran przeglądu produktów. Kontynuujmy więc dalej te kroki.