Aby skonfigurować Redux, zastosuję to samo podejście, co wcześniej na kursie, dodam folder
sklepu i tam będę miał moje działania na miejscu. plik js i mój reduktor miejsc. plik js.
To oczywiście trochę
inne niż wcześniej, tam miałem podfolder akcji i
reduktorów, możesz absolutnie zrobić to
samo tutaj, ponieważ mam tylko jedną akcję i jedną reduktor, zachowam to
w dwóch plikach, ale możesz
mieć podfoldery i tak dalej, to zależy od Ciebie. Teraz w reduktorze miejsc zdefiniuję, jak powinien wyglądać mój stan dla
tej części mojego stanu całkowitego, a to będzie
bardzo proste, mój stan początkowy tutaj to tylko obiekt Javascript, w którym chcę mieć pusty klucz miejsca
, pusta tablica na początku, bo będę miał tablicę miejsc i to wszystko.
Tak więc tutaj mogę wyeksportować tę funkcję reduktora, która przyjmuje stan ustawiony na stan początkowy, jeśli żaden
inny stan nie zostanie przekazany i działanie, i na razie, po prostu przywrócę ten stan, wkrótce oczywiście „ Dodam logikę do
obsługi różnych działań i na przykład dodaj nowe miejsce. W pliku akcji miejsc wyeksportuję nową stałą,
dodam miejsce, które jest jednym identyfikatorem akcji, którego potrzebuję i dodam funkcję kreatora akcji, dodam miejsce, które powinno
zająć trochę danych o miejscu i dla chwila, to tylko tytuł, później będzie więcej i
tutaj chcę zwrócić mój obiekt
akcji, a następnie tam,
gdzie jest typ, dodaj miejsce i gdzie mam tylko moje dane miejsca, powiedzmy, które w
tej chwili składają się tylko z tytuł, ale później to będzie więcej.
To podstawowa aplikacja Redux, teraz oczywiście w aplikacji. js
musimy wszystko załatwić. Tak więc, jak nauczyłeś się tego na
tym kursie, możemy importować coś z Redux, a także coś z React Redux, a także importować Redux Thunk z Redux Thunk, więc z tego
pakietu również zainstalowaliśmy. Teraz z Redux
musimy stworzyć reduktory sklepowe i łączące, a także zastosować oprogramowanie pośrednie, aby zastosować Redux Thunk, a od React
Redux potrzebujemy tego komponentu dostawcy, a dzięki
temu, podobnie jak robiliśmy to wiele razy w trakcie, możemy stworzyć nasz reduktor root
za pomocą reduktorów kombajnowych.
To bierze obiekt, w którym łączymy wszystkie
reduktory razem, teraz oczywiście mamy tylko jeden reduktor i to jest reduktor miejsc, który importujemy z
folderu sklepu i tam, to plik reduktora miejsc, ale oczywiście
możesz mieć więcej reduktorów w swojej aplikacji i zamapuję to na miejsca, więc reduktor miejsc
jest mapowany na identyfikator miejsc tutaj.
Teraz możemy stworzyć nasz sklep za pomocą funkcji tworzenia sklepu, a ta funkcja pobiera reduktor katalogu głównego, a także
możemy przekazać drugi argument, w którym wywołujemy zastosowanie oprogramowania pośredniego i przekazanie Redux Thunk do tej funkcji, dzięki czemu pakiet
Redux Thunk jest miły podłączonych do naszego strumienia Redux tutaj. Po skonfigurowaniu wszystkich tych opcji możemy zawinąć
nawigator miejsc w komponent dostawcy, ponieważ każdy ekran w naszej aplikacji, w naszym nawigatorze, powinien mieć dostęp
do sklepu i dostawcy, przekazujemy sklep przez rekwizyt sklepu i to jest Redux
konfiguracji widzieliśmy także wiele razy w trakcie tego kursu. Po skonfigurowaniu Redux możemy przejść do ekranu nowego miejsca i
upewnić się, że tutaj w module obsługi zapisu miejsca, który jest uruchamiany po
kliknięciu tego przycisku, dodajemy nowe miejsce, które na razie składa się tylko z tytułu, ale
oczywiście to się zmieni w trakcie tego kursu. Aby to zrobić, możemy zaimportować use dispatch z React
Redux i po prostu uzyskać dostęp do funkcji dispatch, wykonując tam use use dispatch,
a także oczywiście zaimportować naszą akcję, na przykład ponownie przy użyciu tej składni scalania
importu, importując wszystko jako miejsca akcje ze sklepu i tam, plik akcji miejsc, a dzięki temu możemy przejść do zapisania procedury obsługi
miejsca, wezwania wysyłki tutaj i akcji wysyłki miejsc dodaj miejsce i przekaż tytuł, który jest oczywiście zapisany
w naszej wartości tytułu, więc tutaj . Teraz dzięki temu będziemy mogli wywołać tę
akcję, w reduktorze miejsc, możemy
teraz zmienić nasz typ akcji lub użyć, jeśli sprawdzimy oczywiście i poszukaj stanu dodania miejsca lub akcji, którą importujemy z akcji miejsc, dodaj również domyślny
przypadek przy okazji, w którym po prostu zwracamy stan, a zatem możemy
pozbyć się tam tej instrukcji return, a teraz, jeśli dodamy miejsce,
możemy
uzyskać nowe miejsce tutaj i do tego, tak samo jak wcześniej w tym
kursie dodam folder modeli z miejscem. Plik js tam, w którym chcę zdefiniować, jak powinno
wyglądać miejsce w tej aplikacji, po prostu w łatwy sposób, aby stworzyć nowe obiekty miejsca, które są
zawsze takie same.
Więc tutaj utworzę klasę i wyeksportuję to jako domyślny plik i teraz oczywiście od ciebie zależy, jak chcesz wyglądać w swoim
miejscu, zdefiniuję moje za pomocą konstruktora, aby mieć identyfikator i identyfikator tytuł, a później dodamy więcej,
ale na
razie to tyle
i będę przechowywać tutaj
swój identyfikator i będę przechowywać swój tytuł tutaj w nieruchomości. Dzięki temu mamy plan nowych miejsc,
z powrotem w reduktorze miejsc, możemy go teraz
użyć.
Więc możemy zaimportować miejsce z folderu modeli i tam miejsce. plik js, a następnie tutaj utwórz nowe miejsce, wywołując nowe
miejsce, więc inicjując lub tworząc nowe
miejsce na podstawie naszej klasy i identyfikatora, na razie użyję fikcyjnego identyfikatora aktualnej daty i
znacznika czasu tytuł jednak jest oczywiście czymś, co możemy ustawić, ponieważ jest to część naszej akcji, tam w
danych miejsca będziemy mieli właściwość title, która zawiera tytuł ustawiony przez użytkownika,
więc tutaj mogę
ustawić to na akcję. placeData. tytuł.
Tworzy to nowy obiekt miejsca
i teraz możemy przywrócić nowy stan tutaj, gdzie miejsca i ja nie muszę kopiować starego stanu, ponieważ nie mam tutaj
nic innego i nie dodam niczego, więc mogę po prostu zwrócić nowy obiekt stanu, w którym miejsca
są teraz stanem. miejsca. concat, więc bierze starą
tablicę, dodaje nowy przedmiot i zwraca zupełnie nową tablicę, która zastępuje starą tablicę tutaj
w naszym
stanie i oczywiście konkatuję moje nowe miejsce. Dzięki temu powinniśmy mieć listę miejsc, którymi zarządzamy. W kolejnym wykładzie możemy teraz martwić
się o
wyświetlenie go tutaj na ekranie listy miejsc. Jeszcze jedna rzecz, kiedy dodamy tutaj nowe
miejsce, klikając przycisk zapisywania procedury obsługi
miejsca, chcę również wrócić do ekranu listy
miejsc, więc tutaj po wysłaniu tej akcji faktycznie skorzystam z nawigacji rekwizytów, aby wrócić, więc aby wrócić
do ekranu listy miejsc. A teraz popracujmy nad ekranem z listą miejsc i upewnijmy się, że
faktycznie wyświetlamy tam listę miejsc.