1
00:00:02,360 --> 00:00:04,430
Jak możemy korzystać z naszego sklepu?

2
00:00:04,430 --> 00:00:11,240
Pamiętaj, że w końcu tutaj zarządzam posiłkami, a nie kategoriami, ponieważ nie planujemy żadnych działań,

3
00:00:11,240 --> 00:00:13,490
które by coś tam zmieniły,

4
00:00:13,670 --> 00:00:15,530
ale zarządzam tutaj posiłkami.

5
00:00:15,650 --> 00:00:22,990
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

6
00:00:23,110 --> 00:00:26,970
importu, a zamiast tego wyciągnąć dane z naszego sklepu, ponieważ różnica polega

7
00:00:26,980 --> 00:00:32,650
na tym, że możemy później dodać logikę, aby zmienić dane w naszym sklepie, podczas gdy dane zastępcze

8
00:00:32,650 --> 00:00:34,170
nigdy się nie zmienią.

9
00:00:34,180 --> 00:00:38,980
Powinniśmy więc zaimportować dane z naszego sklepu, abyśmy mogli następnie dodać logikę do manipulowania

10
00:00:39,280 --> 00:00:42,970
tymi danymi, na przykład w celu ograniczenia posiłków, które wyświetlamy.

11
00:00:42,980 --> 00:00:47,510
Gdzie zatem potrzebujemy posiłków? Na ekranie

12
00:00:47,510 --> 00:00:52,130
kategorii nie importujemy posiłków. Mamy kilka innych importów, których właściwie możemy się pozbyć, ale

13
00:00:52,130 --> 00:00:52,490
to

14
00:00:52,550 --> 00:00:53,840
tylko dodatkowa uwaga, nie importujemy posiłków.

15
00:00:53,870 --> 00:00:58,340
Kategorie mogą tam pozostać, ponieważ znowu nie będziemy mieli logiki,

16
00:00:58,490 --> 00:01:05,690
która to zmienia, więc możemy przejść dalej. Ekran kategorii posiłków to inna historia, tam importujemy posiłki, a teraz

17
00:01:05,690 --> 00:01:09,530
celem jest pozbycie się tego importu i wyjęcie posiłków ze sklepu Redux,

18
00:01:09,530 --> 00:01:16,640
a pytanie brzmi, jak to zrobić? Ponownie pomaga nam w tym pakiet React Redux. Z tego pakietu

19
00:01:16,730 --> 00:01:25,010
React Redux możemy coś zaimportować, możemy zaimportować hak, użyj haka selektora.

20
00:01:25,020 --> 00:01:32,210
To pozwala nam wybrać wycinek naszego stanu, naszego globalnie zarządzanego stanu i wykorzystać go w tym komponencie.

21
00:01:32,220 --> 00:01:36,660
Teraz używam haka tutaj, ponieważ pozwala nam to wykorzystać w komponencie

22
00:01:36,660 --> 00:01:42,480
funkcjonalnym, możesz również wiedzieć o innym podejściu, w którym faktycznie importujesz funkcję connect i zawijasz

23
00:01:42,480 --> 00:01:47,220
eksport i używasz stanu mapy do rekwizytów, wysyłki mapy do rekwizytów, to też

24
00:01:47,220 --> 00:01:49,010
możesz użyć, to

25
00:01:49,020 --> 00:01:51,560
absolutnie zadziała, ale jest to nieco szczuplejsze,

26
00:01:51,580 --> 00:01:56,140
więc pójdę tutaj z selektorem użycia. Po dodaniu tego, teraz, kiedy

27
00:01:56,260 --> 00:01:59,510
korzystamy z naszych posiłków, nie używamy ich w ten

28
00:01:59,710 --> 00:02:07,270
sposób, zamiast tego możemy je uzyskać za pomocą selektora użycia. Więc aby czerpać nasze wyświetlane posiłki, utworzę

29
00:02:07,270 --> 00:02:15,400
tutaj nową stałą, dostępną potrawę, może to nazwa zależy od ciebie i użyj selektora tutaj w ten sposób, ponieważ

30
00:02:15,400 --> 00:02:19,920
spowoduje to odzyskanie danych ze stanu i powrót to, więc

31
00:02:19,930 --> 00:02:25,450
to właśnie zapiszę tutaj w tej stałej, zwrócona wartość i selektor użycia przyjmują

32
00:02:26,110 --> 00:02:29,920
funkcję, która zostanie dla nas wykonana przez React Redux.

33
00:02:29,920 --> 00:02:36,430
Funkcja, która automatycznie pobiera stan jako argument, React Redux, który wykonuje dla nas funkcję, zapewni

34
00:02:36,430 --> 00:02:44,140
bieżący stan, aktualny stan Redux do tej funkcji, a następnie będzie w stanie zwrócić dowolne dane z tego

