1
00:00:02,210 --> 00:00:08,690
Celem ekranu przeglądu produktu jest oczywiście przedstawienie listy wszystkich produktów, które możemy zamówić, dlatego też

2
00:00:09,830 --> 00:00:13,250
tutaj oczywiście będziemy mieli normalny komponent React, więc

3
00:00:13,250 --> 00:00:15,490
musimy zaimportować React z React.

4
00:00:15,620 --> 00:00:20,440
Musimy też zaimportować kilka rzeczy z React Native, na przykład potrzebuję tutaj

5
00:00:20,450 --> 00:00:26,330
płaskiej listy, ponieważ wypiszę listę produktów, nie wiemy, jak długo ta lista będzie, ale potencjalnie

6
00:00:26,330 --> 00:00:31,910
jest to bardzo długo, więc chcemy być w stanie zoptymalizować go pod kątem przewijania

7
00:00:31,910 --> 00:00:33,440
i to właśnie

8
00:00:33,440 --> 00:00:39,050
robi płaska lista od razu po wyjęciu z pudełka i możemy zaimportować więcej potrzebnych komponentów.

9
00:00:40,460 --> 00:00:42,020
Więc to są

10
00:00:42,020 --> 00:00:51,980
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

11
00:00:52,070 --> 00:00:58,820
następnie musimy zwrócić trochę jsx tutaj na końcu, a na końcu będę wyeksportuj tutaj również ekran

12
00:00:58,820 --> 00:01:05,360
przeglądu moich produktów jako domyślny tego pliku. Teraz, oczywiście, pytanie, co

13
00:01:05,370 --> 00:01:11,830
tam jest? Co jest w środku naszego komponentu i tam

14
00:01:11,910 --> 00:01:14,660
oczywiście chcę renderować moją płaską

15
00:01:14,670 --> 00:01:17,610
listę, chcę renderować moją płaską listę produktów.

16
00:01:17,610 --> 00:01:23,340
Teraz oczywiście nie mamy jeszcze żadnych produktów, ale możemy je dodać. Tak jak poprzednio, dodam zatem folder modeli,

17
00:01:23,340 --> 00:01:26,380
w którym mogę określić, jak powinien wyglądać produkt.

18
00:01:26,400 --> 00:01:32,130
Nie jest to konieczne, ale może pomóc w uporządkowaniu danych i upewnieniu się, że nigdy nie

19
00:01:32,130 --> 00:01:37,980
przypadkowo pracujesz z różnymi rodzajami produktów, w których po prostu zapomniałeś dodać określoną właściwość w jednym miejscu

20
00:01:37,980 --> 00:01:39,120
swojej aplikacji.

21
00:01:39,180 --> 00:01:44,640
Dlatego też tutaj w produktach. Plik js w folderze modeli, utworzę

22
00:01:44,640 --> 00:01:51,030
klasę produktu, która ma konstruktor, w którym określam, jak powinien wyglądać produkt i chcę, aby każdy

23
00:01:51,030 --> 00:01:57,200
produkt miał unikalny identyfikator, powinien także mieć identyfikator właściciela, który jest identyfikatorem użytkownik, który go utworzył.

24
00:01:57,540 --> 00:01:59,550
Powinien mieć tytuł,

25
00:01:59,630 --> 00:02:04,320
powinien mieć imageUrl, powinien mieć opis i powinien mieć cenę, są

26
00:02:04,320 --> 00:02:08,850
to rzeczy, które składają się na produkt w tej aplikacji.

27
00:02:09,030 --> 00:02:13,890
Teraz, oczywiście, gdy otrzymamy wszystkie te rzeczy jako argumenty w konstruktorze, chcę

28
00:02:13,890 --> 00:02:18,570
je zapisać we właściwościach tego obiektu, który możemy stworzyć za pomocą

29
00:02:18,570 --> 00:02:21,960
tego konstruktora, dlatego wykonuję to zadanie, które

