Mateusz Jabłoński - Blog, programowanie, rozwój
EN

Reaktywne programowanie aplikacji webowych w oparciu o React i Redux

Warsztaty szczegółowo wprowadzają w świat zarządzania stanem w aplikacjach Reactowych z wykorzystaniem Reduxa. Uczestnicy nauczą się budować struktury akcji, reduktorów i store’ów w sposób skalowalny oraz pracować z middleware, narzędziami deweloperskimi i technikami optymalizacji. Przeanalizujemy przepływ danych w architekturze unidirectional data flow i pokażemy, jak wykorzystać go do kontroli złożonych procesów biznesowych. Po warsztatach uczestnicy potrafią projektować i rozwijać duże aplikacje, w których zarządzanie stanem jest przejrzyste, przewidywalne i łatwe w utrzymaniu — zarówno indywidualnie, jak i w większym zespole.

Czas trwania

3 dni

Koszt na osobę

3375 PLN netto

dla grupy min. 4 osób

Ocena uczestników

4.81 / 5

Na podstawie 10 odpowiedzi
Zapytaj o termin

Dla kogo jest
to szkolenie

Ten warsztat najlepiej działa wtedy, gdy uczestnicy chcą przełożyć wiedzę na praktyczne decyzje projektowe i kod pisany w realnych warunkach.

Szkolenie jest dla Ciebie jeśli

  • chcesz uporządkować wiedzę i zobaczyć, jak stosować ją w codziennej pracy
  • pracujesz przy aplikacjach lub narzędziach, które muszą być czytelne, rozwijalne i testowalne
  • lubisz praktyczne ćwiczenia, dyskusję o trade-offach i przykłady bliskie realnym projektom

To nie jest najlepszy wybór jeśli

  • szukasz wyłącznie teoretycznego wykładu bez pracy warsztatowej
  • potrzebujesz bardzo podstawowego wprowadzenia od zera do programowania
  • oczekujesz gotowych recept bez omawiania kontekstu, ograniczeń i konsekwencji decyzji

Prowadzący

Mateusz
Jabłoński

Senior Frontend Developer, trener i autor materiałów. Od 2016 roku prowadzę szkolenia z JavaScriptu, TypeScriptu, Reacta, testowania oraz narzędzi wspierających pracę programistów.

14+lat doświadczenia
2016od tego roku szkolę
4.7 / 5na podstawie 143 odpowiedzi
Poznaj mnie lepiej

Program

Wprowadzenie architektury opartej o Redux

  1. Omówienie unidirectional data flow w React
  2. Wyjaśnienie potrzeby zarządzania stanem globalnym w większych aplikacjach
  3. Wskazanie problemów wynikających z prop drilling i rozproszonego stanu

Instalacja i konfiguracja Redux w aplikacji React

  1. Instalacja `redux` i `react-redux`
  2. Tworzenie folderu `store` oraz struktura aplikacji oparta na Reduxie
  3. Konfiguracja `store` i integracja z aplikacją za pomocą `Provider`

Tworzenie reduktorów i akcji

  1. Definicja reduktora: czym jest reduktor i jak działa
  2. Tworzenie akcji, akcje synchroniczne i asynchroniczne
  3. Korzystanie z `combineReducers` dla zarządzania wieloma reduktorami

Wykorzystanie selektorów i mapowanie stanu do komponentów

  1. Używanie funkcji `useSelector` do dostępu do globalnego stanu
  2. Mapowanie stanu do propsów przy użyciu `mapStateToProps`
  3. Przykłady selektorów obliczeniowych (memoizacja za pomocą `reselect`)

Dispatch i modyfikacja stanu za pomocą akcji

  1. Korzystanie z `useDispatch` do wywoływania akcji w komponentach funkcyjnych
  2. Mapowanie akcji do propsów w komponentach klasowych z `mapDispatchToProps`
  3. Obsługa asynchronicznych operacji za pomocą `redux-thunk` lub `redux-saga`

Middleware i rozszerzenia Reduxa

  1. Wprowadzenie do middleware: jak działa i do czego służy
  2. Korzystanie z `redux-logger` do debugowania
  3. Wprowadzenie i implementacja `redux-thunk` lub `redux-saga` do zarządzania efektami ubocznymi

Organizacja dużych aplikacji z Reduxem

  1. Podział aplikacji na moduły: duck pattern i feature-based structure
  2. Dynamika ładowania reduktorów: lazy loading
  3. Zarządzanie złożonym stanem za pomocą normalizacji danych

Debugowanie i testowanie aplikacji Redux

  1. Korzystanie z Redux DevTools do śledzenia zmian stanu i akcji
  2. Pisanie testów jednostkowych dla reducerów i akcji za pomocą `jest`
  3. Testowanie komponentów związanych z Reduxem z `react-testing-library`

Optymalizacja wydajności aplikacji z Reduxem

  1. Używanie `React.memo` oraz `useMemo` do zapobiegania niepotrzebnym renderom
  2. Memoizacja selektorów przy pomocy `reselect`
  3. Analiza wydajności z użyciem narzędzi takich jak `why-did-you-render`

Alternatywy dla Redux oraz przyszłość zarządzania stanem

  1. Krótkie wprowadzenie do Context API jako alternatywy dla Reduxa
  2. Inne biblioteki do zarządzania stanem, takie jak MobX lub Zustand
  3. Nowe trendy: Redux Toolkit i skrócenie boilerplate'u w Redux

Warsztaty, które
już za nami

Poniżej znajdziesz listę edycji warsztatów, które poprowadziłem. Każda z nich to nowa grupa, inne wyzwania i konkretne efekty.

Łącznie edycji1

  • Zakład Ubezpieczeń Społecznych

    Sages

    4.81(średnia ocen)