1
00:00:02,250 --> 00:00:08,070
Będziemy kontynuować pracę nad aplikacją, którą zbudowaliśmy w ostatnim module kursu, z naszymi przepisami

2
00:00:08,070 --> 00:00:15,070
tutaj i filtrami, które moglibyśmy ustawić itd. Są dwie rzeczy, które musimy dodać tam, gdzie będziemy potrzebować Redux.

3
00:00:15,090 --> 00:00:21,870
Jednym z nich jest to, że możemy oznaczyć przepis jako ulubiony, klikając tę ikonę gwiazdy, że to faktycznie oznacza to jako ulubiony

4
00:00:21,870 --> 00:00:27,900
i że dla jednej z nich zmieniamy również tę ikonę, aby pokazać, czy jest ona już ulubiona, czy nie, ale

5
00:00:27,900 --> 00:00:28,980
co ważniejsze, że

6
00:00:28,980 --> 00:00:35,400
możemy zobaczyć ten przepis jako ulubiony tutaj w zakładce ulubionych. Inną rzeczą, w której będziemy potrzebować

7
00:00:35,400 --> 00:00:41,280
Redux, jest tutaj, w filtrach, kiedy ustawimy filtr, a następnie zapiszemy go, oczywiście

8
00:00:41,280 --> 00:00:49,080
powinno to mieć wpływ na posiłki, które ładujemy tutaj, w naszej karcie posiłków na liście posiłki, kiedy

9
00:00:49,080 --> 00:00:51,470
wybieramy kategorię. Tam

10
00:00:51,500 --> 00:00:58,880
należy to odzwierciedlić, co ustawiliśmy na filtrach. Więc nad tym pracujemy, do czego potrzebujemy Redux i

11
00:00:58,880 --> 00:01:02,300
do tego, zainstalujmy Redux i zacznijmy od tego.

12
00:01:03,350 --> 00:01:07,760
Aby rozpocząć pracę z Redux, opuszczę tutaj mój

13
00:01:07,760 --> 00:01:12,830
serwer expo, proces uruchamiania npm, zamknę go tymczasowo i zainstaluję

14
00:01:12,860 --> 00:01:15,030
pakiet, a to będzie

15
00:01:15,110 --> 00:01:22,460
Redux, a oprócz Redux, musimy również zainstalować React Redux, ponieważ to wymagane również do pracy

16
00:01:22,460 --> 00:01:23,760
z Redux.

17
00:01:23,780 --> 00:01:28,700
Tak więc oba pakiety muszą zostać zainstalowane tutaj, a podczas ich instalacji możemy już

18
00:01:28,700 --> 00:01:34,280
zacząć trochę pracować nad naszymi plikami kodu, ponieważ w tym projekcie chcę teraz dodać nowy folder i

19
00:01:34,280 --> 00:01:35,780
jest to folder sklepu.

20
00:01:35,780 --> 00:01:40,810
Teraz możesz nazwać ten folder, jak chcesz, nie musi on nosić nazwy sklep, Redux nie

21
00:01:41,000 --> 00:01:46,970
ma znaczenia, ale jest to folder, w którym chcę zarządzać moją konfiguracją Redux, ponieważ Redux dotyczy całego

22
00:01:46,970 --> 00:01:48,390
centralnego magazynu stanów.

23
00:01:48,530 --> 00:01:56,150
Więc tutaj, w tym folderze sklepu, możemy teraz zacząć od Redux i nie będę omawiał Redux w najdrobniejszych szczegółach tutaj,

24
00:01:56,150 --> 00:01:57,230
mam kompletny

25
00:01:57,260 --> 00:02:02,510
kurs React i Redux do tego, jeśli chcesz poznać tajniki tego, na przykład

26
00:02:02,570 --> 00:02:08,450
ten kurs faktycznie zakładam wcześniejszą znajomość React i Redux, dlatego będzie to tylko krótkie odświeżenie.

27
00:02:09,890 --> 00:02:14,980
Redux w końcu dotyczy reduktorów, akcji, a następnie budowy sklepu opartego na tych reduktorach

28
00:02:14,980 --> 00:02:16,010
i akcjach.

29
00:02:16,360 --> 00:02:23,230
Teraz, w tym folderze sklepu, dodam folder akcji i dodam folder reduktorów, w rzeczywistości w tym projekcie będzie

30
00:02:23,320 --> 00:02:29,320
tylko jedna akcja i jeden plik reduktora, ale jeśli masz więcej plików, oddzielne podfoldery mogą

31
00:02:29,320 --> 00:02:34,180
być dobrym pomysłem na utrzymanie porządku i dlatego tworzę je tutaj, chociaż

