1
00:00:02,290 --> 00:00:08,140
Nasze podejście tutaj oczywiście działa. Przechowujemy dane wejściowe w pewnym stanie,

2
00:00:08,140 --> 00:00:16,090
przechowujemy ważność w pewnym stanie i moglibyśmy zarządzać ważnością dla wszystkich naszych danych wejściowych i po prostu mieć tutaj

3
00:00:16,120 --> 00:00:21,370
nasze różne funkcje obsługi zmian dla naszych różnych danych wejściowych, które by działały.

4
00:00:21,370 --> 00:00:26,560
Przy okazji jedna ważna uwaga, ponieważ sprawdzam ważność tytułu tutaj w module obsługi przesyłania,

5
00:00:26,770 --> 00:00:29,950
oczywiście powinniśmy również dodać go tam jako zależność, więc

6
00:00:29,950 --> 00:00:35,820
tytuł jest ważny, należy tam dodać jako zależność w wywołaniu zwrotnym użycia tablica zależności, to ważne,

7
00:00:35,830 --> 00:00:36,980
w przeciwnym

8
00:00:37,030 --> 00:00:40,570
razie ta funkcja nie zostanie odbudowana, gdy ta ważność ulegnie

9
00:00:40,660 --> 00:00:47,970
zmianie, co oznacza, że nie będziemy mogli jej później przesłać. Problem z naszym obecnym podejściem polega na

10
00:00:47,970 --> 00:00:55,410
tym, że zarządzamy różnymi stanami, aby przechowywać dane wejściowe dla różnych danych wejściowych, a następnie mamy również

11
00:00:55,410 --> 00:01:00,910
różne stany ważności, przynajmniej potencjalnie, jeśli zaczniemy zarządzać naszą ważnością, taką jak ta

12
00:01:00,990 --> 00:01:07,400
i dla bardzo dużych formularzy, oczywiście to oznacza dużo kopiowania i wklejania, dużo zarządzania stanem.

13
00:01:07,410 --> 00:01:15,300
Teraz, jeśli masz tak wiele stanów, które są w pewien sposób połączone, możesz to zrobić w bardziej elegancki

14
00:01:15,330 --> 00:01:18,500
sposób, zamiast mieć osobne stany dla każdego

15
00:01:18,540 --> 00:01:25,720
wejścia, możesz mieć jeden duży stan, który scala wszystkie wartości wejściowe i który łączy wszystkie ważności

16
00:01:25,740 --> 00:01:33,720
a następnie zastosuj koncepcję zwaną reduktorem, a nie reduktorem Redux, ale obsługiwaną przez React out of box, aby zarządzać

17
00:01:33,720 --> 00:01:34,710
tym stanem.

18
00:01:34,710 --> 00:01:40,210
Robisz to za pomocą haka reduktora, który znowu nie ma nic wspólnego z Redux, koncepcja

19
00:01:40,440 --> 00:01:47,550
reduktora nie jest wyłączna dla Redux, reduktor na końcu jest tylko funkcją, która pobiera dane wejściowe i wydziela część

20
00:01:47,580 --> 00:01:52,800
mocy, a zatem React obsługuje to również a zobaczysz, jak możesz to teraz wykorzystać

21
00:01:52,920 --> 00:01:54,190
w tym wykładzie.

22
00:01:54,900 --> 00:01:57,510
Więc jaki jest pomysł reduktora? Teraz najpierw ważne jest, aby

23
00:01:57,510 --> 00:02:03,030
zrozumieć, że użycie reduktora jest hakiem, który pomaga w zarządzaniu stanem. Zwykle używasz go, jeśli masz

24
00:02:03,090 --> 00:02:09,420
połączone stany lub bardziej złożony stan i nie chcesz mieć wielu indywidualnych wywołań stanu

25
00:02:09,600 --> 00:02:16,340
użytkowania i kilku pojedynczych stanów, którymi zarządzasz. Następnie możesz użyć reduktora i oto jak

26
00:02:16,350 --> 00:02:17,510
to działa.

27
00:02:19,060 --> 00:02:25,530
Zaczynasz od utworzenia reduktora, powiedzmy tutaj reduktora formularzy, możesz nazwać go jak chcesz i pamiętaj, że tworzę go

28
00:02:25,570 --> 00:02:29,020
poza moim komponentem formy, możesz to zrobić, ale jeśli

29
00:02:29,020 --> 00:02:33,940
nie zależy od rekwizytów, możesz to zrobić poza tym obszarem, aby nie odbudować go

