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

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