32
00:02:34,180 --> 00:02:39,820
dla tej prostej aplikacji nie potrzebowalibyśmy tego, ponieważ nie będziemy mieć tak wielu plików.

33
00:02:39,880 --> 00:02:44,230
Zacznijmy od reduktora. W folderze

34
00:02:44,350 --> 00:02:52,630
reduktora dodam moje posiłki. plik js i to jest plik, w którym poszedłem zarządzać logiką aktualizacji stanu

35
00:02:52,630 --> 00:02:53,310
reduktora posiłków.

36
00:02:53,410 --> 00:02:58,750
To jest koniec pliku, w którym napiszemy logikę oznaczania posiłku jako

37
00:02:58,750 --> 00:03:01,330
ulubionego i zarządzania naszymi filtrami.

38
00:03:01,430 --> 00:03:04,700
Teraz reduktor w React jest tylko funkcją, więc

39
00:03:04,700 --> 00:03:10,550
tutaj utworzę funkcję, nadam jej nazwę reduktor posiłków, nazwa zależy wyłącznie od Ciebie i ta funkcja

40
00:03:10,610 --> 00:03:17,360
faktycznie otrzyma dwa argumenty - stan, bieżący stan migawki, na którym możesz zbudować i uzyskaj nowy stan, ponieważ

41
00:03:17,360 --> 00:03:22,250
reduktor w końcu będzie musiał zwrócić nowy stan, który jest następnie przejmowany przez

42
00:03:22,370 --> 00:03:24,860
Redux i przechowywany w jego sklepie.

43
00:03:24,860 --> 00:03:30,230
Dostajesz więc aktualny, stary stan tutaj i dostajesz akcję, ponieważ funkcja reduktora jest tutaj wykonywana

44
00:03:30,230 --> 00:03:31,940
przez Redux za każdym

45
00:03:31,940 --> 00:03:36,710
razem, gdy nowa akcja jest wysyłana, a zatem uzyskujemy dostęp do akcji tutaj, abyśmy

46
00:03:36,710 --> 00:03:40,370
mogli dowiedzieć się, czy musimy działać i co musimy zrobić.

47
00:03:40,520 --> 00:03:44,960
Więc w ramach tej funkcji, w końcu musisz przywrócić nowy stan, w najprostszej formie, co

48
00:03:44,960 --> 00:03:49,220
oczywiście oznacza, że przywrócimy bieżący stan, co z drugiej strony oznacza, że ten reduktor

49
00:03:49,220 --> 00:03:52,470
nie robi nic użytecznego, ale zrobimy to Zmień to.

50
00:03:52,650 --> 00:03:58,170
Teraz, kiedy uruchamiamy naszą aplikację po raz pierwszy, chcemy również ustawić początkowy stan,

51
00:03:58,170 --> 00:04:00,000
który jest używany początkowo,

52
00:04:00,000 --> 00:04:06,510
tak aby inicjował nasz stan po uruchomieniu tej aplikacji i dodam tutaj nową stałą stanu

53
00:04:06,510 --> 00:04:14,970
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ż

54
00:04:15,120 --> 00:04:22,060
będziemy potrzebować zarówno - listy wszystkich posiłków, jak i listy posiłków, które pasują do filtrów ustawionych przez

55
00:04:22,060 --> 00:04:31,130
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

56
00:04:31,130 --> 00:04:31,610
tylko

57
00:04:31,670 --> 00:04:34,800
jedno z możliwych podejść, które możesz tutaj zastosować,

58
00:04:34,830 --> 00:04:40,340
z pewnością możemy znaleźć inne sposoby zarządzania naszymi danymi tutaj, ale podoba mi się ten.

59
00:04:40,590 --> 00:04:53,140
Teraz w tym pliku będę potrzebować danych fikcyjnych moich posiłków, więc zaimportuję posiłki z mojego folderu danych i

60
00:04:53,140 --> 00:04:59,860
tam z danych fikcyjnych. plik js i zainicjuję tutaj posiłki za pomocą tablicy danych manekina posiłków.

61
00:05:00,550 --> 00:05:06,220
Filtrowane posiłki są również inicjalizowane, ponieważ początkowo po uruchomieniu tej aplikacji

62
00:05:06,330 --> 00:05:11,840
nie mamy skonfigurowanych filtrów. Z drugiej strony ulubione posiłki to początkowo pusta tablica, ponieważ ponownie, gdy aplikacja się

63
00:05:11,840 --> 00:05:13,130
uruchomi, nie będziemy mieć ulubionych posiłków.

64
00:05:13,130 --> 00:05:18,230
Oczywiście w prawdziwej aplikacji możesz zapisać ten stan na serwerze, aby gdy użytkownik zamknął

