Zacznij od Redux Thunk

Sep 11, 2025
Jak
Get started with Redux Thunk

Stan jest dużą częścią aplikacji reagowania, dlatego Redux jest powszechnie sparowany z nim. Dane często pochodzą z bazy danych, która wymaga żądania i odpowiedzi. W przypadku niektórych zastosowań ten komunikacja może być stała. Może to być trudne, próbując zarządzać wyłącznie w ramach elementów reagujących.

Wprowadza to również nowe problemy - co się stanie, jeśli ładuje się powoli lub nie ładuje się? Każdy komponent dotyczący danych asynchronicznych musiałby zawierać logikę do obsługi tych scenariuszy.

"Thunk" to koncepcja, która może pomóc w tej sytuacji. Każda prośba jest funkcją, która zwraca inną funkcję. Ta funkcja może być następnie wywoływana w późniejszym punkcie, podobnie jak wywołanie zwrotne. Gdybyśmy mogli wysłać tracenie zamiast obiektu akcji, możemy dodać dodatkową logikę w reakcji na inne wydarzenie.

Redux Thunk to biblioteka, która znajduje się pomiędzy wysyłkowymi działaniami a reduktorem. Kiedy widzi wysłanie przeciążenia, przechodzi kilka metod do zwracanej funkcji, która może być użyta do wysyłania dalszych działań, takich jak sukces lub zdarzenie błędu.

  • 20 błyskotliwych wtyczek jquery

W tym samouczku skorzystamy z prośbnych, aby pomóc w ciągnąć danych z serwera, a nie z pliku JSON, współpracując z Photoshare. - Aplikacja komentowania zdjęć zasilana przez Redux.

Mam nowy projekt witryny, ale potrzebujesz, aby pozostać prostym? Oto nasze przewodniki najlepiej Kreator strony internetowej i hosting usługa. Udostępnianie plików z innymi? Weź swój magazyn w chmurze dobrze.

Pobierz pliki. Dla tego samouczka.

01. Zainstaluj zależności

Get started with Redux Thunk: Install dependencies

Uruchom oba serwery i zostaw ich robią swoje rzeczy

Istnieją dwie części do tego projektu - frontową witrynę końcową i tylnym serwerem końcowym działa. Podczas gdy samouczek skupia się na przednim końcu, potrzebujemy uruchomionego serwera, aby pobrać zdjęcia. Pobierz pliki projektu i zainstaluj zależności zarówno dla witryny, jak i serwera. Uruchom serwery dla obu i zostaw ich bieganie w tle. 

 / * jeden terminal wewnątrz / witryna * /
& gt; przędza
& gt; początek przędzy.
/ * jeden terminal wewnątrz / serwer * /
& gt; przędza
& gt; początek przędzy

02. Skonfiguruj oprogramowanie pośrednie

Redux Thunk to Oprogramowanie pośrednie - Funkcjonalność, która siedzi pomiędzy działaniami i redukturami, które mogą zmienić, jak zachowują się te działania. Redux obsługuje wiele zestawów oprogramowania pośredniego, które obejmują całą aplikację. Dostają dodawane, gdy sklep jest tworzony za pomocą komponować metoda. Dodaj oprogramowanie pośrednie do CreateStore. Metoda w index.js. 

 Importuj {ZastosujMiddleweware, komponuj}
z "Redux";
Import Thunk z "Redux-Thunk";
[...]
Const Store = Createstore (
korzeniec
komponować(
aplikacjaMiddleware (Thunk),
devtools.
)
);

03. Ustaw twórcy akcji

Pierwszą rzeczą, którą musimy teraz załadować, aby załadować zdjęcia do galerii. Podobnie jak regularne działania, potrzebujemy twórców akcji dla różnych stanów, które weźmie asynchroniczne połączenie. Większość będzie miała początek , sukces i błąd działania. Pozwalają Reduxowi wiedzieć, co jest zajęta JavaScript. W ciągu Akcje / zdjęcia / zdjęcia.js , założyć trzy twórcy akcji dla tych różnych stanów. 

 Eksportuj ConstGalleryStart = () = & GT; ({
Typ: Load_Gallery_start});
Eksportuj Con ConstGallerySuCcess =
Zdjęcia = & gt; ({
Typ: Load_Gallery_Success,
zdjęcia
});
Eksportuj CINSTBallerror = () = & GT; ({
Typ: Load_gallery_error});