30
00:02:33,940 --> 00:02:39,250
przy każdym cyklu ponownego renderowania i nie musisz nawet używać wywołania zwrotnego, co oczywiście również

31
00:02:39,280 --> 00:02:44,110
kosztuje pewną wydajność, jeśli go użyjesz. Więc używaj go poza nim,

32
00:02:44,110 --> 00:02:49,690
buduj poza nim, aby uniknąć niepotrzebnego odtwarzania tej funkcji, a teraz reduktor, podobnie jak

33
00:02:49,690 --> 00:02:57,100
reduktor pobiera bieżący stan i akcję, ale znowu nie jest związany z Redux, nie jest używany przez Redux, funkcje

34
00:02:57,360 --> 00:03:02,240
reduktora zawsze działają w taki sposób. Teraz tam znowu, podobnie jak w

35
00:03:02,310 --> 00:03:07,260
reduktorze Redux, ponieważ znowu działają w ten sposób, możesz sprawdzić różne typy

36
00:03:07,260 --> 00:03:11,520
akcji, a tutaj chcę sprawdzić jeden typ, to też po

37
00:03:11,520 --> 00:03:12,680
prostu użyj

38
00:03:12,690 --> 00:03:15,440
instrukcji if, możesz użyć instrukcji case switch

39
00:03:15,750 --> 00:03:19,260
i że sprawdzam akcję. wpisz tutaj, zależy

40
00:03:19,290 --> 00:03:24,030
ode mnie, możesz nazwać to, co chcesz, ponieważ to ty będziesz

41
00:03:24,030 --> 00:03:29,800
wysyłał akcję później, a tutaj sprawdzam akcję aktualizacji, która jest również identyfikatorem, który wybrałem

42
00:03:29,820 --> 00:03:39,050
i który podobnie jak w Redux, możesz również przechowuj ten identyfikator w autonomicznej stałej tutaj, abyś mógł mieć tutaj akcję aktualizacji reduktora, na

43
00:03:39,620 --> 00:03:45,850
przykład identyfikator aktualizacji reduktora w ten sposób i użyj go zamiast tego tutaj, jeśli chcesz

44
00:03:45,920 --> 00:03:48,260
i możesz nazwać to, co chcesz.

45
00:03:48,380 --> 00:03:57,180
Więc teraz sprawdzam tę akcję, a jeśli ta akcja wystąpi, chcę zapisać wartość wejściową i zweryfikować ją, ale aby to zrozumieć, musimy

46
00:03:57,340 --> 00:04:00,850
zrozumieć, w jaki sposób korzystamy z reduktora formularzy.

47
00:04:00,920 --> 00:04:05,510
Więc zostawmy na chwilę tak i przejdźmy do samego komponentu, tutaj

48
00:04:05,600 --> 00:04:08,950
zaczynamy konfigurować nasz stan formularza tutaj, więc

49
00:04:08,960 --> 00:04:15,200
tutaj chcę wywołać reduktor użytkownika, a teraz użyć reduktora weź taką funkcję reduktora, więc przekażę

50
00:04:15,200 --> 00:04:19,540
mój reduktor formularzy, który ustawiłem tutaj i który jest jeszcze niedokończony.

51
00:04:19,940 --> 00:04:24,990
Użyj reduktora bierze również opcjonalny drugi argument, którym jest stan początkowy,

52
00:04:24,990 --> 00:04:30,860
który chcesz przekazać i który może być dowolny, ale tutaj przekażę obiekt JavaScript,

53
00:04:30,860 --> 00:04:38,630
a stan początkowy, którego chcę tutaj użyć, to w końcu obiekt, który ma wartości wejściowe, które są

54
00:04:38,630 --> 00:04:39,990
kolejnym zagnieżdżonym

55
00:04:40,220 --> 00:04:46,670
obiektem, który wkrótce zapełnię, ważności wejściowe, które również są zagnieżdżonymi obiektami i być może

56
00:04:46,670 --> 00:04:49,610
ogólna poprawność formy, nazwiję, że forma

57
00:04:49,620 --> 00:04:55,700
jest poprawna, co początkowo jest fałszywe, powiedzmy. To jest teraz mój stan początkowy, który tu

58
00:04:55,700 --> 00:05:03,260
przekazuję i to stan, który później chcę zmienić z wnętrza reduktora formularzy. Teraz na wartościach wejściowych możemy na przykład dodać nasz tytuł i to

59
00:05:03,260 --> 00:05:06,070
od Ciebie zależy, jak go nazwiesz, który jest