65
00:05:18,230 --> 00:05:21,400
aplikację i wrócił później, nie zaczynasz od zera, ale

66
00:05:21,470 --> 00:05:23,230
nie zrobimy tego tutaj, Nauczę

67
00:05:23,240 --> 00:05:28,580
się, jak dotrzeć do serwera i zapisywać dane tam i ładować dane stamtąd w osobnych

68
00:05:28,610 --> 00:05:29,440
modułach

69
00:05:29,460 --> 00:05:33,040
w dalszej części tego kursu, tutaj skupimy się na Redux.

70
00:05:33,140 --> 00:05:39,170
To jest mój stan początkowy, tutaj w tej funkcji możemy teraz użyć składni Javascript, w której

71
00:05:39,230 --> 00:05:44,690
przypisujemy nasz stan początkowy jako domyślną wartość argumentu state, co oznacza, że gdy ta

72
00:05:44,690 --> 00:05:51,290
funkcja reduktora działa, a stan jest niezdefiniowany, to jest w przypadku, gdy Redux uruchamia nasz reduktor po

73
00:05:51,590 --> 00:05:53,700
raz pierwszy, zaczniemy od

74
00:05:53,750 --> 00:05:56,330
tego stanu początkowego, dzięki czemu automatycznie

75
00:05:56,330 --> 00:06:02,760
załadujemy nasz stan początkowy, że tak powiem, ponieważ kiedy Redux się uruchomi i uruchomi, nastąpi jedno działanie

76
00:06:02,790 --> 00:06:07,910
początkowe, które jest kiedyś przebiegł przez reduktor, a następnie załaduje nasz stan początkowy.

77
00:06:07,980 --> 00:06:14,160
Dzięki temu możemy pracować z pewnym stanem początkowym, co jest miłe, ale samo w sobie nie pomaga

78
00:06:14,160 --> 00:06:16,190
nam zbytnio. Na razie jednak

79
00:06:16,200 --> 00:06:17,070
podłączmy

80
00:06:17,250 --> 00:06:23,640
teraz ten reduktor do Redux, abyśmy mogli faktycznie korzystać z naszego sklepu Redux wszędzie w aplikacji, zanim

81
00:06:23,640 --> 00:06:30,860
zaczniemy wywoływać akcje i robić bardziej przydatne rzeczy w reduktorze. Dlatego tutaj na razie po prostu wyeksportuję

82
00:06:30,860 --> 00:06:39,890
reduktor posiłków jako domyślny tu i teraz w aplikacji. js, czyli plik, w którym uruchamia się

83
00:06:39,890 --> 00:06:42,190
cała nasza aplikacja,

84
00:06:42,230 --> 00:06:47,960
musimy skonfigurować nasz sklep Redux. W

85
00:06:48,080 --> 00:06:57,270
tym celu importujemy tworzenie sklepu z Redux.

86
00:06:57,510 --> 00:07:02,010
Ponadto będziemy musieli stamtąd zaimportować reduktory kombajnów.

87
00:07:02,010 --> 00:07:06,090
To pozwala nam teraz stworzyć sklep, potrzebujemy tylko naszego reduktora,

88
00:07:06,090 --> 00:07:12,610
więc tutaj zaimportuję mój reduktor posiłków z i teraz wskażę folder sklepu, folder reduktorów i

89
00:07:12,610 --> 00:07:15,280
tam posiłki. plik js,

90
00:07:15,330 --> 00:07:26,520
a teraz może tutaj, możemy stworzyć nasz sklep tutaj, wywołując create store. Teraz tworzenie sklepu ma na końcu reduktor,

91
00:07:26,640 --> 00:07:31,910
który musisz przekazać. Teraz oczywiście mamy reduktor i możemy

92
00:07:31,920 --> 00:07:36,780
to przekazać, ale w większych aplikacjach możesz mieć więcej niż jeden reduktor, ponieważ

93
00:07:36,780 --> 00:07:43,710
często masz reduktory dla różnych obszarów funkcji aplikacji, jeden do uwierzytelniania, jeden dla Twoich produktów, jeden powiedzmy, że

94
00:07:43,710 --> 00:07:49,740
obszar wsparcia Twojej aplikacji i musisz połączyć wszystkie te pojedyncze reduktory, te różne reduktory w jeden

95
00:07:49,800 --> 00:07:53,970
reduktor główny i to właśnie działa funkcja połączonych reduktorów, znowu tutaj

96
00:07:54,000 --> 00:07:58,800
nie będziemy go potrzebować, ponieważ mamy tylko jeden reduktor ale aby pokazać