04. Utwórz próba do załadunku

Pubyks działają dokładnie tak samo jak twórcy akcji. Nadal wysyłamy wartość zwracania, ale tym razem zwraca funkcję zamiast obiektu. Oprogramowanie pośrednie, które założyliśmy wcześniej, przejdzie metodę wysyłki do zwracanej funkcji. Umożliwia nam to wysłać więcej działań do Redux po początkowej wysyłce. Stwórz loadgaleria. Metoda, która zwraca funkcję. Na razie wysyłaj akcję, aby pokazać, że galeria wciąż ładuje. 

 Eksportuj ConstGallerie = () = & GT;
wysyłka = & gt; {
wysyłka (loadgalleryStart ());
};

05. Załaduj dane z serwera

Jesteśmy teraz gotowi do rozpoczęcia pobierania z serwera ustawiamy na początku. Możemy to zrobić za pomocą AXIOS. - Pakiet przeznaczony do pracy z obietnicami w różnych przeglądarkach. Import AXIOS. i złożyć wniosek o zdjęcia loadgaleria. . Jeśli obietnica rozwiązuje, wysyłaj akcję sukcesu, a jeśli nie wysyłaj akcji błędów. Z tym struktura trajem jest kompletna. 

 Importuj AXIOS z "AXIOS";
[...]
Powrót AXIOS.
.get ("http: // localhost: 3001 / zdjęcia")
.Then (response = & gt; wysyłka (
loadgallerySuccess (response.data)))
.Catch (() = & gt; wysyłka (
loadgallererror ()));

06. Wyślij próba

Get started with Redux Thunk: Dispatch the thunk

Niepowiedziany Trosk to bezużyteczny pościelenie śmieci

Trosk nie zrobi nic, dopóki nie zostanie wysłane. Możemy to zrobić w ramach komponentu reagowania, jak każde inne działania. Dobry czas, aby rozpocząć ładowanie zdjęć, jest kiedy użytkownik wyświetli główną galerię. Możemy użyć reakcji ComponentDidMount. Metoda cyklu życia jako wyzwalacza, po sprawdzeniu galerii nie jest już ładowana. W ciągu Komponenty / Kontener / Galeria / Galeria.js Wysyłaj A. loadgaleria. działanie, dodając go do MapDispatchToprops. i dzwoniąc do tego wewnątrz ComponentDidMount. . 

 ComponentDidMount () {
Jeśli (! to.props.propsloaded) {
to.props.loadgallery ();
}
}
Eksportuj Const MapDispatchToprops =
 wysyłka = & gt; ({
loadgallery: () = & gt;
wysyłka (loadgallery ()),
});

07. Dodaj zdjęcia na sukces

Get started with Redux Thunk: Add photos on success

Gdy przybyli zdjęcia, są przekazywane do komponentu galerii

Kiedy zdjęcia wrócą z serwera, wysyłamy Load_gallery_success. Akcja ze zdjęciami. Musimy dostać to do stanu przez zdjęcia reduktor. Zmierzać do Reduktory / zdjęcia / zdjęcia.js i dodaj skrzynkę do działania sukcesu. Ładunek zawiera wszystkie zdjęcia jako tablica. Po zaktualizowaniu stanu selektor fotograficzny przechodzi zdjęcia do komponentu Galeria, który ma być wyświetlany. 

 Case Load_Gallery_Success:
Return Action.Photos;

08. Skonfiguruj UI

Obecnie zdjęcia nagle pojawiają się po załadowaniu. W wolniejszym połączeniu użytkownik będzie wyglądał na pusty ekran, aż żądanie wykończenia, jeśli kiedykolwiek. Działania wysyłane do ładowania zdjęć można również odebrać w reduktorie UI, aby aktualizować interfejs na bieżąco z tym, co się dzieje. Zaktualizuj flagi załadunku i błędów w reduktorie UI Reduktory / Ui / Ui.js . 

 Case Load_gallery_Error:
Wróć {... stan,
Ładowanie: false, błąd: true};
Case Load_Gallery_start:
Wróć {... stan,
Ładowanie: true, błąd: false};
Case Load_gallery_Success:
Wróć {... stan,
Ładowanie: false};

09. Dodaj ładowanie i selektor błędu

Podobnie jak w przypadku zdjęć galerii, potrzebujemy selektorów, aby uzyskać różne wartości UI z Redux. Możemy przekazać je do galerii, która następnie przetwarza różne elementy, jeśli jeden jest prawdziwy. W Selektory / Ui / Ui.js , Dodaj kilka funkcji, aby uzyskać wartości. 

 Eksportuj Const IsGalleryRrored =
 stan = & gt; State.ui.Error;
Eksportuj Const IsGalleryLoading =
 stan = & gt; state.ui.loading;

10. Dodaj dane do galeriiContainer

Z gotowymi selektorami można teraz dodać do Galeria Komponent kontenerowy. Dodanie ich tutaj oznacza, że ​​komponent odpowiedzialny za wyświetlanie galerii nie musi wiedzieć o tym, jak dotarły dane. Zmierzać do Pojemnik / Galeria / Galeria.js i dodaj selektory do mapstatetoprops. . Wykonaj stałe dla wartości, aby pomóc wyświetlić stan w następnym kroku. 

 Const {Błąd, załadunek,
 Zdjęcia} = to.props;
[...]
Eksportuj Const MapStatetoprops =
 stan = & gt; ({
Błąd: IsgalleryRrored (stan),
Ładowanie: Isgallerydinging (stan),
 });

11. Pokaż obciążenie i stan błędu

Get started with Redux Thunk: Show loading and error state

Upewnij się, że pojawiają się błąd i elementy ładujące w razie potrzeby

Chociaż mamy rekwizyty błędów i załadunku, obecnie nie ma interfejsu użytkownika, aby wskazać, kiedy są aktywne. Te rekwizyty są wartościami boolowskie, co oznacza, że ​​możemy przełączać wyświetlanie komponentów, gdy są prawdziwe. Zaktualizuj metodę renderowania, aby upewnić się & lt; błąd i gt; i & LT; Loading & GT; Komponenty renderują zamiast galerii w razie potrzeby. 

 Jeśli (błąd) {
Powrót i błąd / GT ;;
}
Jeśli (załadunek) {
powrót / loading / & gt ;;;
}

12. Przynieś ponownie galerię

Z załadowanym galerią możemy przejść do indywidualnego zdjęcia. Kliknięcie do dowolnego ze zdjęć i odświeżanie strony nie ładuje zdjęcia z powrotem, ponieważ na tej stronie nie ma instrukcji, aby załadować galerię. otwarty Pojemnik / zdjęcie / zdjęcie.js i załaduj galerię ComponentDidMount. jak w. Galeria składnik. The. Photoseed. Sprawdź, czy nie spróbuje ponownie załadować zdjęć, jeśli zostały one już załadowane w galerii. 

 If (! This.props.propsOloaded) {
to.props.loadgallery ();
}

13. Dodaj nowy komentarz

Get started with Redux Thunk: Add a new comment

Użyj Niezależnie od Funkcja Prop do dodawania komentarzy

Użytkownik może kliknąć zdjęcie, gdzie chcą zostawić komentarz. Składnik prezentacyjny uruchomi się Niezależnie od Funkcja Prop, gdy tak się dzieje. W środku Niezależnie od Funkcja, oblicz punkt, w którym użytkownik kliknął na zdjęcie. Serwer wymaga okrągłej wartości procentowej liczby całkowitej, gdy zostanie zapisany. 

 Const Photo = E.Target
 .getBoundingClientRect ();
const top = e.clientx - photo.left;
Const Left = e.Clienty - photo.top;
Const TOPPC = math.round ((Top /
 photo.width) * 100);
const leftpc = math.round ((lewy /
 photo.height) * 100);

14. Powiedz Redux o komentarzu