30
00:02:21,960 --> 00:02:27,570
widzieliście także wcześniej, gdzie przechowuję wszystkie te dane, które otrzymujemy we właściwościach tworzonego obiektu.

31
00:02:27,570 --> 00:02:37,660
Tutaj przechowujemy tytuł, imageUrl, identyfikatory i oczywiście opis i cenę. Po skonfigurowaniu tego tutaj mamy plan produktu i

32
00:02:37,660 --> 00:02:44,350
użyjemy go następnie w Redux, a na końcu otrzymamy taką listę produktów

33
00:02:44,350 --> 00:02:52,280
tutaj na naszym ekranie przeglądu produktów. Aby to osiągnąć, musimy skorzystać z

34
00:02:52,280 --> 00:02:56,980
Redux i aby było to możliwe, musimy skonfigurować Redux.

35
00:02:56,990 --> 00:03:03,080
Przejdźmy teraz do folderu sklepu i tam chcę mieć podfolder akcji i podfolder reduktorów,

36
00:03:03,080 --> 00:03:07,820
w tej aplikacji, przy okazji, będziemy mieli różne reduktory i akcje,

37
00:03:07,820 --> 00:03:10,640
w przeciwieństwie do ostatniego modułu tutaj.

38
00:03:10,760 --> 00:03:13,760
Na razie zaczniemy od produktów. Plik js tutaj

39
00:03:13,830 --> 00:03:19,510
w folderze reduktorów, a także dodam produkty. plik js w folderze akcji.

40
00:03:19,550 --> 00:03:24,980
Znowu, jeśli jest to dla ciebie mylące, że mamy tę samą nazwę w różnych folderach, zawsze

41
00:03:24,980 --> 00:03:29,440
możesz zobaczyć, w którym pliku jestem tutaj na górze z tą funkcją nawigacyjną

42
00:03:29,660 --> 00:03:33,480
i oczywiście możesz również pracować z różnymi nazwami w swojej aplikacji,

43
00:03:33,620 --> 00:03:39,380
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.

44
00:03:39,380 --> 00:03:45,200
Zacznijmy więc od reduktora produktów i tam chcę zdefiniować mój stan początkowy, ponieważ

45
00:03:45,200 --> 00:03:49,600
ten rodzaj określa, jak będzie wyglądać wycinek stanu związany z

46
00:03:49,880 --> 00:03:54,440
produktami i oczywiście, jak zawsze w programowaniu jest więcej niż

47
00:03:54,440 --> 00:04:02,890
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

48
00:04:03,190 --> 00:04:06,070
użytkownika i produkty użytkownika, są to

49
00:04:06,070 --> 00:04:08,630
po prostu produkty, które

50
00:04:08,710 --> 00:04:14,800
stworzyliśmy, więc gdzie identyfikator właściciela jest identyfikatorem aktualnie zalogowanego użytkownika i dla za chwilę

51
00:04:14,800 --> 00:04:19,450
nie będziemy mieć funkcji logowania, ale później tak będzie, na

52
00:04:19,450 --> 00:04:26,380
razie po prostu skonfigurujesz to w sposób sztuczny. Dostępnym produktem powinny być wszystkie produkty, a może tylko te, których

53
00:04:26,380 --> 00:04:31,990
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ć

54
00:04:31,990 --> 00:04:34,990
to, co sprzedajesz, więc myślę, że możemy również

55
00:04:34,990 --> 00:04:39,700
po prostu weź wszystkie produkty tutaj, ale możesz to również dostroić w swojej aplikacji.

56
00:04:39,700 --> 00:04:47,920
Mamy więc te dwie tablice produktów. Teraz w reduktorze, który jest funkcją, w której otrzymujemy stan, który powinien zostać

57
00:04:47,920 --> 00:04:49,960
zainicjowany naszym stanem początkowym i