35
00:02:44,200 --> 00:02:48,810
stanu, z tego globalnego sklep, ze stanu globalnego i używam tych

36
00:02:48,850 --> 00:02:50,640
terminów zamiennie tutaj.

37
00:02:52,910 --> 00:02:56,380
Jak więc możemy pobrać dane z tego stanu tutaj w ciele

38
00:02:56,420 --> 00:03:01,370
funkcji, a ja używam tutaj zapisu strzałki skrótu, gdzie po prawej stronie strzałki jest ona automatycznie

39
00:03:01,370 --> 00:03:06,860
zwracana, jeśli nie jest owinięta nawiasami klamrowymi. Cóż, aby uzyskać dostęp do czegoś ze stanu,

40
00:03:06,860 --> 00:03:12,560
musimy wrócić do miejsca, w którym tworzymy sklep, tam przekazuję reduktor korzeni, który powstaje przez

41
00:03:12,560 --> 00:03:14,120
połączenie wszystkich reduktorów.

42
00:03:14,150 --> 00:03:17,250
Znów mamy tylko jeden, ale wyjaśniłem, dlaczego to zrobiłem.

43
00:03:17,300 --> 00:03:20,980
Teraz mamy ten klucz, posiłki, które całkowicie zależą od ciebie, możesz

44
00:03:20,990 --> 00:03:22,640
nazwać to, co chcesz.

45
00:03:22,640 --> 00:03:29,030
Dzięki temu wycinek naszego stanu zarządzany przez ten reduktor jest identyfikatorem i możemy

46
00:03:29,030 --> 00:03:32,950
teraz użyć tego identyfikatora, aby przejąć tę

47
00:03:33,020 --> 00:03:37,820
część naszego stanu, za którą ten reduktor jest odpowiedzialny.

48
00:03:37,820 --> 00:03:45,070
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

49
00:03:45,070 --> 00:03:51,210
mam dostęp do stanu. posiłki lub cokolwiek, co wybierzesz jako identyfikator w

50
00:03:51,310 --> 00:03:58,490
połączonych reduktorach, a następnie tutaj uzyskam dostęp do przefiltrowanych posiłków. Nie posiłki, które też tam chciałbym,

51
00:03:58,540 --> 00:04:03,380
mamy tu również posiłki, ale chcę uszanować wszelkie ustawione filtry.

52
00:04:03,450 --> 00:04:06,690
W tej chwili nie mamy logiki, aby

53
00:04:06,760 --> 00:04:12,970
je ustawić, ale z tym zmienimy w przyszłości, więc tutaj chcę dostać moje przefiltrowane posiłki, aby

54
00:04:12,970 --> 00:04:17,930
zawsze dostawać posiłki, które naprawdę powinienem być w stanie wyświetlić, posiłki, które

55
00:04:18,130 --> 00:04:25,420
szanują filtry ustawione przez użytkownika, a teraz są dostępne posiłki, które chcę jeszcze filtrować tutaj, aby znaleźć posiłek

56
00:04:25,420 --> 00:04:33,880
dla wybranej kategorii ID lub posiłki dla wybranej przeze mnie kategorii. Dzięki temu w tym pliku nie ma już

57
00:04:33,890 --> 00:04:39,500
wielkich liter posiłków, to wszystko jest po prostu małymi literami i

58
00:04:39,500 --> 00:04:45,890
pomyślnie pozbyliśmy się importu, przejdźmy teraz. Na ulubionym ekranie importujemy również posiłki i

59
00:04:45,890 --> 00:04:46,650
tak

60
00:04:46,670 --> 00:04:54,770
jak poprzednio, powinniśmy się tego pozbyć, więc zróbmy to. Zamiast tego, tak jak poprzednio, użyję selektora z React

61
00:04:54,770 --> 00:05:02,720
Redux, aby dostać moje posiłki ze sklepu, a zatem tutaj, gdzie używam posiłków, faktycznie dostaję dostępne posiłki za

62
00:05:02,720 --> 00:05:04,260
pomocą selektora użytkowania.

63
00:05:04,310 --> 00:05:10,370
Ponownie daje mi to stan i mogę uzyskać dostęp do stanu. posiłki. filtrowane posiłki, ale teraz tak

64
00:05:10,370 --> 00:05:11,240
naprawdę

65
00:05:11,240 --> 00:05:16,250
dla ulubionych, nie chcę szanować ustawionych filtrów, ponieważ moim zdaniem ma

66
00:05:16,250 --> 00:05:21,000
sens, że kiedy chcemy oglądać ulubione, zawsze widzimy wszystkie ulubione.

67
00:05:21,050 --> 00:05:25,930
Oczywiście możesz mieć inną logikę i wybrać przefiltrowane posiłki, ale użyję tutaj tylko

68
00:05:26,090 --> 00:05:28,490
posiłków, więc. posiłki. posiłki

69
00:05:28,520 --> 00:05:36,950
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