60
00:05:06,070 --> 00:05:11,150
początkowo pustym ciągiem powiedzmy, że będą to wartości początkowe, które chcę ustawić na moich danych wejściowych, to

61
00:05:11,150 --> 00:05:15,980
będzie w koniec zastąp moje zarządzanie stanem tam, gdzie ręcznie przechowuję dane wejściowe w różnych stanach.

62
00:05:15,980 --> 00:05:20,220
Teraz połączę to wszystko w jeden obiekt zarządzany przez ten reduktor.

63
00:05:20,480 --> 00:05:25,610
Mam więc tutaj swój tytuł i faktycznie nie zawsze jest on pusty, ale w rzeczywistości jest

64
00:05:25,610 --> 00:05:27,410
pusty tylko wtedy, gdy nie

65
00:05:27,410 --> 00:05:31,140
mamy edytowanego produktu, więc skopiuję ten czek i użyję go tutaj.

66
00:05:31,370 --> 00:05:34,590
Teraz to samo oczywiście dla imageUrl, tam zainicjowałem

67
00:05:35,410 --> 00:05:40,150
to za pomocą edytowanego produktu. imageUrl, jeśli jest dostępny, a poza tym

68
00:05:40,150 --> 00:05:40,930
używam

69
00:05:40,930 --> 00:05:43,540
pustego ciągu, w zasadzie to, co tam zrobiłem.

70
00:05:44,110 --> 00:05:48,030
I oczywiście robię to samo dla opisu, tutaj chcę sprawdzić,

71
00:05:48,070 --> 00:05:52,990
czy edytowany produkt jest ustawiony i używam tego opisu lub ustawiam go

72
00:05:53,080 --> 00:05:59,410
na pusty ciąg, jeśli nie jest dostępny. Wreszcie mamy cenę, a ja zawsze mam pusty

73
00:05:59,410 --> 00:06:02,450
ciąg, ponieważ albo nie potrzebujemy go w

74
00:06:02,470 --> 00:06:05,830
przypadku edytowanego produktu, to nie dbam o jego

75
00:06:05,860 --> 00:06:08,140
wartość lub potrzebujemy go,

76
00:06:08,140 --> 00:06:15,020
cóż, to i tak chcę zainicjować go pustą wartością. Teraz oczywiście każde wejście ma również ważność, więc możemy dodawać tytuł tutaj i

77
00:06:15,020 --> 00:06:16,790
ponownie sprawdzać, czy edytowany Produkt jest

78
00:06:16,850 --> 00:06:19,010
ustawiony, jeśli jest ustawiony, to wiem, że edytuję,

79
00:06:19,040 --> 00:06:21,320
więc będziemy wstępnie wypełniać tytuł, więc początkowo będzie być

80
00:06:21,320 --> 00:06:22,700
poprawne, więc w tym

81
00:06:22,700 --> 00:06:24,950
przypadku moja początkowa wartość byłaby prawdziwa, w przeciwnym

82
00:06:24,950 --> 00:06:32,250
razie będzie fałszywa, a teraz jest to również coś, co możemy powtórzyć dla imageUrl. Jeśli mamy edytowany produkt, wiemy, że został on wstępnie

83
00:06:32,250 --> 00:06:33,080
wypełniony,

84
00:06:33,080 --> 00:06:36,650
dlatego początkowo będzie ważny, więc ustawimy to na

85
00:06:36,650 --> 00:06:39,550
true, w przeciwnym razie ustawię na false.

86
00:06:39,740 --> 00:06:44,420
W moim opisie jest to to samo - prawda lub fałsz, a

87
00:06:44,540 --> 00:06:46,760
cena jest równa, oczywiście,

88
00:06:46,760 --> 00:06:49,090
jeśli nie edytujemy ceny, jeśli edytujemy,

89
00:06:49,100 --> 00:06:55,200
ale jeśli edytujemy, to i tak nie dbam o cenę ponieważ nie będzie to zmienne.

90
00:06:55,310 --> 00:07:00,890
Dlatego wiem, że jeśli edytuję, powinienem traktować to jako prawidłowe, ponieważ i tak nie można go zmienić

91
00:07:00,890 --> 00:07:02,420
i dlatego nie dbam

92
00:07:02,440 --> 00:07:09,680
o te dane wejściowe, ale nie chcę blokować przesyłania formularzy z powodu ustawienia wartości false, gdy i tak nie mogę go edytować.

93
00:07:09,980 --> 00:07:13,110
Więc ustawię to na prawdę, jeśli nie jest planowana edycja,

