1 00:00:02,290 --> 00:00:05,850 Aby skonfigurować Redux, zastosuję to samo podejście, co wcześniej na kursie, dodam folder 2 00:00:05,950 --> 00:00:14,470 sklepu i tam będę miał moje działania na miejscu. plik js i mój reduktor miejsc. plik js. 3 00:00:14,470 --> 00:00:16,310 To oczywiście trochę 4 00:00:16,330 --> 00:00:19,310 inne niż wcześniej, tam miałem podfolder akcji i 5 00:00:19,390 --> 00:00:21,520 reduktorów, możesz absolutnie zrobić to 6 00:00:21,520 --> 00:00:25,950 samo tutaj, ponieważ mam tylko jedną akcję i jedną reduktor, zachowam to 7 00:00:25,960 --> 00:00:27,820 w dwóch plikach, ale możesz 8 00:00:27,820 --> 00:00:34,840 mieć podfoldery i tak dalej, to zależy od Ciebie. Teraz w reduktorze miejsc zdefiniuję, jak powinien wyglądać mój stan dla 9 00:00:34,840 --> 00:00:37,990 tej części mojego stanu całkowitego, a to będzie 10 00:00:37,990 --> 00:00:43,510 bardzo proste, mój stan początkowy tutaj to tylko obiekt Javascript, w którym chcę mieć pusty klucz miejsca 11 00:00:43,510 --> 00:00:47,810 , pusta tablica na początku, bo będę miał tablicę miejsc i to wszystko. 12 00:00:47,830 --> 00:00:54,190 Tak więc tutaj mogę wyeksportować tę funkcję reduktora, która przyjmuje stan ustawiony na stan początkowy, jeśli żaden 13 00:00:54,190 --> 00:01:01,450 inny stan nie zostanie przekazany i działanie, i na razie, po prostu przywrócę ten stan, wkrótce oczywiście „ Dodam logikę do 14 00:01:01,450 --> 00:01:08,320 obsługi różnych działań i na przykład dodaj nowe miejsce. W pliku akcji miejsc wyeksportuję nową stałą, 15 00:01:08,320 --> 00:01:16,890 dodam miejsce, które jest jednym identyfikatorem akcji, którego potrzebuję i dodam funkcję kreatora akcji, dodam miejsce, które powinno 16 00:01:16,890 --> 00:01:23,640 zająć trochę danych o miejscu i dla chwila, to tylko tytuł, później będzie więcej i 17 00:01:23,640 --> 00:01:26,290 tutaj chcę zwrócić mój obiekt 18 00:01:26,290 --> 00:01:28,420 akcji, a następnie tam, 19 00:01:28,420 --> 00:01:35,560 gdzie jest typ, dodaj miejsce i gdzie mam tylko moje dane miejsca, powiedzmy, które w 20 00:01:35,560 --> 00:01:41,200 tej chwili składają się tylko z tytuł, ale później to będzie więcej. 21 00:01:41,260 --> 00:01:43,630 To podstawowa aplikacja Redux, teraz oczywiście w aplikacji. js 22 00:01:43,660 --> 00:01:50,670 musimy wszystko załatwić. Tak więc, jak nauczyłeś się tego na 23 00:01:51,280 --> 00:02:02,010 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 24 00:02:02,040 --> 00:02:05,160 pakietu również zainstalowaliśmy. Teraz z Redux 25 00:02:05,160 --> 00:02:12,270 musimy stworzyć reduktory sklepowe i łączące, a także zastosować oprogramowanie pośrednie, aby zastosować Redux Thunk, a od React 26 00:02:12,270 --> 00:02:15,210 Redux potrzebujemy tego komponentu dostawcy, a dzięki 27 00:02:15,690 --> 00:02:21,240 temu, podobnie jak robiliśmy to wiele razy w trakcie, możemy stworzyć nasz reduktor root 28 00:02:21,240 --> 00:02:23,120 za pomocą reduktorów kombajnowych. 29 00:02:23,130 --> 00:02:26,370 To bierze obiekt, w którym łączymy wszystkie 30 00:02:26,370 --> 00:02:33,090 reduktory razem, teraz oczywiście mamy tylko jeden reduktor i to jest reduktor miejsc, który importujemy z 31 00:02:33,090 --> 00:02:37,140 folderu sklepu i tam, to plik reduktora miejsc, ale oczywiście 32 00:02:37,140 --> 00:02:43,680 możesz mieć więcej reduktorów w swojej aplikacji i zamapuję to na miejsca, więc reduktor miejsc 33 00:02:43,710 --> 00:02:46,690 jest mapowany na identyfikator miejsc tutaj. 34 00:02:46,890 --> 00:02:53,460 Teraz możemy stworzyć nasz sklep za pomocą funkcji tworzenia sklepu, a ta funkcja pobiera reduktor katalogu głównego, a także 35 00:02:53,490 --> 00:03:00,300 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 36 00:03:00,330 --> 00:03:07,800 Redux Thunk jest miły podłączonych do naszego strumienia Redux tutaj. Po skonfigurowaniu wszystkich tych opcji możemy zawinąć 37 00:03:07,800 --> 00:03:15,810 nawigator miejsc w komponent dostawcy, ponieważ każdy ekran w naszej aplikacji, w naszym nawigatorze, powinien mieć dostęp 38 00:03:15,810 --> 00:03:21,750 do sklepu i dostawcy, przekazujemy sklep przez rekwizyt sklepu i to jest Redux 39 00:03:21,750 --> 00:03:30,160 konfiguracji widzieliśmy także wiele razy w trakcie tego kursu. Po skonfigurowaniu Redux możemy przejść do ekranu nowego miejsca i 40 00:03:30,160 --> 00:03:35,380 upewnić się, że tutaj w module obsługi zapisu miejsca, który jest uruchamiany po 41 00:03:35,380 --> 00:03:41,530 kliknięciu tego przycisku, dodajemy nowe miejsce, które na razie składa się tylko z tytułu, ale 42 00:03:41,530 --> 00:03:49,450 oczywiście to się zmieni w trakcie tego kursu. Aby to zrobić, możemy zaimportować use dispatch z React 43 00:03:50,730 --> 00:03:57,300 Redux i po prostu uzyskać dostęp do funkcji dispatch, wykonując tam use use dispatch, 44 00:03:57,390 --> 00:04:03,930 a także oczywiście zaimportować naszą akcję, na przykład ponownie przy użyciu tej składni scalania 45 00:04:04,380 --> 00:04:14,370 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 46 00:04:14,370 --> 00:04:21,960 miejsca, wezwania wysyłki tutaj i akcji wysyłki miejsc dodaj miejsce i przekaż tytuł, który jest oczywiście zapisany 47 00:04:21,960 --> 00:04:29,500 w naszej wartości tytułu, więc tutaj . Teraz dzięki temu będziemy mogli wywołać tę 48 00:04:29,650 --> 00:04:32,170 akcję, w reduktorze miejsc, możemy 49 00:04:32,170 --> 00:04:44,400 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 50 00:04:44,400 --> 00:04:50,400 przypadek przy okazji, w którym po prostu zwracamy stan, a zatem możemy 51 00:04:50,400 --> 00:04:56,160 pozbyć się tam tej instrukcji return, a teraz, jeśli dodamy miejsce, 52 00:04:56,220 --> 00:04:57,240 możemy 53 00:04:57,930 --> 00:05:04,260 uzyskać nowe miejsce tutaj i do tego, tak samo jak wcześniej w tym 54 00:05:04,260 --> 00:05:10,290 kursie dodam folder modeli z miejscem. Plik js tam, w którym chcę zdefiniować, jak powinno 55 00:05:10,290 --> 00:05:15,900 wyglądać miejsce w tej aplikacji, po prostu w łatwy sposób, aby stworzyć nowe obiekty miejsca, które są 56 00:05:15,900 --> 00:05:17,190 zawsze takie same. 57 00:05:17,190 --> 00:05:24,510 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 58 00:05:24,510 --> 00:05:30,180 miejscu, zdefiniuję moje za pomocą konstruktora, aby mieć identyfikator i identyfikator tytuł, a później dodamy więcej, 59 00:05:30,570 --> 00:05:31,460 ale na 60 00:05:31,530 --> 00:05:32,670 razie to tyle 61 00:05:32,670 --> 00:05:34,020 i będę przechowywać tutaj 62 00:05:34,230 --> 00:05:41,280 swój identyfikator i będę przechowywać swój tytuł tutaj w nieruchomości. Dzięki temu mamy plan nowych miejsc, 63 00:05:41,280 --> 00:05:45,390 z powrotem w reduktorze miejsc, możemy go teraz 64 00:05:45,630 --> 00:05:46,440 użyć. 65 00:05:46,440 --> 00:05:55,170 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 66 00:05:55,170 --> 00:05:58,080 miejsce, więc inicjując lub tworząc nowe 67 00:05:58,080 --> 00:06:04,560 miejsce na podstawie naszej klasy i identyfikatora, na razie użyję fikcyjnego identyfikatora aktualnej daty i 68 00:06:04,560 --> 00:06:12,050 znacznika czasu tytuł jednak jest oczywiście czymś, co możemy ustawić, ponieważ jest to część naszej akcji, tam w 69 00:06:12,060 --> 00:06:17,130 danych miejsca będziemy mieli właściwość title, która zawiera tytuł ustawiony przez użytkownika, 70 00:06:17,130 --> 00:06:18,720 więc tutaj mogę 71 00:06:18,720 --> 00:06:24,630 ustawić to na akcję. placeData. tytuł. 72 00:06:24,630 --> 00:06:26,530 Tworzy to nowy obiekt miejsca 73 00:06:26,670 --> 00:06:33,600 i teraz możemy przywrócić nowy stan tutaj, gdzie miejsca i ja nie muszę kopiować starego stanu, ponieważ nie mam tutaj 74 00:06:33,600 --> 00:06:39,480 nic innego i nie dodam niczego, więc mogę po prostu zwrócić nowy obiekt stanu, w którym miejsca 75 00:06:39,900 --> 00:06:44,020 są teraz stanem. miejsca. concat, więc bierze starą 76 00:06:44,040 --> 00:06:49,710 tablicę, dodaje nowy przedmiot i zwraca zupełnie nową tablicę, która zastępuje starą tablicę tutaj 77 00:06:49,710 --> 00:06:51,050 w naszym 78 00:06:51,300 --> 00:06:59,310 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ć 79 00:06:59,310 --> 00:07:00,220 się o 80 00:07:00,240 --> 00:07:06,390 wyświetlenie go tutaj na ekranie listy miejsc. Jeszcze jedna rzecz, kiedy dodamy tutaj nowe 81 00:07:06,390 --> 00:07:09,310 miejsce, klikając przycisk zapisywania procedury obsługi 82 00:07:09,390 --> 00:07:12,560 miejsca, chcę również wrócić do ekranu listy 83 00:07:12,570 --> 00:07:20,610 miejsc, więc tutaj po wysłaniu tej akcji faktycznie skorzystam z nawigacji rekwizytów, aby wrócić, więc aby wrócić 84 00:07:20,610 --> 00:07:25,530 do ekranu listy miejsc. A teraz popracujmy nad ekranem z listą miejsc i upewnijmy się, że 85 00:07:25,530 --> 00:07:26,760 faktycznie wyświetlamy tam listę miejsc.