Redux-Thunk
3 minuty czytania
Redux-Thunk to biblioteka, która pozwala na wykonywanie operacji asynchronicznych w aplikacji opartej na Redux. Jest to jedno z najpopularniejszych rozszerzeń Redux, które pozwala na proste i czytelne zarządzanie stanem aplikacji.
Redux-Thunk jest dodatkiem do biblioteki Redux. Hostowany jako oddzielna paczka w NPM, jest możliwy do pobrania i ustawienia jako middleware przy inicjalizacji Redux bez skomplikowanej konfiguracji. Pozwala uzyskać asynchroniczność zapytań. Middleware'y w redux pozwalają przechwycić zapytanie i zamiast wykonać pojedynczą zmianę na storze może wykonać serię zapytań, w międzyczasie mogą odpytać API po zewnętrzne dane. Całość jest możliwa, do uzyskania bez Redux-Thunk, ale ten znacznie to ułatwia.
Przykładowe zapytanie w Redux-Thunk
Najprostszym przykładem wykorzystania Redux-Thunk będzie zapytanie do API w celu zalogowania użytkownika. Aby zapytanie przebiegło poprawnie musi wydarzyć się parę rzeczy.
1. Ustawienie stanu aplikacji, że logowanie się rozpoczęło.
2. Wysłanie zapytania do API
3. Ustawienie danych użytkownika w store
4. Ewentualne zwrócenie błędu
export const authLogin = (email, password) => {
return dispatch => {
dispatch(authStart());
axios
.post(`${API_URL}/auth/api/v1/login/`, {
email: email,
password: password
})
.then(res => {
const token = res.data.token;
const user = res.data.user;
dispatch(authSuccess(token, user));
})
.catch(err => {
dispatch(authFail(err));
});
};
};
Dzięki takiemu podejściu możemy wyizolować część logiki naszej aplikacji do pojedynczej funkcji. Możemy wykorzystać mockowanie danych z API i w pełni przetestować działanie takiego Thunka.
Obsługa błędów w Redux-Thunk
W każdej aplikacji korzystającej z asynchronicznych zapytań do API istotne jest odpowiednie zarządzanie błędami, aby zapewnić użytkownikowi jak najlepsze doświadczenie. Redux-Thunk pozwala na obsługę błędów w sposób elastyczny, umożliwiając zarówno reakcję na błędy w samych akcjach, jak i ich propagowanie do komponentów.
Jednym z kluczowych podejść jest przechwytywanie błędów bezpośrednio w funkcji thunk i aktualizowanie stanu aplikacji tak, aby można było np. wyświetlić komunikat o błędzie. Można również wykorzystać różne poziomy obsługi błędów – od prostych komunikatów po zaawansowane mechanizmy ponawiania zapytań (retry) czy globalne zarządzanie błędami.
Ważne jest także rozróżnianie typów błędów – niektóre mogą wynikać z problemów po stronie serwera (np. błędy HTTP 500), inne z braku połączenia internetowego, a jeszcze inne mogą być spowodowane niepoprawnymi danymi wejściowymi. Dzięki Redux-Thunk możliwe jest dostosowanie logiki obsługi błędów do konkretnych przypadków i odpowiednie reagowanie, np. poprzez automatyczne przekierowanie użytkownika, wyświetlenie powiadomienia lub zapisanie błędu w logach.
Dobrą praktyką jest także przechowywanie informacji o statusie zapytania w stanie Redux – dzięki temu aplikacja może dynamicznie reagować, np. poprzez wyświetlanie wskaźnika ładowania podczas przetwarzania zapytania i ukrywanie go w przypadku sukcesu lub błędu. Odpowiednia obsługa błędów w Redux-Thunk poprawia nie tylko stabilność aplikacji, ale także jej użyteczność i doświadczenie użytkownika.
Dlaczego warto używać Redux-Thunk?
Redux-Thunk to jedno z najpopularniejszych middleware do obsługi operacji asynchronicznych w Redux. Jego główną zaletą jest prostota i elastyczność w zarządzaniu żądaniami sieciowymi i innymi asynchronicznymi działaniami, które wymagają interakcji z Redux Store. Oto kilka kluczowych powodów, dla których warto używać Redux-Thunk:
- Łatwa obsługa operacji asynchronicznych
Redux sam w sobie obsługuje tylko synchroniczne akcje, co oznacza, że nie można bezpośrednio wysyłać żądań API w akcjach Redux. Redux-Thunk rozwiązuje ten problem, umożliwiając tworzenie funkcji akcji, które wykonują operacje asynchroniczne, a następnie aktualizują Store po ich zakończeniu. - Większa kontrola nad przepływem akcji
Dzięki Redux-Thunk możemy wstrzymywać, modyfikować lub anulować akcje w zależności od stanu aplikacji. Na przykład możemy zaimplementować warunek sprawdzający, czy dane są już załadowane, zanim wykonamy kolejne żądanie API, co pomaga uniknąć niepotrzebnych zapytań. - Obsługa efektów ubocznych w jednym miejscu
Redux-Thunk pozwala na scentralizowanie logiki związanej z efektami ubocznymi, takimi jak pobieranie danych, zapisywanie do lokalnej pamięci czy interakcje z API. Dzięki temu logika biznesowa nie jest rozsiana po komponentach, co sprawia, że kod jest bardziej czytelny i łatwiejszy w utrzymaniu. - Prostota w porównaniu do alternatyw
W przeciwieństwie do bardziej zaawansowanych rozwiązań, takich jak Redux-Saga czy Redux-Observable, Redux-Thunk jest stosunkowo prosty w użyciu i nie wymaga nauki dodatkowych koncepcji, takich jak generatory czy RxJS. Jest to szczególnie korzystne dla osób, które dopiero zaczynają pracę z Redux. - Łatwe testowanie akcji i reduktorów
Redux-Thunk pozwala na łatwe testowanie funkcji asynchronicznych, ponieważ możemy testować je niezależnie od komponentów. Możemy także sprawdzać, czy dane akcje zostały poprawnie wywołane i czy stan Redux Store został odpowiednio zmodyfikowany po wykonaniu zapytania.
Podsumowując, Redux-Thunk jest lekkim i skutecznym rozwiązaniem, które doskonale sprawdza się w aplikacjach React korzystających z Redux. Jego prostota, elastyczność i łatwość implementacji sprawiają, że jest jednym z najczęściej wybieranych middleware do zarządzania efektami ubocznymi.
SPRAWDŹ SWOJĄ WIEDZE Z TEMATU redux-thunk
Pytanie
1/5
Alternatywy do Redux-thunk
Alternatywą do Redux-thunk jest Context API, które jest wbudowane bezpośrednio w bibliotekę React. Zapytania asynchroniczne możemy z łatwością tam utworzyć. Praktyczną różnicę zobaczymy dopiero, gdy Context API będzie obsługiwać spory obiekt, w którym będziemy często aktualizować parametry. Może się okazać, że Context API jest wtedy mniej wydajny i zbyt często uruchamia aktualizacje DOM.
Mimo, że Redux jest oddzielną biblioteką to posiada bogatą dokumentację z dobrze opisanymi przykładami. Przykładów dla Redux-Thunk też jest dużo i jest zdecydowanie produkcyjnym rozwiązaniem do utrzymywania stanu aplikacji.
Nasza oferta
Web development
Dowiedz się więcejMobile development
Dowiedz się więcejE-commerce
Dowiedz się więcejProjektowanie UX/UI
Dowiedz się więcejOutsourcing
Dowiedz się więcejPowiązane artykuły
Branded residences – co to jest i jak technologia zmienia rynek luksusowych nieruchomości?
2 wrz 2025
Rynek nieruchomości luksusowych dynamicznie się rozwija, a jednym z najciekawszych trendów ostatnich lat są tzw. branded residences, czyli apartamenty i domy sygnowane przez prestiżowe marki. Łączą one komfort prywatnego życia z udogodnieniami charakterystycznymi dla pięciogwiazdkowych hoteli, odpowiadając na rosnące potrzeby najbardziej wymagających klientów. Kluczową rolę w ich rozwoju odgrywa również technologia – od inteligentnych systemów zarządzania budynkami, przez rozwiązania smart home, aż po cyfrowe usługi concierge.

