Definicja #
Redux to biblioteka JavaScript do zarządzania stanem aplikacji, oparta na trzech fundamentalnych zasadach:
- Jedno źródło prawdy (Single source of truth) — cały stan aplikacji przechowywany w jednym obiekcie (store)
- Stan jest tylko do odczytu (State is read-only) — jedynym sposobem zmiany stanu jest wysłanie akcji (action)
- Zmiany dokonywane przez czyste funkcje (Changes are made with pure functions) — reducery to czyste funkcje (previousState, action) => newState
Kluczowe elementy Redux:
- Store — kontener przechowujący drzewo stanu
- Action — obiekt opisujący co się stało (type + payload)
- Reducer — czysta funkcja zwracająca nowy stan
- Dispatch — wysyłanie akcji do store
- Selector — funkcja wyciągająca dane ze stanu
Redux Toolkit (RTK) to oficjalne, opinionated narzędzie upraszczające pisanie Redux: createSlice, createAsyncThunk, RTK Query. RTK jest dziś zalecanym sposobem pisania Redux.
Zastosowania #
Redux stosuje się do:
- Zarządzania złożonym stanem aplikacji React — dane użytkownika, koszyk, filtry, nawigacja
- Synchronizacji stanu między wieloma komponentami bez prop drilling
- Cachowania danych API i zarządzania stanem asynchronicznych żądań (RTK Query)
- Debugowania aplikacji — Redux DevTools umożliwiają time-travel debugging i podgląd historii akcji
- Dużych aplikacji enterprise z wieloma developerami — przewidywalność i testowalność logiki
Ścieżka nauki #
Przed nauką Redux niezbędna jest dobra znajomość JavaScript (ES6+) i React — zrozumienie komponentów, hooków i przepływu danych.
Zacznij od:
- Koncepcja niezmienności (immutability) i czyste funkcje
- Wzorzec Flux — przepływ danych w jednym kierunku
- Redux Toolkit (RTK) — zacznij od razu od RTK, nie od vanilla Redux
createSlice,configureStore,useSelector,useDispatch
Następnie poznaj:
- createAsyncThunk — asynchroniczne akcje (fetch danych z API)
- RTK Query — zarządzanie stanem danych API z cachowaniem
- Redux DevTools — debugowanie i time-travel
- Alternatywy: Zustand, Jotai, Context API — kiedy Redux jest zbędny
FAQ #
- Czy Redux jest przestarzały?
- Redux nie jest przestarzały, ale jego popularność zmniejszyła się wraz z pojawieniem się prostszych alternatyw (Zustand, Jotai, React Query) i ulepszeniami React (Context API, hooks). Redux Toolkit uproszczył kod Redux, a RTK Query rozwiązał problem zarządzania stanem serwera. Duże aplikacje enterprise nadal często używają Redux.
- Kiedy używać Redux, a kiedy Context API?
- Context API sprawdza się dla prostego stanu globalnego (motyw, język, użytkownik). Redux jest lepszy przy złożonej logice biznesowej, wielu synchronizowanych slice'ach stanu, potrzebie debugowania i dużych zespołach. RTK Query zastępuje większość potrzeb związanych ze stanem serwera.
- Ile zarabia React Developer znający Redux?
- Mid/Senior React Developer ze znajomością Redux i RTK zarabia w Polsce od 12 000 do 22 000 zł brutto. Redux jest jedną z oczekiwanych umiejętności w ofertach dla doświadczonych frontendowców.
- Czym jest Redux Toolkit?
- Redux Toolkit (RTK) to oficjalna, opinionated biblioteka do pisania kodu Redux. Eliminuje boilerplate — zastępuje akcje, action creators i reducery uproszczonymi slice'ami. Jest dziś rekomendowanym sposobem używania Redux.