1
00:00:02,260 --> 00:00:08,030
Aby upewnić się, że możemy mieć również zamówienia w tej aplikacji, powtórzymy coś, co zrobiliśmy

2
00:00:08,050 --> 00:00:13,940
wcześniej, będziemy pracować na ekranie zamówień i będziemy pracować nad naszą logiką Redux, abyśmy mogli przechowywać zamówienia.

3
00:00:14,020 --> 00:00:15,980
Zacznę od

4
00:00:16,060 --> 00:00:22,060
dodania nowego reduktora, zamówień. plik js, który zawiera nasz reduktor zamówień i oczywiście będziemy potrzebować pliku działań,

5
00:00:22,060 --> 00:00:26,280
w którym zarządzamy naszymi działaniami związanymi z zamówieniami, zamówieniami. plik js również.

6
00:00:27,010 --> 00:00:33,910
Zacznijmy od zamówień. plik reduktorów js tu i znowu, jak zawsze, będziemy chcieli

7
00:00:33,910 --> 00:00:41,020
mieć tutaj jakiś stan początkowy, który również określa, w jaki sposób kształtują się w nim nasze dane, a zamówienia w tej

8
00:00:41,020 --> 00:00:42,640
aplikacji będą naprawdę proste,

9
00:00:42,640 --> 00:00:46,660
będzie to po prostu szereg zamówień , to naprawdę wszystko, czego potrzebujemy.

10
00:00:47,390 --> 00:00:53,630
Następnie możemy wyeksportować tutaj domyślną funkcję, która jest naszym reduktorem, który oczywiście ma stan zainicjowany

11
00:00:53,630 --> 00:01:00,830
ze stanem początkowym, który otrzymuje akcję i który oczywiście jest obsługiwany przez Redux i tutaj przywracamy nasz stan,

12
00:01:00,830 --> 00:01:01,520
ale

13
00:01:01,520 --> 00:01:07,580
oczywiście zazwyczaj, chcemy również włączyć typ akcji i obsługiwać tutaj kilka różnych przypadków, abyśmy

14
00:01:08,300 --> 00:01:13,350
mogli już dodać tę instrukcję przełączania. Jeśli chodzi o przypadki, które

15
00:01:13,380 --> 00:01:19,130
chcemy obsłużyć, działania, które chcemy obsłużyć, jest jedna czynność, którą chcę obsłużyć

16
00:01:19,130 --> 00:01:26,500
w tej chwili i to są moje działania dodawania zamówienia, więc dodanie zamówienia wygląda również jak

17
00:01:26,510 --> 00:01:34,390
odpowiedni identyfikator, a następnie wyeksportuję mój dodaj tutaj kreatora akcji zamówienia, który powinien otrzymać teraz dwie rzeczy

18
00:01:34,910 --> 00:01:40,450
- moje koszyki lub przedmioty, które są częścią zamówienia, ale są to

19
00:01:40,550 --> 00:01:47,180
moje koszyki na końcu i oczywiście całkowita kwota i to oczywiście wszystkie dane, które

20
00:01:47,180 --> 00:01:52,550
mamy w koszyku w końcu udaje nam się w koszyku, prawda?

21
00:01:52,550 --> 00:01:58,760
Mamy całkowitą kwotę koszyka i mamy elementy koszyka, a ponieważ zamawiamy cały koszyk, oczywiście

22
00:01:58,760 --> 00:02:03,380
ma sens, że dane te kończą się w kolejności.

23
00:02:03,520 --> 00:02:08,900
Teraz tutaj, w kreatorze akcji, zwracamy nasz nowy obiekt akcji, a

24
00:02:08,900 --> 00:02:17,240
ten obiekt akcji ma typ dodawania zamówienia, a następnie na przykład klucz danych zamówienia, w którym łączymy nasze elementy koszyka,

25
00:02:17,240 --> 00:02:23,270
przechowujemy je we właściwości elementów koszyka, a następnie kwoty zawiera na przykład całkowitą kwotę.

