Aby upewnić się, że możemy mieć również zamówienia w tej aplikacji, powtórzymy coś, co zrobiliśmy
wcześniej, będziemy pracować na ekranie zamówień i będziemy pracować nad naszą logiką Redux, abyśmy mogli przechowywać zamówienia.
Zacznę od
dodania nowego reduktora, zamówień. plik js, który zawiera nasz reduktor zamówień i oczywiście będziemy potrzebować pliku działań,
w którym zarządzamy naszymi działaniami związanymi z zamówieniami, zamówieniami. plik js również.
Zacznijmy od zamówień. plik reduktorów js tu i znowu, jak zawsze, będziemy chcieli
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
aplikacji będą naprawdę proste,
będzie to po prostu szereg zamówień , to naprawdę wszystko, czego potrzebujemy.
Następnie możemy wyeksportować tutaj domyślną funkcję, która jest naszym reduktorem, który oczywiście ma stan zainicjowany
ze stanem początkowym, który otrzymuje akcję i który oczywiście jest obsługiwany przez Redux i tutaj przywracamy nasz stan,
ale
oczywiście zazwyczaj, chcemy również włączyć typ akcji i obsługiwać tutaj kilka różnych przypadków, abyśmy
mogli już dodać tę instrukcję przełączania. Jeśli chodzi o przypadki, które
chcemy obsłużyć, działania, które chcemy obsłużyć, jest jedna czynność, którą chcę obsłużyć
w tej chwili i to są moje działania dodawania zamówienia, więc dodanie zamówienia wygląda również jak
odpowiedni identyfikator, a następnie wyeksportuję mój dodaj tutaj kreatora akcji zamówienia, który powinien otrzymać teraz dwie rzeczy
- moje koszyki lub przedmioty, które są częścią zamówienia, ale są to
moje koszyki na końcu i oczywiście całkowita kwota i to oczywiście wszystkie dane, które
mamy w koszyku w końcu udaje nam się w koszyku, prawda?
Mamy całkowitą kwotę koszyka i mamy elementy koszyka, a ponieważ zamawiamy cały koszyk, oczywiście
ma sens, że dane te kończą się w kolejności.
Teraz tutaj, w kreatorze akcji, zwracamy nasz nowy obiekt akcji, a
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,
przechowujemy je we właściwości elementów koszyka, a następnie kwoty zawiera na przykład całkowitą kwotę.
Teraz to od Ciebie zależy, czy przekażesz to w jednej połączonej właściwości danych zamówienia, czy też masz
dwie lub więcej właściwości jako część obiektu akcji.
To jest akcja, z powrotem do reduktora, co powinno się stać, kiedy otrzymamy zamówienie?
Cóż, chcę stworzyć nowy obiekt zamówienia i do tego, podobnie jak poprzednio, będę pracować z własnymi modelami.
Przejdźmy więc do folderu modeli i tam dodaj zamówienia. plik js, w którym mamy zamówienie klasy, które
wyeksportuję,
aby ponownie tego nie zapomnieć, i tam otrzymujemy konstruktor, który pozwala nam utworzyć nowe zamówienie.
Jak powinno wyglądać zamówienie? Zamówienie powinno mieć oczywiście identyfikator, który nie
jest identyfikatorem produktu, ponieważ możemy oczywiście zamówić ten sam produkt wiele razy, a zatem zamówienie jest całkowicie odłączone.
Ponadto zamówienie może zawierać więcej niż jeden
produkt, w końcu zamawiamy tam cały nasz koszyk.
Więc zamówienie ma samodzielny
identyfikator, otrzyma przedmioty, całkowitą kwotę i zamówienie również wymaga oczywiście daty, ponieważ kiedy robimy zamówienie, chcemy
przechowywać tę datę w momencie jego złożenia.
A potem zapiszę wszystkie
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,
co możemy zrobić z zamówieniami tam. Tam chcę teraz zająć się sprawą
dodawania kolejności, która jest jedyną działaniem, jaką mam.
Musisz oczywiście zaimportować ten identyfikator akcji i tam chcę utworzyć nowe zamówienie, zapisać je w
nowej
stałej zamówienia z właśnie utworzonym modelem zamówienia, który również musisz zaimportować.
Teraz dzięki nowemu słowu kluczowemu możemy utworzyć nowy obiekt JavaScript na podstawie tej klasy i tam
potrzebujemy identyfikatora, przedmiotów, łącznej kwoty i daty utworzenia.
Teraz, jak widać, otrzymujemy tylko przedmioty i łączną kwotę w ramach naszej akcji.
Teraz identyfikator jest czymś, co później wygenerujemy dynamicznie na serwerze,
na razie użyję fikcyjnego pseudo unikalnego identyfikatora z nową datą na ciąg, data oczywiście jest wbudowanym
obiektem Javascript, a to generuje identyfikator, który jest swego rodzaju unikalny.
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
naszej aplikacji, w której wyczyszczamy koszyk po naciśnięciu przycisku Dodaj zamówienie lub zamów teraz,
to naprawdę nie będzie możliwe.
To jest na razie dobry identyfikator manekina, powinien to być
ciąg znaków, więc to
ważne, a poza tym oczywiście przedmioty, które można przechowywać. Rozumiemy to po naszej akcji, prawda,
akcja ma tę właściwość danych zamówienia i tam będziemy mieć przedmioty.
Więc dane dotyczące kolejności działań. Przedmioty dają nam przedmioty i za całkowitą kwotę możemy
użyć akcji.
orderData.
a następnie mamy tę właściwość kwoty, którą możemy wyodrębnić, abyśmy
mogli z niej skorzystać.
Na koniec, oczywiście, dla tej daty, oczywiście chcę wygenerować znacznik czasu z nową datą,
ten wbudowany konstruktor JavaScript, jeśli wykonamy go w ten sposób, daje nam bieżący znacznik czasu
przechowywany w obiekcie JavaScript na końcu.
Teraz to nowe zamówienie musi zostać dodane do naszej tablicy zamówień, więc zwracamy tutaj nową migawkę
stanu, w której kopiujemy stary
stan, ponownie nie mamy tutaj żadnego innego stanu, więc kopiowanie jest zbędne, jeśli
zastąpimy tak czy inaczej,
ale na wypadek gdybyś miał tutaj bardziej złożoną migawkę stanu dla tego fragmentu swojego sklepu Redux, powinieneś
upewnić się, że skopiujesz drugi stan, aby go nie utracić.
Dlatego dodam go tutaj, a następnie ustawiam zamówienia równe zamówieniom stanu i teraz wywołuję concat na tej tablicy,
która jest wbudowaną funkcją Javascript, która dodaje nowy element do tablicy i zwraca nową tablicę zawierającą
ten element.
Tak więc stara tablica pozostaje nietknięta, nowa tablica jest zwracana i to oczywiście pozwala nam ją aktualizować w
niezmienny sposób, w którym nigdy nie dotykamy oryginalnych danych, ale ustawiamy nowy stan, tworząc zupełnie nową tablicę, która
zawiera nowy obiekt i tam po prostu łączę moje nowe zamówienie. Dzięki temu
możemy przejść do aplikacji. plik js i zaimportuj tam reduktor zamówień z folderu
sklepu, folderu reduktorów i tam zamówień. Plik js oczywiście i scalmy to z
naszym głównym reduktorem, być może z identyfikatorem zamówień, a następnie wskazując na reduktor zamówień.
Teraz powinno to być dostępne, a teraz możemy wysyłać akcje, a mianowicie tutaj nasza akcja dodawania zamówienia i
oczywiście dotknij tego stanu, aby wyciąć i uzyskać nasze zamówienia. Wysyłanie akcji jest pierwszą rzeczą, którą chcę
zrobić. Chcę to zrobić z poziomu ekranu koszyka, kiedy naciśniemy teraz ten przycisk zamówienia.
W tej chwili nic tam
nie robimy, teraz celem jest złożenie zamówienia i wyczyszczenie naszego koszyka. Tak więc tutaj, na ekranie
koszyka, już importujemy użycie wysyłki i wykonujemy ją, abyśmy mieli funkcję wysyłki.
Wszystko, co musimy zatem zrobić, to zaimportować wszystko jako akcje zamówień z zamówień akcji w sklepie, dlatego też nazwy
tych akcji zamówień będą super precyzyjne, a
teraz tutaj, kiedy klikniemy ten przycisk, przycisk zamówienia teraz, możemy wykonać
w tej funkcji wysyłamy akcję Redux, akcję rozkazy, dodajemy zamówienie za pomocą tego
kreatora akcji. Teraz musimy przekazać dwie rzeczy - przedmioty w koszyku i całkowitą kwotę. Oczywiście oba są
dostępne tutaj, całkowita kwota jest przechowywana w stałej stałej wartości koszyka, pozycje w koszyku są
tutaj, więc po prostu przekazujemy dalej, przekazujemy całkowitą kwotę koszyka i powinien to być drugi argument, więc
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
magazynowaniem przedmiotów z koszyka, które są w tablicy, a nie w formacie, który mam w
moim sklepie Redux. Tam mam
jakiś przedmiot, ale przechowywanie takiej tablicy przedmiotów w koszyku w porządku powinno być w
porządku, więc nie muszę też dostawać tego niezmienionego
obiektu,
pozostanę przy tablicy, którą teraz przechowuję.
Więc teraz wysyłamy to, aby je
wyświetlić, musimy oczywiście dodać ekran zamówień, a do
tego chcę również dodać przycisk menu i szufladę, która pozwala nam się tam dostać jako alternatywa dla
ekranów naszych sklepów tutaj.