1
00:00:02,570 --> 00:00:08,780
Stan może być złożony i należy to zrozumieć, aby zrozumieć, które problemy rozwiązania

2
00:00:08,780 --> 00:00:12,220
stanu, takie jak Redux, faktycznie rozwiązują.

3
00:00:12,320 --> 00:00:17,930
Gdybyśmy mieli taką aplikację, która nie jest aplikacją, którą zbudowaliśmy, ale która mogłaby być aplikacją, którą tworzysz, w

4
00:00:17,930 --> 00:00:23,180
której masz dwa różne obszary, jeden, w którym zarządzasz użytkownikami, gdzie użytkownicy mogą się logować, gdzie użytkownicy

5
00:00:23,180 --> 00:00:28,100
mogą zarządzać swoimi pulpit nawigacyjny, zobacz ich pulpit nawigacyjny itd. i taki, w którym masz produkty

6
00:00:28,100 --> 00:00:30,100
na liście, które użytkownicy mogą

7
00:00:30,100 --> 00:00:35,480
dodawać do koszyka, wówczas obszary te nie są w rzeczywistości całkowicie niezależne, ale w Twojej aplikacji będą renderowane

8
00:00:35,480 --> 00:00:38,290
na różnych ekranach, więc są całkiem oddzielone od wzajemnie.

9
00:00:38,630 --> 00:00:44,630
Ale pytanie, czy użytkownik jest zalogowany, którego potrzebujesz tutaj, może mieć znaczenie również w innej

10
00:00:44,630 --> 00:00:46,100
części aplikacji

11
00:00:46,280 --> 00:00:52,550
i teraz, zwykle trzeba przekazywać te dane ręcznie przez rekwizyty, przekazując je z komponentu A

12
00:00:52,550 --> 00:00:57,930
do B do C do D aż do E, gdzie może być to

13
00:00:57,970 --> 00:01:00,490
potrzebne, nie jest to zbyt wygodne.

14
00:01:00,500 --> 00:01:06,980
Zamiast tego chcesz mieć konfigurację aplikacji, w której coś się zmienia, na przykład użytkownik loguje się lub

15
00:01:06,980 --> 00:01:07,900
w naszej

16
00:01:07,910 --> 00:01:15,080
aplikacji do posiłków, ustawiasz określony filtr i zapisujesz go, a następnie informacje te są propagowane w Twojej aplikacji i

17
00:01:15,080 --> 00:01:19,420
automatycznie przekazywane do miejsc tam, gdzie jest to potrzebne, ale nie

18
00:01:19,520 --> 00:01:26,120
za pomocą rekwizytów, ale z kilkoma mechanizmami za kulisami, które pomagają ci w tym i właśnie tam Redux

19
00:01:26,120 --> 00:01:31,370
jest powszechnym rozwiązaniem używanym w aplikacjach React i React Native do zarządzania tym stanem.

20
00:01:31,370 --> 00:01:33,170
Jak działa Redux?

21
00:01:33,200 --> 00:01:38,420
Przede wszystkim Redux to biblioteka innej firmy, którą można dodać do React Native, aby z

22
00:01:38,450 --> 00:01:45,050
niej korzystać, a wszystko to o posiadaniu centralnego sklepu. Redux wprowadza centralny magazyn w pamięci, a nie

23
00:01:45,110 --> 00:01:51,950
w bazie danych, ale jest w pamięci, w pamięci Javascript, aby powiedzieć, gdzie jest stan twojej aplikacji, więc

24
00:01:51,950 --> 00:01:58,070
dane, od których zależą różne części aplikacji, mogą być przechowywane, a następnie, gdy w jednym komponencie,

25
00:01:58,070 --> 00:01:59,280
masz coś,

26
00:01:59,330 --> 00:02:03,740
co chce zmanipulować ten stan, na przykład ustawiamy filtr lub oznaczamy

27
00:02:03,770 --> 00:02:10,610
posiłek jako ulubiony, a następnie wysyłamy tak zwaną akcję, jest to wstępnie zdefiniowany pakiet informacyjny, który można powiedzieć,

28
00:02:10,610 --> 00:02:15,840
mając pewien schemat, który może być obsługiwany przez Redux zgodnie z twoją konfiguracją.

29
00:02:15,860 --> 00:02:20,800
Ta akcja dociera do tak zwanego reduktora, a ty będziesz tym, który pisze reduktor

30
00:02:20,810 --> 00:02:25,270
jako programista, dzięki czemu możesz kontrolować, jaki rodzaj akcji akceptuje reduktor, więc jakiego

31
00:02:26,060 --> 00:02:32,180
rodzaju pakiet informacji wymaga twój reduktor, a następnie reduktor otrzymuje akcję i wyprowadza nowy stan na podstawie

32
00:02:32,480 --> 00:02:39,670
starego stanu, który następnie aktualizuje ten centralnie przechowywany stan. Więc reduktor jest w stanie zaktualizować

33
00:02:39,660 --> 00:02:42,500
stan na końcu.

34
00:02:42,500 --> 00:02:48,080
A kiedy ten sklep się zmieni, gdy stan w nim się zmieni, możesz również mieć subskrypcje

35
00:02:48,080 --> 00:02:53,050
tego sklepu z innych składników, subskrypcje te zostaną uruchomione, gdy twój sklep, twój stan

36
00:02:53,090 --> 00:02:57,340
się zmieni, a zaktualizowany stan zostanie następnie przekazany do miejsc w Twojej

37
00:02:57,380 --> 00:03:01,040
aplikacji, więc dla składników, które są zainteresowane tymi zmianami, na

38
00:03:01,040 --> 00:03:05,720
przykład ten składnik może być zainteresowany niektórymi aktualizacjami, więc może skonfigurować subskrypcję i

39
00:03:05,900 --> 00:03:08,190
zostanie poinformowany o aktualizacji i uzyskać

40
00:03:08,190 --> 00:03:14,130
nowy stan poprzez jej aktualizację rekwizyty lub też z hakami React, jak dowiesz się w tym module.

41
00:03:14,240 --> 00:03:19,620
Tak działa Redux i taka jest idea Redux.

42
00:03:19,700 --> 00:03:27,020
Teraz jedna ważna uwaga, jeśli bardziej zagłębiasz się w React, prawdopodobnie znasz także interfejs API React Context,

43
00:03:27,050 --> 00:03:29,770
który jest wbudowany w React.

44
00:03:29,810 --> 00:03:36,980
Można to również wykorzystać w przypadku niektórych scen za kulisami i zarządzania danymi, ale nie jest to dobry zamiennik dla wszystkich

45
00:03:36,980 --> 00:03:39,710
przypadków użycia, w których korzystasz z Redux.

46
00:03:39,710 --> 00:03:45,160
Nie zagłębię się tutaj w to, ponieważ tak naprawdę nie jest to kurs na temat różnych konstrukcji React,

47
00:03:45,170 --> 00:03:50,930
zamiast tego chcemy nauczyć się tutaj React Native, ale w załączeniu, znajdziesz trochę zasobów, które pomogą ci w tym

48
00:03:50,930 --> 00:03:58,030
porównaniu między React Context API a Redux i kiedy go używać. W tym module użyjemy Reduksa, który jest bardzo elastyczny, z

49
00:03:58,050 --> 00:04:02,490
którego możemy zdecydowanie korzystać i pokażę ci, jak skonfigurować go przy pomocy React

50
00:04:02,490 --> 00:04:05,870
Native i jak możesz wtedy z nim pracować.