Redux-Thunk

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.

Czy szukasz wykonawcy Redux-Thunk ?

Sprawdź case studies

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

Co to jest Redux Thunk?

Biblioteka do zarządzania stanem aplikacji

Narzędzie do analizy danych

Middleware dla Redux do obsługi akcji asynchronicznych

Framework do tworzenia aplikacji webowych

Sprawdź odpowiedź

Jak dodać Redux Thunk do projektu?

Poprzez dodanie go do pliku konfiguracyjnego aplikacji

Poprzez zainstalowanie pakietu "redux-thunk" i dodanie go jako middleware do Redux store

Poprzez edycję plików konfiguracyjnych serwera

Poprzez dodanie go do panelu administracyjnego

Sprawdź odpowiedź

W jakim celu stosuje się thunki w Redux?

Do obsługi akcji asynchronicznych, takich jak operacje API

Do animacji elementów interfejsu użytkownika

Do walidacji danych wejściowych użytkownika

Do optymalizacji wydajności aplikacji

Sprawdź odpowiedź

Co zwraca thunk w Redux?

Obiekt z informacjami o błędzie

Funkcję, która przyjmuje dwa argumenty: "dispatch" i "getState"

Obiekt stanu aplikacji

Wartość przekazaną jako argument do thunka

Sprawdź odpowiedź

Jakie są dwa główne elementy używane w Redux Thunk do obsługi akcji asynchronicznych?

"connect" i "mapStateToProps"

"reducer" i "action"

"store" i "actionCreator"

"dispatch" i "getState"

Sprawdź odpowiedź

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.