58
00:04:49,960 --> 00:04:55,360
powinien przyjąć tę wartość jako wartość domyślną i gdzie otrzymujemy akcję, tam będziemy później obsługiwać inny typ

59
00:04:55,360 --> 00:05:02,260
akcji, abyśmy mogli na przykład dodaj nowy produkt i tak dalej. Na razie po prostu zawsze przywrócę tutaj mój

60
00:05:02,260 --> 00:05:04,380
stan, dlatego też zawsze

61
00:05:04,450 --> 00:05:09,610
przywrócę swój początkowy stan, co pozwoli nam na podłączenie się do Redux

62
00:05:09,610 --> 00:05:12,300
i przynajmniej uzyskanie tego początkowego stanu.

63
00:05:12,340 --> 00:05:19,210
Teraz, oczywiście bez możliwości dodawania nowych produktów, nasz początkowy stan nie jest tak przydatny, ponieważ ma

64
00:05:19,210 --> 00:05:21,550
tutaj puste listy produktów, więc nic

65
00:05:21,700 --> 00:05:23,480
nie możemy renderować.

66
00:05:23,740 --> 00:05:25,420
Tak jak wcześniej

67
00:05:25,480 --> 00:05:32,080
to zrobiłem, dodam również folder danych i skonfiguruję tutaj dane pozorne, których nie będziemy używać w całym

68
00:05:32,110 --> 00:05:37,150
module, ale których możemy użyć na razie, abyśmy mieli kilka produktów na

69
00:05:37,150 --> 00:05:43,390
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

70
00:05:43,390 --> 00:05:47,230
prostu skopiować zawartość do swoich danych-atrap. Plik js i tam,

71
00:05:47,230 --> 00:05:50,620
co tam robię, importuję mój model produktu, więc oczywiście

72
00:05:50,620 --> 00:05:54,700
powinieneś upewnić się, że ta ścieżka jest dla Ciebie poprawna,

73
00:05:54,700 --> 00:06:00,940
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

74
00:06:00,940 --> 00:06:07,150
zastępczych, a teraz jest to ważne, otrzymujemy identyfikator produktu, następnie mamy identyfikator właściciela, następnie mamy tytuł i

75
00:06:07,150 --> 00:06:12,100
powinieneś upewnić się, że model produktu jest skonfigurowany, aby to zamówienie było prawidłowe.

76
00:06:12,130 --> 00:06:19,630
Tak więc otrzymujemy tytuł, następnie mamy imageUrl jako czwarty otrzymany argument, a następnie masz opis

77
00:06:19,630 --> 00:06:23,590
jako piąty, a cenę jako ostatni argument,

78
00:06:23,590 --> 00:06:30,250
więc upewnij się, że model produktu jest skonfigurowany w sposób jest kolejnością argumentów.

79
00:06:30,250 --> 00:06:31,690
Oto, co tu masz,

80
00:06:31,930 --> 00:06:34,050
ostatecznie eksportuję tę tablicę jako domyślną

81
00:06:34,070 --> 00:06:38,160
i dlatego teraz w tym reduktorze produktów możemy ją po prostu zaimportować.

82
00:06:38,170 --> 00:06:47,080
Możemy tam importować produkty, naszą listę produktów zastępczych z folderu danych, a tam

83
00:06:47,080 --> 00:06:52,750
z danych zastępczych. plik js i możemy w tej

84
00:06:52,750 --> 00:06:59,410
chwili po prostu zainicjować nasze dostępne produkty za pomocą produktów, a produkty użytkownika można również zainicjować za pomocą

85
00:06:59,440 --> 00:07:06,310
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,

86
00:07:06,310 --> 00:07:12,820
ponieważ ostatecznie nie wszystkie produkty zostaną utworzone przez nas. Zamiast tego tutaj filtruję tę fikcyjną tablicę, patrzę

87
00:07:12,820 --> 00:07:19,420
na każdy produkt, który zawiera tylko produkty w mojej tablicy produktów użytkownika, gdzie identyfikator właściciela jest