70
00:05:36,950 --> 00:05:37,940
właściwości posiłków w

71
00:05:40,820 --> 00:05:46,180
naszym kawałku stanu, ale oczywiście, jeśli spojrzysz na swój reduktor, to tylko częściowo

72
00:05:46,180 --> 00:05:51,050
ma sens, ponieważ my mamy ulubioną potrawę tutaj i rzeczywiście to robimy.

73
00:05:51,330 --> 00:05:58,260
Więc właściwie nie musimy już filtrować naszych ulubionych w ten sposób, a to i tak był tylko

74
00:05:58,260 --> 00:06:04,710
fikcyjny filtr, zawsze zabierał posiłki z m1 i m2 jako identyfikator, zamiast tego dla naszych ulubionych

75
00:06:04,760 --> 00:06:10,310
posiłków, możemy je po prostu uzyskać, uzyskując dostęp tutaj na naszych posiłkach zaznaczamy

76
00:06:10,310 --> 00:06:16,880
ulubione posiłki, więc ta właściwość, ponieważ później będziemy zarządzać ulubionymi posiłkami w oddzielnej tablicy w naszym

77
00:06:16,880 --> 00:06:18,280
sklepie, więc jest

78
00:06:18,290 --> 00:06:23,290
to jeszcze łatwiejsze, bardzo krótki kod. Dzięki temu pozbyliśmy się również importu posiłków

79
00:06:23,300 --> 00:06:25,460
tutaj, przejdźmy do ekranu filtrów.

80
00:06:25,460 --> 00:06:27,080
Nie ma tu importu

81
00:06:27,170 --> 00:06:29,840
posiłków, z drugiej strony jest ekran szczegółów posiłków.

82
00:06:29,840 --> 00:06:31,280
Więc tutaj chcę

83
00:06:31,310 --> 00:06:33,220
się go pozbyć, a

84
00:06:33,290 --> 00:06:39,800
teraz potrzebujemy tej właściwości innych posiłków, którą pokazałem sekundę temu, ponieważ ponownie tutaj możemy użyć

85
00:06:40,610 --> 00:06:51,720
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,

86
00:06:51,810 --> 00:06:59,280
ponieważ próbuję załadować pojedynczy posiłek według ID, a zatem moja podstawa, moja tablica, w której szukam tego identyfikatora,

87
00:06:59,370 --> 00:07:04,440
powinna oczywiście być tablica ze wszystkimi posiłkami i nie są filtrowane,

88
00:07:04,440 --> 00:07:09,900
ponieważ nie dbam o żadne ustawione filtry, tutaj szukam konkretnego posiłku o określonym

89
00:07:09,900 --> 00:07:16,140
identyfikatorze i chcę uzyskać pełną listę posiłków, dlatego potrzebujemy tego niefiltrowanego lista posiłków, którymi

90
00:07:16,140 --> 00:07:17,180
tu zarządzamy.

91
00:07:20,140 --> 00:07:27,880
Tak więc tutaj możemy teraz uzyskać nasze dostępne posiłki za pomocą selektora użycia i

92
00:07:27,880 --> 00:07:34,360
tam ponownie używamy posiłków państwowych. posiłki teraz za prawdziwe i teraz możemy użyć

93
00:07:34,420 --> 00:07:41,070
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

94
00:07:41,070 --> 00:07:44,090
teraz, gdy go widzę, ale w rzeczywistości będziemy mieć problem.

95
00:07:44,430 --> 00:07:51,780
Możesz zauważyć, że w nagłówku próbuję również znaleźć posiłek z tablicy posiłków i

96
00:07:51,780 --> 00:07:53,770
usuwamy ten import.

97
00:07:53,790 --> 00:07:59,010
Teraz problem występuje również w opcjach nawigacji, nie możemy użyć haka wyboru selektora, ponieważ można

98
00:07:59,010 --> 00:08:04,170
używać tylko haków wewnątrz innych haczyków lub elementów funkcjonalnych i to nie jest to,

99
00:08:04,170 --> 00:08:08,340
to normalna funkcja, a nie funkcjonalna składnik, a także nie hak.

100
00:08:08,340 --> 00:08:11,870
Nie możemy tutaj użyć selektora, aby to nie zadziałało.

101
00:08:11,900 --> 00:08:17,400
Teraz oczywiście możemy przywrócić import posiłków, ale byłoby to trochę tanie, ponieważ w rzeczywistych aplikacjach czasami

102
00:08:17,400 --> 00:08:22,710
będziesz mieć sytuację, w której potrzebujesz danych ze sklepu Redux w danych nawigacyjnych, a zatem w

103
00:08:22,710 --> 00:08:23,160
następnym

104
00:08:23,190 --> 00:08:28,470
wykładzie rozwiązać ten problem i upewnić się, że możemy również uzyskać dostęp do tego tutaj.