26
00:02:23,270 --> 00:02:29,660
Teraz to od Ciebie zależy, czy przekażesz to w jednej połączonej właściwości danych zamówienia, czy też masz

27
00:02:30,140 --> 00:02:33,690
dwie lub więcej właściwości jako część obiektu akcji.

28
00:02:33,720 --> 00:02:37,710
To jest akcja, z powrotem do reduktora, co powinno się stać, kiedy otrzymamy zamówienie?

29
00:02:38,580 --> 00:02:45,040
Cóż, chcę stworzyć nowy obiekt zamówienia i do tego, podobnie jak poprzednio, będę pracować z własnymi modelami.

30
00:02:45,090 --> 00:02:52,110
Przejdźmy więc do folderu modeli i tam dodaj zamówienia. plik js, w którym mamy zamówienie klasy, które

31
00:02:52,110 --> 00:02:52,800
wyeksportuję,

32
00:02:52,830 --> 00:02:58,890
aby ponownie tego nie zapomnieć, i tam otrzymujemy konstruktor, który pozwala nam utworzyć nowe zamówienie.

33
00:02:58,890 --> 00:03:04,700
Jak powinno wyglądać zamówienie? Zamówienie powinno mieć oczywiście identyfikator, który nie

34
00:03:04,770 --> 00:03:10,970
jest identyfikatorem produktu, ponieważ możemy oczywiście zamówić ten sam produkt wiele razy, a zatem zamówienie jest całkowicie odłączone.

35
00:03:11,040 --> 00:03:13,650
Ponadto zamówienie może zawierać więcej niż jeden

36
00:03:13,650 --> 00:03:16,380
produkt, w końcu zamawiamy tam cały nasz koszyk.

37
00:03:16,380 --> 00:03:18,570
Więc zamówienie ma samodzielny

38
00:03:18,750 --> 00:03:26,160
identyfikator, otrzyma przedmioty, całkowitą kwotę i zamówienie również wymaga oczywiście daty, ponieważ kiedy robimy zamówienie, chcemy

39
00:03:26,160 --> 00:03:29,430
przechowywać tę datę w momencie jego złożenia.

40
00:03:29,940 --> 00:03:31,500
A potem zapiszę wszystkie

41
00:03:31,500 --> 00:03:42,160
te dane, uzyskam mój identyfikator, zdobędę tutaj moje przedmioty, uzyskam całkowitą kwotę, a także datę. Dzięki temu wróćmy do reduktora, do reduktora zamówień i zobaczmy,

42
00:03:42,170 --> 00:03:49,310
co możemy zrobić z zamówieniami tam. Tam chcę teraz zająć się sprawą

43
00:03:49,340 --> 00:03:53,260
dodawania kolejności, która jest jedyną działaniem, jaką mam.

44
00:03:53,270 --> 00:04:01,140
Musisz oczywiście zaimportować ten identyfikator akcji i tam chcę utworzyć nowe zamówienie, zapisać je w

45
00:04:01,160 --> 00:04:01,820
nowej

46
00:04:01,820 --> 00:04:07,960
stałej zamówienia z właśnie utworzonym modelem zamówienia, który również musisz zaimportować.

47
00:04:08,030 --> 00:04:14,030
Teraz dzięki nowemu słowu kluczowemu możemy utworzyć nowy obiekt JavaScript na podstawie tej klasy i tam

48
00:04:14,180 --> 00:04:17,330
potrzebujemy identyfikatora, przedmiotów, łącznej kwoty i daty utworzenia.

49
00:04:17,330 --> 00:04:23,040
Teraz, jak widać, otrzymujemy tylko przedmioty i łączną kwotę w ramach naszej akcji.

50
00:04:23,240 --> 00:04:28,630
Teraz identyfikator jest czymś, co później wygenerujemy dynamicznie na serwerze,

51
00:04:28,640 --> 00:04:36,530
na razie użyję fikcyjnego pseudo unikalnego identyfikatora z nową datą na ciąg, data oczywiście jest wbudowanym

52
00:04:36,560 --> 00:04:42,140
obiektem Javascript, a to generuje identyfikator, który jest swego rodzaju unikalny.

