Moduł 20 – Efekty asynchroniczne w Redux

Kurs front-end 4 cze 2023

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:

  1. 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.
  2. Loading users with Redux: Przeniesiemy ładowanie danych użytkowników do Redux.
  3. Loading users with Redux Thunk: Skorzystamy z biblioteki Redux Thunk, aby usprawnić ładowanie danych użytkowników w Redux.
  4. 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.
  5. 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.
  6. Actions with setTimeout: Przeanalizujmy działanie funkcji setTimeout w kontekście akcji Redux, aby opóźniać i kontrolować wywołanie akcji.
  7. Callback on createAsyncDuck: Wykorzystamy callbacki w createAsyncDuck.
  8. Project 0.0 checking if user is admin: W projekcie praktycznym zaprojektujemy funkcjonalność sprawdzania, czy użytkownik jest administratorem.
  9. Project 0.1 Admin routes: Skonfigurujemy routing dla panelu administracyjnego.
  10. Project 0.2 Admin layout: Stworzymy funkcjonalny układ dla panelu administracyjnego w projekcie.
  11. Project 0.3 Lessons – getAll: Zajmiemy się pobieraniem lekcji w projekcie z wykorzystaniem Redux.
  12. Project 0.4 Lessons – create: Dowiemy się, jak tworzyć nowe lekcje i zintegrujemy te operacje z Redux.
  13. Project 0.5 Lessons – update: Nauczymy się aktualizować istniejące lekcje w projekcie, wykorzystując Redux.
  14. Project 0.6 Lessons – remove: Opanujemy operacje usuwania lekcji w projekcie, korzystając z Redux.
  15. Project 0.7 Courses: Stworzymy panel do zarządzania kursami (zawierającymi lekcje).
  16. 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

💪 Odbierz bezpłatny kurs!

Tagi

Mateusz Choma

I am a scientific mind, passionate about technology, an engineer "squared" - a graduate of two universities in Lublin ;) But mostly, I'm a JS developer.