94
00:07:13,190 --> 00:07:18,770
jeśli nie edytujemy produktu, ale dodajemy jeden, cena będzie edytowalna i dlatego zaczniemy w stanie fałszywym, ponieważ wprowadzona cena

95
00:07:18,770 --> 00:07:24,230
będzie początkowo być pustym, właśnie to tutaj konfigurujemy. A teraz ogólna ważność formularza, cóż, jeszcze

96
00:07:24,320 --> 00:07:26,150
raz mogę sprawdzić, czy

97
00:07:26,150 --> 00:07:31,130
mamy edytowany produkt, co oznacza, że edytujemy, to formularz jest prawdziwy, formularz jest

98
00:07:31,130 --> 00:07:33,590
początkowo ważny, w przeciwnym razie początkowo

99
00:07:33,590 --> 00:07:39,240
jest fałszywy, jeśli dodajemy nowy produkt . Teraz jest to mój stan początkowy,

100
00:07:39,260 --> 00:07:45,050
teraz ta funkcja reduktora powinna być w stanie zmienić ten stan, gdy akcje są wywoływane,

101
00:07:45,050 --> 00:07:48,660
a akcja powinna być wywoływana bez względu na

102
00:07:48,730 --> 00:07:58,190
to, co wpisujemy w jednym z naszych danych wejściowych, który będzie wyzwalaczem. Dlatego możemy teraz pozbyć się tutaj wszystkich tych przypisań stanu,

103
00:07:58,220 --> 00:08:05,780
a zatem możemy również pozbyć się całego importu stanu użycia, a nawet upewnić się, że wysyłamy akcję

104
00:08:05,790 --> 00:08:09,610
aktualizacji reduktora dla każdego naciśnięcia klawisza na wejściu.

105
00:08:09,710 --> 00:08:18,670
Więc tutaj w module obsługi zmiany tytułu, ja w końcu usunę ten kod, na razie zostawiam opcję sprawdzania if, ale na razie nie

106
00:08:18,740 --> 00:08:22,770
będę tam żadnego kodu, zamiast tego chcę wysłać aktualizację reduktora

107
00:08:22,790 --> 00:08:28,960
a teraz odbywa się to w wyniku wywołania reduktora użycia, ponieważ reduktor użycia oczywiście zwraca

108
00:08:28,960 --> 00:08:35,000
coś, tak jak zrobił to stan użycia. Zwraca również tablicę zawierającą dokładnie dwa elementy

109
00:08:35,000 --> 00:08:40,710
i dlatego możemy ją zniszczyć za pomocą tej składni niszczącej tablicę, której użyliśmy również

110
00:08:40,730 --> 00:08:47,450
w stanie użycia i tam otrzymuję stan formularza jako pierwszą wartość, a funkcję wysyłania jako drugą

111
00:08:47,450 --> 00:08:48,250
wartość.

112
00:08:48,290 --> 00:08:55,280
To zawsze skorzysta z reduktora, migawki stanu, która aktualizuje się oczywiście za każdym razem, gdy ją zmienisz, więc za

113
00:08:55,280 --> 00:08:55,770
każdym

114
00:08:55,790 --> 00:09:01,490
razem, gdy ją zmienisz, ten komponent ponownie się poda i da ci nową migawkę stanu

115
00:09:01,550 --> 00:09:07,160
i funkcję, wysyłanie na końcu jest funkcją który umożliwia wysyłanie akcji przeciwko temu reduktorowi.

116
00:09:07,250 --> 00:09:11,760
Oczywiście możesz nazwać te dwa elementy, jak chcesz, ale myślę, że

117
00:09:11,780 --> 00:09:13,270
to rozsądne nazewnictwo,

118
00:09:13,280 --> 00:09:20,100
to jest nasza migawka stanu, to jest funkcja. Nawiasem mówiąc, wysyłka to nazwa, której już użyłem tutaj z

119
00:09:20,100 --> 00:09:24,460
Redux, więc tutaj nadam nazwę temu formularzowi wysyłki, aby uniknąć kolizji nazw, możesz nazwać

120
00:09:24,480 --> 00:09:25,980
ją tak, jak chcesz.

121
00:09:26,760 --> 00:09:33,350
Zatem w formularzu obsługi zmiany tytułu można teraz użyć stanu formularza wysyłki, po prostu go wywołuję i

122
00:09:33,410 --> 00:09:39,170
muszę przekazać tam obiekt opisujący moją akcję, a ten obiekt będzie miał właściwość type,

123
00:09:39,170 --> 00:09:40,820
nie trzeba mieć