53
00:04:42,140 --> 00:04:48,230
Technicznie rzecz biorąc, moglibyśmy utworzyć dwa zamówienia dokładnie w tym samym znaczniku czasu, dokładnie w tej samej milisekundie, chociaż w

54
00:04:48,230 --> 00:04:52,340
naszej aplikacji, w której wyczyszczamy koszyk po naciśnięciu przycisku Dodaj zamówienie lub zamów teraz,

55
00:04:52,340 --> 00:04:54,230
to naprawdę nie będzie możliwe.

56
00:04:54,230 --> 00:04:57,470
To jest na razie dobry identyfikator manekina, powinien to być

57
00:04:57,470 --> 00:04:59,050
ciąg znaków, więc to

58
00:05:00,110 --> 00:05:06,170
ważne, a poza tym oczywiście przedmioty, które można przechowywać. Rozumiemy to po naszej akcji, prawda,

59
00:05:06,170 --> 00:05:10,770
akcja ma tę właściwość danych zamówienia i tam będziemy mieć przedmioty.

60
00:05:11,060 --> 00:05:16,580
Więc dane dotyczące kolejności działań. Przedmioty dają nam przedmioty i za całkowitą kwotę możemy

61
00:05:16,580 --> 00:05:17,280
użyć akcji.

62
00:05:17,330 --> 00:05:20,250
orderData.

63
00:05:20,450 --> 00:05:23,810
a następnie mamy tę właściwość kwoty, którą możemy wyodrębnić, abyśmy

64
00:05:23,810 --> 00:05:25,650
mogli z niej skorzystać.

65
00:05:25,850 --> 00:05:31,700
Na koniec, oczywiście, dla tej daty, oczywiście chcę wygenerować znacznik czasu z nową datą,

66
00:05:31,700 --> 00:05:37,730
ten wbudowany konstruktor JavaScript, jeśli wykonamy go w ten sposób, daje nam bieżący znacznik czasu

67
00:05:37,940 --> 00:05:41,060
przechowywany w obiekcie JavaScript na końcu.

68
00:05:41,060 --> 00:05:46,700
Teraz to nowe zamówienie musi zostać dodane do naszej tablicy zamówień, więc zwracamy tutaj nową migawkę

69
00:05:47,000 --> 00:05:48,960
stanu, w której kopiujemy stary

70
00:05:49,010 --> 00:05:53,650
stan, ponownie nie mamy tutaj żadnego innego stanu, więc kopiowanie jest zbędne, jeśli

71
00:05:53,750 --> 00:05:55,410
zastąpimy tak czy inaczej,

72
00:05:55,460 --> 00:06:01,160
ale na wypadek gdybyś miał tutaj bardziej złożoną migawkę stanu dla tego fragmentu swojego sklepu Redux, powinieneś

73
00:06:01,160 --> 00:06:04,550
upewnić się, że skopiujesz drugi stan, aby go nie utracić.

74
00:06:04,550 --> 00:06:11,510
Dlatego dodam go tutaj, a następnie ustawiam zamówienia równe zamówieniom stanu i teraz wywołuję concat na tej tablicy,

75
00:06:11,510 --> 00:06:17,450
która jest wbudowaną funkcją Javascript, która dodaje nowy element do tablicy i zwraca nową tablicę zawierającą

76
00:06:17,450 --> 00:06:18,530
ten element.

77
00:06:18,560 --> 00:06:24,040
Tak więc stara tablica pozostaje nietknięta, nowa tablica jest zwracana i to oczywiście pozwala nam ją aktualizować w

78
00:06:24,040 --> 00:06:29,450
niezmienny sposób, w którym nigdy nie dotykamy oryginalnych danych, ale ustawiamy nowy stan, tworząc zupełnie nową tablicę, która

79
00:06:29,450 --> 00:06:36,590
zawiera nowy obiekt i tam po prostu łączę moje nowe zamówienie. Dzięki temu

80
00:06:36,770 --> 00:06:45,590
możemy przejść do aplikacji. plik js i zaimportuj tam reduktor zamówień z folderu

