Redux: vzor správy stavu v React Native
Redux — předvídatelný kontejner pro správu stavu pro JavaScriptové aplikace, vytvořený Danem Abramovem v roce 2015. Redux implementuje jednosměrný tok dat založený na architektuře Flux: stav je uložen v jediném Store, mění se pouze pomocí čistých funkcí Reducer a je iniciován prostřednictvím Action s Dispatch. Podle údajů npm Trends si Redux udržuje více než 7 milionů týdenních stažení a zůstává standardem pro správu stavu v React Native a webových aplikacích.
Hlavní body
- Store — jediný zdroj pravdy, uchovávající celý strom stavu aplikace
- Action — objekt s polem type, popisující záměr změnit stav
- Reducer — čistá funkce (prevState, action) => newState bez vedlejších účinků
- Dispatch — metoda Store pro odeslání Action do Reducer
- Middleware — mezivrstva mezi dispatch a reducer pro asynchronní operace a logování
Co je Redux?
Redux — architektonický vzor a knihovna pro správu stavu, založený na třech principech: jediný zdroj pravdy (single source of truth), stav pouze pro čtení (read-only) a změny prostřednictvím čistých funkcí. Na rozdíl od MVC, kde model může měnit stav nepředvídatelně, Redux zaručuje determinismus: při stejných vstupních datech je výsledek vždy stejný.
Redux byl inspirován architekturou Flux od Facebooku a jazykem Elm. Hlavní rozdíl oproti Flux — jediný Store místo několika. V Redux je celý stav aplikace — objekty, pole, příznaky načítání — uložen v jednom stromě. To zjednodušuje ladění, testování a obnovu stavu (time-travel debugging). Vývojář může uložit celý Store, reprodukovat sekvenci Action a vidět, jak se stav měnil v každém kroku.
Podle údajů State of JS 2025 si 68 % respondentů, kteří používají správu stavu, vybírá Redux nebo Redux Toolkit. Nástroj je podporován všemi moderními frameworky: React, React Native, Angular, Vue a dokonce i čistým JavaScriptem bez frameworků.
Jednosměrný tok dat
Unidirectional data flow — klíčový princip Redux, při kterém se data pohybují striktně jedním směrem: View → Action → Dispatch → Reducer → Store → View. Žádná komponenta nemůže přímo změnit Store. View se pouze přihlašuje ke změnám prostřednictvím useSelector nebo connect a iniciuje změny prostřednictvím dispatch.
Cyklus práce Redux: uživatel stiskne tlačítko → komponenta zavolá dispatch({ type: 'INCREMENT' }) → Store předá Action do Root Reducer → Reducer vypočítá nový stav → Store informuje odběratele → View se překreslí s novými daty. Tento cyklus zaručuje, že každá změna má explicitní příčinu v podobě konkrétního Action.
DevTools — vestavěný nástroj Redux pro monitorování každého Action, stavu Store a doby provádění. Vývojář vidí seznam všech odeslaných Action, rozdíl stavu (diff) před a po, a může se vrátit k libovolnému předchozímu stavu. To činí ladění složitých stavů desítkykrát rychlejší ve srovnání s běžným logováním.
Klíčové komponenty Redux
Store — objekt obsahující celý strom stavu. Vytváří se pomocí configureStore (RTK) nebo createStore. Store poskytuje tři metody: getState() pro čtení, dispatch(action) pro změnu a subscribe(listener) pro přihlášení. V Redux Toolkit Store již zahrnuje middleware, DevTools a podporu pro slice.
TypeScript
import { configureStore } from '@reduxjs/toolkit'
interface CounterState {
value: number
}
const initialState: CounterState = { value: 0 }
function counterReducer(
state = initialState,
action: { type: string }
): CounterState {
switch (action.type) {
case 'INCREMENT':
return { value: state.value + 1 }
default:
return state
}
}
const store = configureStore({ reducer: counterReducer })
store.dispatch({ type: 'INCREMENT' })
console.log(store.getState()) // { value: 1 }Action a Action Creator — Action je objekt s povinným polem type (řetězcová konstanta) a volitelným payload (data). Action Creator — funkce, která vrací Action. V Redux Toolkit se používá createAction pro generování Action s automatickou typizací.
Reducer — čistá funkce, která přijímá aktuální stav a Action a vrací nový stav. Reducer by neměl: mutovat state (vrací nový objekt), volat API, generovat náhodná čísla nebo přistupovat k Date. Neměnnost je zajištěna operátorem spread ... nebo Immer (vestavěný v RTK).
| Komponenta | Odpovědnost | Omezení |
|---|---|---|
| Store | Ukládání stavu, dispatch, subscribe | Jedna na aplikaci |
| Action | Popis záměru změnit stav | Musí mít type |
| Reducer | Výpočet nového stavu | Čistá funkce, bez vedlejších účinků |
| Dispatch | Odeslání Action do Reducer | Ve výchozím nastavení synchronní |
| Selector | Extrakce dat z Store | Memoizace pomocí createSelector |
Middleware a Redux Thunk
Middleware — řetězec funkcí vložený mezi volání dispatch a okamžik, kdy Action dosáhne Reducer. Každý middleware obdrží API Store a může Action logovat, modifikovat, zpožďovat nebo rušit. Redux Thunk — standardní middleware pro asynchronní operace, umožňující dispatchovat funkce místo objektů.
JavaScript
import { createAsyncThunk } from '@reduxjs/toolkit'
export const fetchUser = createAsyncThunk(
'users/fetchById',
async (userId: number, { rejectWithValue }) => {
const response = await fetch(`/api/users/${userId}`)
if (!response.ok)
return rejectWithValue('Failed to fetch')
return await response.json()
}
)Populární middleware: Redux Thunk — pro jednoduché asynchronní volání, Redux Saga — pro složité scénáře se saga-generátory (debounce, race, paralelní požadavky), Redux Observable — založený na RxJS pro reaktivní toky. V Redux Toolkit se middleware připojuje pomocí parametru middleware v configureStore.
Podle průzkumu State of JS 2025 je Thunk používán v 72 % projektů Redux, Saga v 18 %, Observable v 5 %. Pro většinu aplikací je kombinace Thunk + RTK Query dostatečná k pokrytí 95 % scénářů asynchronní práce s daty.
Redux Toolkit a RTK Query
Redux Toolkit (RTK) — oficiální, doporučený způsob psaní logiky Redux, vydaný v roce 2019. RTK zahrnuje configureStore, createSlice, createAsyncThunk a createEntityAdapter, čímž snižuje boilerplate kód Redux o 60–70 %. Místo ručního vytváření Action Creator, Reducer a typů se používá jediný createSlice.
TypeScript
import { createSlice, PayloadAction } from '@reduxjs/toolkit'
const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: {
increment(state) { state.value += 1 },
incrementByAmount(state, action: PayloadAction<number>) {
state.value += action.payload
}
}
})
export const { increment, incrementByAmount } = counterSlice.actions
export default counterSlice.reducerRTK Query — vestavěné řešení pro práci s API založené na Redux Toolkit. Umožňuje deklarativní definici endpointů pomocí createApi s automatickým generováním hooků, cacheováním, invalidací tagů a optimistickými aktualizacemi. RTK Query nahrazuje ruční psaní Thunk, Reducer a Selector pro každý požadavek API.
Entity Adapter — nástroj createEntityAdapter pro normalizaci kolekcí entit. Poskytuje vestavěné CRUD reducery, selektory a řazení pro pole objektů. Pokud Store ukládá seznamy uživatelů, produktů nebo objednávek — Entity Adapter snižuje redukční kód o 80 %.
Redux v React Native
React Native Redux — standardní kombinace pro mobilní aplikace v JavaScriptu. Redux se integruje prostřednictvím Provider z react-redux, který obaluje kořenovou komponentu aplikace. Hooky useSelector a useDispatch poskytují komponentám přístup ke stavu bez props drilling. Persist — redux-persist ukládá Store do AsyncStorage nebo MMKV a obnovuje stav po restartu aplikace.
Middleware pro React Native: redux-flipper pro ladění přes Flipper, redux-observable pro reaktivní toky s nativními ovladači, react-native-mmkv pro rychlé trvalé úložiště. Navigační plugin redux-first-router propojuje obrazovky se Store, což umožňuje obnovení stavu obrazovky při návratu.
V React Native se Redux používá společně se strategií network-first: aplikace se nejprve pokusí načíst data ze serveru, poté je cacheuje v Store pomocí RTK Query nebo redux-persist. Režim offline je dosažen kombinací Redux + NetInfo + fronty Action pro opětovné odeslání při obnovení připojení.
Často kladené otázky
Čím se Redux liší od Context API v Reactu?
Redux — plnohodnotné řešení se Store, DevTools, Middleware a neměnným stavem. Context API — vestavěný mechanismus Reactu pro přenos dat bez props drilling. Context je vhodný pro globální motivy a lokalizaci, Redux — pro složitý stav s asynchronními operacemi, cacheováním a laděním. Ve velkých aplikacích Context způsobuje zbytečné překreslování, Redux se selektory tento problém řeší.
Co je Immer v Redux Toolkit?
Immer — knihovna pro neměnnou práci se stavem, vestavěná v Redux Toolkit. Immer umožňuje psát reducery, jako byste přímo mutovali state: state.value += 1. Pod kapotou Immer vytváří proxy objekt (draft), sleduje změny a vrací nový neměnný objekt. To snižuje objem kódu reducerů o 50 % a eliminuje náhodné mutace.
Jak testovat Redux?
Logika Redux se testuje izolovaně: Reducer — čistá funkce, stačí ji zavolat s různými Action a zkontrolovat výsledek. Action Creator — zkontrolovat vrácený objekt. Thunk — zamokovat API, zavolat dispatch a zkontrolovat, které Action byly odeslány. Komponenta s useSelector — použít Provider s testovacím Store v rendereru. Redux DevTools pomáhají napsat test reprodukováním sekvence Action z reálné relace.
Kdy použít Redux místo useState?
useState je dostačující pro lokální stav jedné komponenty: text pole, otevřený/zavřený modál. Redux je potřeba, když je stav sdílen mezi mnoha obrazovkami, vyžaduje asynchronní synchronizaci (data ze serveru), musí být zachován mezi restartováním aplikace (persist) nebo vyžaduje time-travel ladění. Pro malé aplikace je Redux nadbytečný — použijte Context + useReducer.
Co je normalize v Redux?
Normalizr — knihovna pro normalizaci vnořených dat do ploché struktury Store. Místo ukládání hlubokých objektů jako user.posts[0].comments vytváří normalizace slovníky: entities.users, entities.posts, entities.comments s odkazy podle ID. To zjednodušuje aktualizaci jedné entity na všech místech a urychluje selektory. Redux Toolkit doporučuje normalizovaná data pro složité modely.
Shrnutí
- Redux — předvídatelný kontejner stavu s jediným Store a čistými Reducery
- Action — objekt s type, Reducer — čistá funkce, Dispatch — mechanismus odesílání
- Redux Toolkit — oficiální API s createSlice, createAsyncThunk a RTK Query
- Middleware — mezivrstva pro asynchronnost: Thunk, Saga, Observable
- React Native se integruje přes Provider, useSelector a redux-persist pro offline režim
- DevTools — time-travel ladění s reprodukcí každého Action
- Normalizr — normalizace dat pro efektivní selektory a aktualizace
Vyvineme mobilní aplikaci na klíč
IT Sectr vytváří aplikace pro iOS a Android pro startupy a podniky od roku 2017. Poradíme vám a navrhneme nejlepší řešení.
Přečtěte si také