Moduł 20 – Efekty asynchroniczne w Redux
Ten moduł poświęcony jest rozwiązywaniu problemów związanych z asynchronicznymi operacjami w zarządzaniu stanem aplikacji za pomocą biblioteki Redux.
Nauczysz się, jak skutecznie obsługiwać operacje asynchroniczne w Redux, takie jak ładowanie danych z serwera czy wysyłanie żądań HTTP. Przejdziemy przez wszystkie istotne zagadnienia, które pozwolą Ci opanować efekty asynchroniczne w kontekście Redux.
Rozpoczniemy od wprowadzenia do tematu i zrozumienia, dlaczego obsługa operacji asynchronicznych w Redux może być wyzwaniem. Następnie skupimy się na praktycznych aspektach, takich jak tworzenie akcji asynchronicznych przy użyciu biblioteki Redux Thunk, która pozwolą Ci łatwo tworzyć akcje asynchroniczne w Redux.
W ramach modułu stworzysz również funkcję pomocniczą o nazwie createAsyncDuck
, która ułatwi tworzenie asynchronicznych akcji w Redux, wraz z obsługą stanów ładowania i błędów – idealne narzędzie do wysyłania zapytań HTTP przy pomocy Redux i Redux Thunk oraz Redux Duck.
Będziesz miał/a również okazję praktycznie zastosować zdobytą wiedzę, uczestnicząc w projekcie praktycznym. Zaprojektujesz aplikację, która będzie sprawdzać, czy użytkownik jest administratorem, stworzysz routing dla panelu administracyjnego, zaprojektujesz układ administracyjny, a także będziesz obsługiwać różne operacje na lekcjach i kursach.
📚 Zawartość modułu
Moduł "Efekty asynchroniczne w Redux" jest podzielony na 16 lekcji:
- Introduction + loading users app: Rozpocznijmy ten moduł od wprowadzenia do tematu oraz stworzenia aplikacji wczytującej asynchronicznie użytkowników, na której będziemy pracować dalej.
- Loading users with Redux: Przeniesiemy ładowanie danych użytkowników do Redux.
- Loading users with Redux Thunk: Skorzystamy z biblioteki Redux Thunk, aby usprawnić ładowanie danych użytkowników w Redux.
- Redux flow on diagrams: Zobacz, jak przedstawić przepływ danych w Redux za pomocą diagramów, aby lepiej zrozumieć i wizualizować operacje wykonywane na stanach.
- createAsyncDuck: Stworzymy również funkcję pomocniczą o nazwie
createAsyncDuck
, która ułatwi tworzenie asynchronicznych akcji w Redux, wraz z obsługą stanów ładowania i błędów. - Actions with setTimeout: Przeanalizujmy działanie funkcji setTimeout w kontekście akcji Redux, aby opóźniać i kontrolować wywołanie akcji.
- Callback on createAsyncDuck: Wykorzystamy callbacki w
createAsyncDuck
. - Project 0.0 checking if user is admin: W projekcie praktycznym zaprojektujemy funkcjonalność sprawdzania, czy użytkownik jest administratorem.
- Project 0.1 Admin routes: Skonfigurujemy routing dla panelu administracyjnego.
- Project 0.2 Admin layout: Stworzymy funkcjonalny układ dla panelu administracyjnego w projekcie.
- Project 0.3 Lessons – getAll: Zajmiemy się pobieraniem lekcji w projekcie z wykorzystaniem Redux.
- Project 0.4 Lessons – create: Dowiemy się, jak tworzyć nowe lekcje i zintegrujemy te operacje z Redux.
- Project 0.5 Lessons – update: Nauczymy się aktualizować istniejące lekcje w projekcie, wykorzystując Redux.
- Project 0.6 Lessons – remove: Opanujemy operacje usuwania lekcji w projekcie, korzystając z Redux.
- Project 0.7 Courses: Stworzymy panel do zarządzania kursami (zawierającymi lekcje).
- Project 0.8 Deployment: Wdrożymy aplikację na serwer, aby była dostępna publicznie i gotowa do użytku.
👀 Zobacz przykładową lekcję z tego modułu kursu:
👨💻 Zobacz przykładowy kod z tej lekcji:
💸 Kup kurs
Kup cały kurs CodeRoad – TUTAJ
Kup ten moduł kursu – TUTAJ