97
00:07:58,800 --> 00:08:01,060
wam podejście, które można zastosować

98
00:08:01,140 --> 00:08:07,890
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

99
00:08:07,890 --> 00:08:14,460
kombinatory reduktorów, połączone reduktory biorą obiekt JavaScript, w którym teraz mapujemy nasze pojedyncze reduktory, nasze różne

100
00:08:14,460 --> 00:08:16,130
reduktory na klucze.

101
00:08:16,130 --> 00:08:21,870
Na przykład tutaj moglibyśmy brać posiłki za klucz, ale ta nazwa zależy wyłącznie od Ciebie i łączysz to

102
00:08:22,740 --> 00:08:24,900
z reduktorem posiłków, tak jak to.

103
00:08:24,900 --> 00:08:32,760
To, co to robi, to w końcu łączy ten reduktor posiłków z tym reduktorem korzeni, a później będziemy mogli

104
00:08:32,760 --> 00:08:37,380
pracować ze stanem zarządzanym przez reduktor posiłków, więc z tym

105
00:08:37,380 --> 00:08:43,440
stanem, który jest inicjowany w ten sposób, za pomocą tych posiłków będziemy mogli uzyskać dostęp

106
00:08:43,440 --> 00:08:44,900
do tego stanu,

107
00:08:44,910 --> 00:08:49,630
tego fragmentu stanu z tą właściwością później, ale zobaczycie to wszystko.

108
00:08:49,740 --> 00:08:54,780
To jest nasz reduktor roota, a teraz musimy tylko przejść reduktor roota, aby stworzyć

109
00:08:54,780 --> 00:08:57,900
sklep, to daje nam sklep i co teraz?

110
00:08:57,900 --> 00:09:03,210
Teraz ten sklep musi zostać dostarczony do naszej aplikacji i do tego

111
00:09:03,240 --> 00:09:06,960
potrzebujemy innego pakietu, który zainstalowaliśmy, czyli React Redux.

112
00:09:07,170 --> 00:09:18,300
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,

113
00:09:18,390 --> 00:09:25,200
który przechowuje wszystkie inne komponenty, które ostatecznie będą wchodzić w interakcje z naszym sklepem, a nawigator

114
00:09:25,200 --> 00:09:30,000
posiłków jest do tego całkiem dobry, ponieważ zawiera wszystkie nasze

115
00:09:30,060 --> 00:09:36,420
ekrany, więc zawiera wszystkie komponenty, które w końcu będziemy potrzebować, aby wywołać działania lub uzyskać

116
00:09:36,480 --> 00:09:44,230
dostęp do naszego stanu, więc przeczytaj nasz stan. Dlatego tutaj owijamy komponent dostawcy wokół nawigatora posiłków, a

117
00:09:44,230 --> 00:09:50,440
teraz dostawca bierze jedną ważną właściwość, jeden rekwizyt, który musisz przekazać, i jest to rekwizyt sklepu

118
00:09:50,680 --> 00:09:54,590
i oczywiście tam, jako wartość, którą przekazujemy nasz sklep tutaj.

119
00:09:54,640 --> 00:10:01,660
Tak więc ten stały sklep, w którym znajduje się utworzony sklep, jest przekazywany do dostawcy rekwizytów i za kulisami, daje

120
00:10:01,660 --> 00:10:07,990
nam to wszystko, czego potrzebujemy teraz do interakcji z Redux, ze sklepem Redux w dowolnym komponencie, dowolnym

121
00:10:08,050 --> 00:10:11,520
ekranie lub dowolnym innym komponencie w naszej aplikacji .

122
00:10:13,360 --> 00:10:18,630
Teraz pozwól mi zrestartować to z uruchomieniem npm i na razie nie zrobi to

123
00:10:18,630 --> 00:10:21,430
dużej różnicy, ale nasza aplikacja z pewnością

124
00:10:21,430 --> 00:10:29,140
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,

125
00:10:29,170 --> 00:10:38,370
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

126
00:10:38,730 --> 00:10:44,860
na iOS i jestem całkiem pewien, że ładuje się również dobrze na Androidzie, tak, to też działa.

127
00:10:44,890 --> 00:10:46,890
Więc teraz skonfigurowano Redux,

128
00:10:46,900 --> 00:10:49,990
nasz sklep został zainicjowany, ale go nie używamy.

129
00:10:49,990 --> 00:10:54,520
Tak więc, w następnym kroku, upewnijmy się, że korzystamy z naszego sklepu, zanim zajmiemy się działaniami i

130
00:10:54,520 --> 00:10:56,200
wykonamy prawdziwą pracę w reduktorze.