81
00:06:45,590 --> 00:06:52,040
sklepu, folderu reduktorów i tam zamówień. Plik js oczywiście i scalmy to z

82
00:06:52,100 --> 00:06:57,750
naszym głównym reduktorem, być może z identyfikatorem zamówień, a następnie wskazując na reduktor zamówień.

83
00:06:57,780 --> 00:07:04,160
Teraz powinno to być dostępne, a teraz możemy wysyłać akcje, a mianowicie tutaj nasza akcja dodawania zamówienia i

84
00:07:04,230 --> 00:07:11,740
oczywiście dotknij tego stanu, aby wyciąć i uzyskać nasze zamówienia. Wysyłanie akcji jest pierwszą rzeczą, którą chcę

85
00:07:11,740 --> 00:07:18,220
zrobić. Chcę to zrobić z poziomu ekranu koszyka, kiedy naciśniemy teraz ten przycisk zamówienia.

86
00:07:18,220 --> 00:07:19,990
W tej chwili nic tam

87
00:07:20,020 --> 00:07:26,790
nie robimy, teraz celem jest złożenie zamówienia i wyczyszczenie naszego koszyka. Tak więc tutaj, na ekranie

88
00:07:26,800 --> 00:07:33,270
koszyka, już importujemy użycie wysyłki i wykonujemy ją, abyśmy mieli funkcję wysyłki.

89
00:07:33,340 --> 00:07:45,490
Wszystko, co musimy zatem zrobić, to zaimportować wszystko jako akcje zamówień z zamówień akcji w sklepie, dlatego też nazwy

90
00:07:45,520 --> 00:07:50,140
tych akcji zamówień będą super precyzyjne, a

91
00:07:50,290 --> 00:07:57,450
teraz tutaj, kiedy klikniemy ten przycisk, przycisk zamówienia teraz, możemy wykonać

92
00:07:57,450 --> 00:08:05,500
w tej funkcji wysyłamy akcję Redux, akcję rozkazy, dodajemy zamówienie za pomocą tego

93
00:08:05,580 --> 00:08:10,500
kreatora akcji. Teraz musimy przekazać dwie rzeczy - przedmioty w koszyku i całkowitą kwotę. Oczywiście oba są

94
00:08:10,500 --> 00:08:16,680
dostępne tutaj, całkowita kwota jest przechowywana w stałej stałej wartości koszyka, pozycje w koszyku są

95
00:08:16,680 --> 00:08:23,580
tutaj, więc po prostu przekazujemy dalej, przekazujemy całkowitą kwotę koszyka i powinien to być drugi argument, więc

96
00:08:23,580 --> 00:08:32,420
tak naprawdę pierwszy argument przedmioty w koszyku, takie jak to. Teraz proszę zauważyć, że dzięki temu oczywiście przesyłam przedmioty z koszyka, jestem

97
00:08:32,430 --> 00:08:37,620
magazynowaniem przedmiotów z koszyka, które są w tablicy, a nie w formacie, który mam w

98
00:08:37,620 --> 00:08:40,310
moim sklepie Redux. Tam mam

99
00:08:40,380 --> 00:08:48,130
jakiś przedmiot, ale przechowywanie takiej tablicy przedmiotów w koszyku w porządku powinno być w

100
00:08:48,130 --> 00:08:52,500
porządku, więc nie muszę też dostawać tego niezmienionego

101
00:08:52,510 --> 00:08:53,340
obiektu,

102
00:08:53,340 --> 00:08:56,690
pozostanę przy tablicy, którą teraz przechowuję.

103
00:08:56,720 --> 00:08:58,460
Więc teraz wysyłamy to, aby je

104
00:08:58,460 --> 00:09:00,860
wyświetlić, musimy oczywiście dodać ekran zamówień, a do

105
00:09:00,980 --> 00:09:06,140
tego chcę również dodać przycisk menu i szufladę, która pozwala nam się tam dostać jako alternatywa dla

106
00:09:06,140 --> 00:09:07,520
ekranów naszych sklepów tutaj.