Voiceboty w biznesie: jak automatyzacja rozmów zmienia obsługę klienta
1 wrz 2025
Ewolucja obsługi klienta w dzisiejszych czasach, przeradza się w coraz bardziej zaawansowane procesy. Kluczową rolę odgrywają w tym Voiceboty, które wprowadzają innowacyjny wymiar do automatyzacji biznesowej. Pozwalają one na usprawnienie komunikacji i oszczędzenie cennego czasu, stając się nieodłącznym elementem nowoczesnych firm.
Czym jest Google Meridian?
1 wrz 2025
W świecie marketingu precyzyjny pomiar skuteczności działań staje się coraz większym wyzwaniem. Zmiany w regulacjach prawnych, odchodzenie od plików cookies i rosnąca złożoność kanałów komunikacji sprawiają, że tradycyjne metody analizy przestają wystarczać. Odpowiedzią na te problemy jest Google Meridian – nowoczesne, otwartoźródłowe narzędzie do Marketing Mix Modeling (MMM), które łączy zaawansowaną analitykę z podejściem privacy-first.
Document Abstraction: co to jest i jak działa?
31 sie 2025
W dzisiejszym świecie zalewanym przez ogromne ilości danych coraz trudniej jest dotrzeć do naprawdę istotnych informacji. Długie raporty, obszerne dokumenty prawne czy złożone publikacje naukowe wymagają czasu i wysiłku, by je przeanalizować. Rozwiązaniem tego problemu staje się Document Abstraction, czyli inteligentne streszczanie i przekształcanie treści z użyciem sztucznej inteligencji.
Project Mariner – agent AI od Google, który przejmuje kontrolę nad Twoją przeglądarką
30 sie 2025
Sztuczna inteligencja coraz mocniej wkracza w nasze codzienne życie, a Google właśnie zapowiada projekt, który może całkowicie zmienić sposób korzystania z internetu. Project Mariner to agent AI wbudowany w przeglądarkę, zdolny do samodzielnego wykonywania wielu zadań, które do tej pory wymagały naszej uwagi. Od wyszukiwania informacji, przez zakupy online, aż po organizację pracy – Mariner ma działać jak inteligentny operator internetu. Czy to przełom, który odciąży użytkowników, czy też kolejny krok ku oddaniu zbyt dużej kontroli w ręce technologii?
Google Tag Gateway – czym jest i jak poprawia skuteczność śledzenia danych?
29 sie 2025
W świecie marketingu internetowego coraz trudniej jest zbierać pełne i wiarygodne dane o użytkownikach. Coraz więcej przeglądarek i rozszerzeń blokuje standardowe tagi analityczne oraz reklamowe, co prowadzi do zaniżonych raportów i utraty części konwersji. Google, chcąc odpowiedzieć na te wyzwania, wprowadziło rozwiązanie o nazwie Google Tag Gateway. To prosta w implementacji technologia, która pozwala serwować tagi z własnej domeny i dzięki temu zwiększać skuteczność śledzenia bez kosztownych wdrożeń serwerowych.
PropFinTech: Innowacje napędzające rynek nieruchomości
29 sie 2025
Rynek nieruchomości od lat uchodzi za jedną z najbardziej stabilnych, ale i tradycyjnych gałęzi gospodarki. Dziś jednak przechodzi dynamiczną transformację dzięki połączeniu innowacji technologicznych i finansowych, które określamy mianem PropFinTech. Nowe rozwiązania – od tokenizacji aktywów i crowdfundingu, po sztuczną inteligencję i wirtualną rzeczywistość – zmieniają sposób, w jaki kupujemy, inwestujemy i zarządzamy nieruchomościami. To rewolucja, która nie tylko ułatwia życie inwestorom i klientom, ale także otwiera rynek na zupełnie nowe możliwości.
Zobacz wszystkie artykuły