88
00:07:19,420 --> 00:07:26,500
równy U1, co jeśli spojrzysz na fikcyjne dane, to po prostu przypadek niektórych produktów, a nie dla nich

89
00:07:26,500 --> 00:07:26,960
wszystkich.

90
00:07:27,010 --> 00:07:32,650
Niektóre z nich mają identyfikator właściciela U1 i będą to produkty, których używam jako

91
00:07:32,650 --> 00:07:39,010
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,

92
00:07:39,100 --> 00:07:45,070
oczywiście dodamy je później i teraz możemy przejść do aplikacji. plik js i tam też

93
00:07:45,070 --> 00:07:46,450
skonfiguruj Redux.

94
00:07:46,450 --> 00:07:50,100
W tym celu musimy zaimportować coś z

95
00:07:50,140 --> 00:07:54,720
Redux i oczywiście musimy również zaimportować coś z React Redux.

96
00:07:54,970 --> 00:07:58,870
Teraz musimy coś zaimportować z Redux, a jest

97
00:07:58,870 --> 00:08:04,060
to oczywiście funkcja tworzenia magazynu i połączone funkcje reduktorów, abyśmy mogli

98
00:08:04,060 --> 00:08:08,910
utworzyć jeden reduktor root. W tej chwili oczywiście mamy tylko

99
00:08:08,920 --> 00:08:12,610
jeden reduktor, ale jak wspomniałem w tej aplikacji, w końcu

100
00:08:12,610 --> 00:08:18,300
będziemy mieli wiele reduktorów, więc tutaj zdecydowanie musisz połączyć swoje reduktory, a od React Redux potrzebujemy

101
00:08:18,310 --> 00:08:25,750
komponentu dostawcy, który pakujemy wokół naszej aplikacji, aby coś zapewnić. Będziemy wtedy oczywiście musieli również zaimportować reduktor

102
00:08:25,750 --> 00:08:33,600
produktów lub jakkolwiek chcesz nazwać go z folderu sklepu, tam z reduktorów i tam z

103
00:08:33,660 --> 00:08:39,940
pliku produktów, abyśmy mogli następnie utworzyć nasz reduktor główny, wywołując kombinowane reduktory,

104
00:08:40,000 --> 00:08:48,490
gdzie następnie przekazać obiekt, w którym mapujemy powiedzmy na produkty, ale to zależy od Ciebie, nasz reduktor

105
00:08:48,520 --> 00:08:55,330
produktów, a później dodamy tam więcej reduktorów, a następnie możemy stworzyć nasz sklep

106
00:08:55,330 --> 00:09:03,280
z funkcją tworzenia sklepu, a to w końcu przyjmuje nasz reduktor root jako argument, a następnie

107
00:09:03,970 --> 00:09:11,230
w kodzie jsx, utworzę mój komponent dostawcy między tagami otwierającym i zamykającym, potem też

108
00:09:11,230 --> 00:09:17,900
będę mieć swój ekran, na razie nic tam nie będzie, to nie jest

109
00:09:17,920 --> 00:09:23,080
poprawny jsx przy okazji, ale naprawimy to później, a dla

110
00:09:23,080 --> 00:09:29,200
komponentu dostawcy oczywiście musimy ustawić prop sklepu i ustawić stałą sklepu

111
00:09:29,200 --> 00:09:36,180
lub sklep, który tworzymy tutaj. Dzięki temu Redux powinien zostać skonfigurowany, dzięki czemu będziemy mogli później

112
00:09:36,210 --> 00:09:42,120
skorzystać z niego tutaj z ekranu przeglądu produktów, a przy tym oczywiście kolejnym krokiem jest dodanie nawigacji, abyśmy

113
00:09:42,120 --> 00:09:47,190
mogli zobaczyć ten ekran przeglądu produktów. Kontynuujmy więc dalej te kroki.