W obliczonym położeniu musimy powiedzieć Redux o komentarzu, dzięki czemu może wyświetlić formularz komentarza. Jest już konfiguracja akcji, aby dodać nowy komentarz na ekranie. Dodaj Niezależnie od w MapDispatchToprops. i zadzwoń do tego po obliczeniu pozycji kliknięcia. 

 to.props.addNewComment (
 TOPPC, LEDPC);
[...]
Eksportuj Const MapDispatchToprops =
 wysyłka = & gt; ({
Niezupełnie: (Top, Lewa) = & GT;
wysyłka (bezdech (top, w lewo)),
});

15. Opowiedz zdjęcie o nowym komentarzu

Gdy nowe informacje o komentarzu są przekazywane do Redux, musimy przekazać go do elementu prezentacyjnego. Umożliwia to pokazanie formularza w tej pozycji. Znaleźć getNewComment. selektor, dodaj go mapstatetoprops. i przekazać rekwizyt & lt; foto & gt; . 

 Eksportuj Const MapStatetoprops =
 (stan, rekwizyty) = & gt; ({
NadComment: GetNewNewComment (stan),
});
& lt; foto [...] Newcomment = {
 to.props.Newcomment} / & gt;

16. Zadzwoń do Trosn w komentarzu

Get started with Redux Thunk: Call thunk in comment

Utwórz próba, aby dodać komentarz do zdjęcia

Kliknięcie na zdjęcie teraz pojawi się nowy formularz komentarza. To jest jego własny podłączony komponent. Po przesłaniu formularza wywołuje a Prześlij komentarz Funkcja Prop i zostaje przekazywana. To jest cicho, które zrobimy. Otworzyć Pojemnik / Nowy / NewComment.js i dodaj tuby do MapDispatchToprops. . Przekazać, że rekwizyty komponentem prezentacyjnym. 

 Nowy [...]
 summment = {summment} / & gt;
Eksportuj Const MapDispatchToprops =
 wysyłka = & gt; ({
Przesumowanie: Komentarz = & GT; wysyłka(
Szybkość (komentarz))
});

17. Zbierz treści dla młichtu

Trosk, aby dodać nowy komentarz ma podobną strukturę do pobierania galerii, w tym akcję rozpoczęcia, sukcesu i błędów. W tym trudnym jest dodatkowy argument - getstate. funkcjonować. Umożliwia to bezpośredni dostęp do aktualnego stanu w celu uchwycenia danych z niego. Utwórz Prześlij komentarz przecież Działania / nowo Nowy / NewComment.js . Każdy komentarz jest związany ze zdjęciem i użytkownikiem. W tym samouczku identyfikator użytkownika jest trudny do użytkownik reduktor. 

 Eksportuj Const Summment = Komentarz
 = & gt; (wysyłka, getstate) = & gt; {
wysyłka (summmentstart ());
ConstFotoid =.
getcurrentphotoid (getstate ());
Konster User =.
GetCurrenduser (Getstate ());
const {left, top} =
getNewComment (getstate ());
};

18. Opublikuj prośbę

Ze wszystkimi niezbędnymi danymi, możemy przesłać komentarz. Axios ma A. Poczta metoda radzenia sobie z POCZTA Wnioski, z drugim argumentem, które będą dane do wysłania tego żądania. Dodaj żądanie do Trosk, przekazując dane w przypadku węża, aby dopasować ten serwer. 

 Powrót AXIOS
.Poczta(
"http: // localhost: 3001 / komentarze", {
user_id: user.id,
photo_id: currentfotoid,
komentarz,
lewo,
Top
})

19. Uchwyt sukcesu i błąd

Jeśli obietnica z AXIOS rozwiarcza lub odrzuca, musimy opowiedzieć o tym wniosek. Jeśli rozwiązuje się pomyślnie, serwer usiłuje treść komentarza. Powinniśmy przekazać to wraz z działaniem sukcesu. Jeśli zostanie odrzucony, zwolnij akcję błędu. Zaktualizuj obietnicę następnie i złapać Bloki. 

 .The (({dane: {
 ID, komentarz, lewy, górny}}) = & gt;
wysyłka(
Wycinany (
ID, komentarz, w lewo, top,
Użytkownik, CurrentFotoid)
)
)
.Catch (() = & gt; wysyłka (
 Układ komory ()));

