Redux-Thunk
minuta 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.
Ostatnie oferty pracy
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.
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.
Powiązane artykuły
Czym jest Google AdSense i jak działa?
2 cze 2023
Google AdSense to program reklamowy, który umożliwia właścicielom stron internetowych wyświetlanie reklam Google na ich serwisach. W ramach systemu AdSense reklamy są dobrze dopasowane do treści strony, co zwiększa szanse na kliknięcie. Jak działa AdSense? Czytaj dalej, by poznać odpowiedź.

SilverStripe - łatwy sposób na wprowadzenie zmian na stronie internetowej
2 cze 2023
SilverStripe to łatwy w użyciu CMS umożliwiający łatwe i szybkie wprowadzanie zmian na stronie internetowej bez konieczności wnikania w kod HTML. Dzięki tej platformie nawet osoby bez doświadczenia mogą zarządzać treścią na stronie i dokonywać niezbędnych modyfikacji.
CMF - czy warto inwestować czas i środki w tę technologię?
2 cze 2023
CMF to technologia, która może przyspieszyć i ułatwić tworzenie projektów internetowych. Jednak, czy warto na nią stawiać? Sprawdźmy, czym jest CMF i czym różni się od CMS, a także jakie są jej zalety i wady.
Dlaczego atrybut alt jest ważny dla SEO?
1 cze 2023
Atrybut alt w tagu IMG to jedna z najważniejszych kwestii związanych z SEO i dostępnością. Umożliwia on robotom wyszukiwarek zrozumienie treści obrazka oraz wpływa na ładowanie strony. Dowiedz się dlaczego warto dbać o to, by każdy obraz miał przypisany unikalny opis.
Formularz kontaktowy - prosta droga do usprawnienia komunikacji z klientami
1 cze 2023
Formularz kontaktowy to nieodzowny element komunikacji z klientami. Dzięki niemu ułatwiamy im kontakt z naszą firmą, a my zyskujemy lepszą kontrolę nad przepływem informacji. W artykule przedstawię kilka prostych wskazówek, jak zaprojektować formularz kontaktowy, aby był skuteczny i efektywny.
Zobacz wszystkie artykuły