124
00:09:40,820 --> 00:09:46,130
właściwości type , możesz nazwać ten identyfikator lub identyfikator lub cokolwiek zechcesz, ale

125
00:09:46,130 --> 00:09:52,010
używam tutaj typu, ponieważ faktycznie sprawdzam właściwość type wewnątrz mojej funkcji reduktora, a ta funkcja

126
00:09:52,010 --> 00:09:59,260
reduktora będzie wykonywana dla każdej nowej akcji, którą wywołasz. Więc jeśli tam wrócę, typem będzie aktualizacja reduktora,

127
00:09:59,500 --> 00:10:07,650
a może lepszą nazwą będzie aktualizacja formularza, tak myślę, więc tego też użyję tutaj tutaj i tutaj, więc

128
00:10:07,650 --> 00:10:10,830
aktualizacja formularza, może formularz wejściowy aktualizacja, nazwa

129
00:10:10,830 --> 00:10:18,750
oczywiście zależy od ciebie, ale powinna być jasna o tym, co robi, więc tutaj będę również miał

130
00:10:18,750 --> 00:10:19,790
aktualizację

131
00:10:19,800 --> 00:10:22,110
danych wejściowych formularza, tak, to

132
00:10:22,180 --> 00:10:23,280
wygląda dobrze.

133
00:10:23,280 --> 00:10:24,510
Więc formularz aktualizacji

134
00:10:24,510 --> 00:10:26,120
danych wejściowych, to jest to,

135
00:10:26,130 --> 00:10:27,600
co tam wysłałem, musimy go

136
00:10:27,600 --> 00:10:33,100
również tutaj zmienić i oczywiście możesz również przekazać dowolne inne dane, których możesz chcieć użyć w swoim reduktorze, a

137
00:10:33,210 --> 00:10:38,250
ja mam kilka innych danych, które chcę posługiwać się. To byłaby wartość, a ja po prostu nadam

138
00:10:38,250 --> 00:10:39,270
jej nazwę, tę

139
00:10:39,300 --> 00:10:40,730
właściwość, możesz nazwać ją tak,

140
00:10:40,740 --> 00:10:42,390
jak chcesz, to jest tekst,

141
00:10:42,420 --> 00:10:48,490
który został wprowadzony, więc po prostu przesyłam ją do reduktora, abyśmy mogli zapisać ją w naszym stanie tam i ważność

142
00:10:48,490 --> 00:10:49,400
tego wejścia.

143
00:10:49,470 --> 00:11:02,110
Tak więc tutaj dodam właściwie poprawny rekwizyt, który początkowo powiedzmy, że jest fałszywy, a teraz usunę ten inny przypadek i sprawdzę, czy mamy tutaj więcej niż zero, co

144
00:11:02,110 --> 00:11:07,480
oznaczałoby, że powinien być prawdziwy, ponieważ wtedy ustawiłem jest poprawny równa

145
00:11:07,480 --> 00:11:12,850
się true, w przeciwnym razie pozostanie fałszywa, a dzięki temu możemy

146
00:11:12,850 --> 00:11:19,050
również dodać jest poprawny jako klucz do akcji i przekazać wartość przechowywaną w naszej

147
00:11:19,060 --> 00:11:20,230
poprawnej zmiennej

148
00:11:20,350 --> 00:11:26,320
i będzie to początkowo fałsz, ale jeśli nasza długość wejściowa dla tytułu jest

149
00:11:26,320 --> 00:11:35,230
większe od zera, wtedy faktycznie będzie to prawda i teraz oczywiście musimy również poinformować nasz reduktor, które wejście to spowodowało.

150
00:11:35,330 --> 00:11:43,730
Więc dodam tutaj pole wejściowego identyfikatora lub po prostu dane wejściowe, cokolwiek chcesz i użyję tytułu tutaj, a ten klucz powinien być

151
00:11:43,730 --> 00:11:49,670
kluczem, który masz również w swoim stanie, tak jak tutaj w wartościach wejściowych i ważnościach

152
00:11:49,790 --> 00:11:54,800
wejściowych, ponieważ pozwoli to napisać kod reduktora, który wkrótce zrobimy, który jest

153
00:11:54,890 --> 00:12:01,920
wysoce wielokrotnego użytku i bardzo elastyczny, ponieważ teraz możemy zrobić kolejny krok i upewnić się, że przekształcimy go

154
00:12:01,920 --> 00:12:09,210
w funkcję, która faktycznie działa dla wszystkich danych wejściowych i która jest naprawdę elastyczna pod względem jak z tego

155
00:12:09,210 --> 00:12:10,080
korzystamy.