20. Dodaj komentarz do zdjęcia

Get started with Redux Thunk: Add comment to photo

Edytuj reduktor zdjęć, aby komentarze pojawią się natychmiast

W tej chwili, gdy komentarz zostanie dodany pomyślnie, zostanie on wyczyszczony z ekranu, ale nie jest widoczny, dopóki strona zostanie odświeżona. Możemy zaktualizować reduktor zdjęć, aby odebrać nowy komentarz i dodać go do swojej tablicy komentarzy, aby wyświetlić jak reszta. Otwórz reduktor / zdjęcia / zdjęcia.js i dodaj obudowę, aby obsługiwać akcję. Utwórz kopię stanu, aby upewnić się, że nie przypadkowo nie zamuścimy istniejącego stanu. 

 Case Smit_Comment_Success:
Const {ID, Komentarz, Top, Left,
Użytkownik, fotoid} = Action.Payload;
Const NewState = JSON.PARSE (
Json.stringify (stan));
const photo = Newstate.find (
zdjęcie = & gt; photo.id === fotoid);
photo.comments.push ({
ID, komentarz, lewy, górny, użytkownik
});
zwróć Newstate;

21. Ukryj inne komentarze

Wreszcie, jeśli inny komentarz jest otwarty, a użytkownik chce dodać nowy komentarz, UI jest zbyt zaśmiecone. Powinniśmy ukryć pole komentarza, jeśli zostanie skomponowany nowy komentarz. Możemy zaczepić się do istniejącego Dodaj_new_Comment. działanie, aby oczyścić komentarz. wartość. Zmierzać do Reduktor / Ui / Ui.js i dodaj na to. 

 Case Add_New_Comment:
powrót {
...stan,
Komentarz: Udefiniowany
};

Ten artykuł został pierwotnie opublikowany w wydaniu 283 Magazynu kreatywnego projektowania stron internetowych Projektant stron internetowych . Kup problem 283 tutaj lub Subskrybuj tutaj projektant stron internetowych .

Powiązane artykuły:

  • 5 niesamowitych apis javascript
  • Rozwijaj składniki reagowania wielokrotnego użytku
  • 9 najlepszych ram JavaScript

Jak - Najpopularniejsze artykuły

Adobe XD: Jak korzystać z funkcji Auto-Animate

Jak Sep 11, 2025

(Kredyt obrazu: Adobe) Pomimo późnego wejścia do gry prototypowania, Adobe XD jest jednym z najlepszych i najszybs..

Zacznij od Grav CMS

Jak Sep 11, 2025

(Kredyt obrazu: przyszłość) Grava jest systemem zarządzania treścią (CMS) z różnicą. Systemy zarządzania tr..

Jak tworzyć symulacje wody

Jak Sep 11, 2025

Ten samouczek nauczy Cię stworzyć animowaną plażę Diorama od początku do końca za pomocą Houdini FX. Zrozumiesz cały prz..

Jak narysować znak w piórze i atramentowi

Jak Sep 11, 2025

Jako artysta w studio gier zapomniałem najbardziej tradycyjnych mediów, ale atrament zawsze zwraca mnie do mnie. Po dniu wpatry..

Jak utworzyć umiejętność Alexa na swojej stronie

Jak Sep 11, 2025

Wielu z nas ma teraz jakiś asystent głosowy w domu, czy jest to Echo Amazon Echo, Apple Hompod czy Google Home. Wygląda na to,..

Zbuduj animowany podzielony na ekranie Page

Jak Sep 11, 2025

Twoja strona docelowa jest kluczowym elementem Układ strony internetowej. . Jest to pierwsza prawdziwa okazja, kt..

Master na dużą skalę środowisk w 3DS max

Jak Sep 11, 2025

Celem tego utworu było wyprodukować kawałek 3d art. Jest to gotowe przejść prosto z bufora ramki, z niewielk�..

Zacznij od HTML Canvas

Jak Sep 11, 2025

HTML Canvas & GT; Element to potężne rozwiązanie do tworzenia grafiki opartej na pikselach w sieci Javascript. ..

Kategorie