Redux: állapotkezelési minta a React Native-ben
Redux — egy kiszámítható állapotkezelő konténer JavaScript alkalmazások számára, amelyet Dan Abramov hozott létre 2015-ben. A Redux egyirányú adatfolyamot valósít meg a Flux architektúra alapján: az állapot egyetlen Store-ban tárolódik, csak tiszta Reducer függvényeken keresztül módosul, és Action segítségével Dispatch-szel indul. A npm Trends adatai szerint a Redux hetente több mint 7 millió letöltést tart fenn, és továbbra is szabvány marad az állapotkezelésben a React Native és webalkalmazások terén.
Főbb pontok
- Store — az egyetlen igazságforrás, amely az alkalmazás teljes állapotfáját tárolja
- Action — type mezővel rendelkező objektum, amely az állapotváltoztatási szándékot írja le
- Reducer — tiszta függvény (prevState, action) => newState mellékhatások nélkül
- Dispatch — a Store metódusa az Action Reducer-be küldéséhez
- Middleware — köztes réteg a dispatch és a reducer között aszinkron műveletekhez és naplózáshoz
Mi az a Redux?
Redux — egy architekturális minta és könyvtár az állapotkezeléshez, három elven alapulva: egyetlen igazságforrás (single source of truth), csak olvasható állapot (read-only) és változtatások tiszta függvényeken keresztül. Ellentétben az MVC-vel, ahol a modell kiszámíthatatlanul változtathatja az állapotot, a Redux garantálja a determinizmust: azonos bemeneti adatokkal az eredmény mindig ugyanaz.
A Redux-ot a Facebook Flux architektúrája és az Elm nyelv ihlette. A fő különbség a Flux-hoz képest — egyetlen Store több helyett. A Redux-ban az alkalmazás teljes állapota — objektumok, tömbök, betöltési jelzők — egyetlen fában tárolódik. Ez leegyszerűsíti a hibakeresést, tesztelést és állapot-visszaállítást (time-travel debugging). A fejlesztő elmentheti a teljes Store-t, reprodukálhatja az Action sorozatot, és láthatja, hogyan változott az állapot minden lépésnél.
A State of JS 2025 adatai szerint az állapotkezelést használó válaszadók 68%-a Redux-ot vagy Redux Toolkit-et választ. Az eszközt minden modern keretrendszer támogatja: React, React Native, Angular, Vue, sőt tiszta JavaScript keretrendszer nélkül is.
Egyirányú adatfolyam
Unidirectional data flow — a Redux kulcsfontosságú elve, ahol az adatok szigorúan egy irányba mozognak: View → Action → Dispatch → Reducer → Store → View. Egyetlen komponens sem változtathatja meg közvetlenül a Store-t. A View csak feliratkozik a változásokra a useSelector vagy connect segítségével, és a dispatch-en keresztül kezdeményez változtatásokat.
A Redux működési ciklusa: a felhasználó megnyom egy gombot → a komponens meghívja a dispatch({ type: 'INCREMENT' })-t → a Store továbbítja az Action-t a Root Reducer-nek → a Reducer kiszámítja az új állapotot → a Store értesíti a feliratkozókat → a View újrarajzolódik az új adatokkal. Ez a ciklus garantálja, hogy minden változásnak egyértelmű oka van egy konkrét Action formájában.
DevTools — a Redux beépített eszköze az egyes Action-ök, a Store állapotának és a végrehajtási időnek a figyelésére. A fejlesztő látja az összes elküldött Action listáját, az állapotváltozást (diff) előtte és utána, és visszatérhet bármely előző állapothoz. Ez a komplex állapotok hibakeresését tízszer gyorsabbá teszi a szokásos naplózáshoz képest.
A Redux kulcsfontosságú összetevői
Store — a teljes állapotfát tartalmazó objektum. A configureStore (RTK) vagy createStore segítségével hozható létre. A Store három metódust biztosít: getState() olvasáshoz, dispatch(action) módosításhoz és subscribe(listener) feliratkozáshoz. A Redux Toolkit-ben a Store már tartalmaz middleware-t, DevTools-t és slice támogatást.
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 és Action Creator — az Action egy objektum a kötelező type mezővel (string konstans) és opcionális payload-dal (adatok). Az Action Creator — egy függvény, amely Action-t ad vissza. A Redux Toolkit-ben a createAction segítségével automatikus típusozással lehet Action-öket generálni.
Reducer — tiszta függvény, amely megkapja az aktuális állapotot és az Action-t, és visszaadja az új állapotot. A Reducer nem: mutálhat state-et (új objektumot ad vissza), hívhat API-t, generálhat véletlen számokat vagy érhet el Date-t. A megváltoztathatatlanságot a spread operátor ... vagy az Immer (az RTK-be építve) biztosítja.
| Összetevő | Felelősség | Korlátozások |
|---|---|---|
| Store | Állapot tárolása, dispatch, subscribe | Egy alkalmazásonként |
| Action | Állapotváltoztatási szándék leírása | Rendelkeznie kell type-pal |
| Reducer | Új állapot kiszámítása | Tiszta függvény, mellékhatások nélkül |
| Dispatch | Action küldése a Reducer-nek | Alapértelmezetten szinkron |
| Selector | Adatok kinyerése a Store-ból | Memoizáció a createSelector segítségével |
Middleware és Redux Thunk
Middleware — függvénylánc, amely a dispatch hívás és az Action Reducer-be érkezése közé ékelődik. Minden middleware megkapja a Store API-t, és naplózhatja, módosíthatja, késleltetheti vagy megszakíthatja az Action-t. Redux Thunk — szabványos middleware aszinkron műveletekhez, amely lehetővé teszi függvények dispatch-elését objektumok helyett.
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()
}
)Népszerű middleware-ek: Redux Thunk — egyszerű aszinkron hívásokhoz, Redux Saga — összetett forgatókönyvekhez generátor-sagákkal (debounce, race, párhuzamos kérések), Redux Observable — RxJS alapú reaktív adatfolyamokhoz. A Redux Toolkit-ben a middleware a middleware paraméterrel csatlakoztatható a configureStore-ban.
A State of JS 2025 felmérése szerint a Thunk-ot a Redux projektek 72%-ában használják, a Saga-t 18%-ában, az Observable-t 5%-ában. A legtöbb alkalmazás számára a Thunk + RTK Query kombináció elegendő az aszinkron adatkezelési forgatókönyvek 95%-ának lefedéséhez.
Redux Toolkit és RTK Query
Redux Toolkit (RTK) — a Redux logika írásának hivatalos, ajánlott módja, amely 2019-ben jelent meg. Az RTK tartalmazza a configureStore-t, createSlice-t, createAsyncThunk-ot és createEntityAdapter-t, 60-70%-kal csökkentve a Redux boilerplate kódját. A kézi Action Creator, Reducer és típusok létrehozása helyett egyetlen createSlice használható.
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 — beépített megoldás API-val való munkához a Redux Toolkit alapján. Lehetővé teszi a végpontok deklaratív definiálását a createApi segítségével automatikus hook generálással, gyorsítótárazással, címkék érvénytelenítésével és optimista frissítésekkel. Az RTK Query felváltja a kézi Thunk, Reducer és Selector írást minden API kéréshez.
Entity Adapter — a createEntityAdapter segédprogram entitáskollekciók normalizálásához. Beépített CRUD reducereket, szelektorokat és rendezést biztosít objektumtömbökhöz. Ha a Store felhasználói, termék- vagy rendelési listákat tárol — az Entity Adapter 80%-kal csökkenti a redukciós kódot.
Redux a React Native-ben
React Native Redux — a szabványos kombináció mobil alkalmazásokhoz JavaScript-ben. A Redux a react-redux Provider-én keresztül integrálódik, amely beburkolja az alkalmazás gyökérelemét. A useSelector és useDispatch hook-ok hozzáférést biztosítanak a komponenseknek az állapothoz props drilling nélkül. Persist — a redux-persist elmenti a Store-t AsyncStorage-ba vagy MMKV-ba, visszaállítva az állapotot az alkalmazás újraindítása után.
Middleware React Native-hez: redux-flipper a Flipperen keresztüli hibakereséshez, redux-observable reaktív adatfolyamokhoz natív illesztőprogramokkal, react-native-mmkv gyors perzisztens tároláshoz. A redux-first-router navigációs bővítmény összeköti a képernyőket a Store-ral, lehetővé téve a képernyő állapotának visszaállítását visszatéréskor.
A React Native-ben a Redux a network-first stratégiával együtt használatos: az alkalmazás először megpróbálja betölteni az adatokat a szerverről, majd gyorsítótárazza a Store-ban az RTK Query vagy redux-persist segítségével. Az offline mód a Redux + NetInfo + Action sor kombinációjával érhető el az újraküldéshez a kapcsolat helyreállításakor.
Gyakran Ismételt Kérdések
Miben különbözik a Redux a React Context API-jától?
Redux — teljes körű megoldás Store-ral, DevTools-szal, Middleware-rel és megváltoztathatatlan állapottal. Context API — a React beépített mechanizmusa az adatátvitelhez props drilling nélkül. A Context globális témákhoz és lokalizációhoz alkalmas, a Redux — összetett állapothoz aszinkron műveletekkel, gyorsítótárazással és hibakereséssel. Nagy alkalmazásokban a Context felesleges újrarendereléseket okoz, a Redux szelektorokkal megoldja ezt a problémát.
Mi az Immer a Redux Toolkit-ben?
Immer — egy könyvtár a megváltoztathatatlan állapotkezeléshez, amely a Redux Toolkit-be van építve. Az Immer lehetővé teszi a reducerek írását úgy, mintha közvetlenül mutálnád a state-et: state.value += 1. A motorháztető alatt az Immer létrehoz egy proxy objektumot (draft), nyomon követi a változásokat, és visszaad egy új megváltoztathatatlan objektumot. Ez 50%-kal csökkenti a reducerek kódmennyiségét és kiküszöböli a véletlen mutációkat.
Hogyan teszteljük a Redux-ot?
A Redux logikát elkülönítve teszteljük: Reducer — tiszta függvény, elég különböző Action-ökkel meghívni és ellenőrizni az eredményt. Action Creator — ellenőrizni a visszaadott objektumot. Thunk — kímékelni az API-t, meghívni a dispatch-et és ellenőrizni, mely Action-ök lettek elküldve. Komponens useSelector-rel — használni a Provider-t teszt Store-ral a renderer-ben. Redux DevTools segít tesztet írni az Action sorozat reprodukálásával egy valós munkamenetből.
Mikor használjunk Redux-ot useState helyett?
useState elegendő egy komponens lokális állapotához: mező szövege, nyitott/zárt modál. Redux akkor szükséges, ha az állapot több képernyő között oszlik meg, aszinkron szinkronizációt igényel (szerverről származó adatok), meg kell őrizni az alkalmazás újraindításai között (persist), vagy time-travel hibakeresést igényel. Kis alkalmazásokhoz a Redux túlzás — használjon Context + useReducer-t.
Mi az a normalize a Redux-ban?
Normalizr — egy könyvtár a beágyazott adatok sík Store struktúrába normalizálásához. A mély objektumok, mint a user.posts[0].comments tárolása helyett a normalizálás szótárakat hoz létre: entities.users, entities.posts, entities.comments ID alapú hivatkozásokkal. Ez leegyszerűsíti egy entitás frissítését az összes helyen és felgyorsítja a szelektorokat. A Redux Toolkit normalizált adatokat javasol összetett modellekhez.
Összefoglalás
- Redux — kiszámítható állapotkonténer egyetlen Store-ral és tiszta Reducer-ekkel
- Action — objektum type-pal, Reducer — tiszta függvény, Dispatch — küldő mechanizmus
- Redux Toolkit — hivatalos API createSlice, createAsyncThunk és RTK Query funkciókkal
- Middleware — köztes réteg aszinkronitáshoz: Thunk, Saga, Observable
- React Native Provider-en, useSelector-on és redux-persisten keresztül integrálódik offline módhoz
- DevTools — time-travel hibakeresés minden Action reprodukálásával
- Normalizr — adatnormalizálás hatékony szelektorokhoz és frissítésekhez
Kulcsrakész mobilalkalmazást fejlesztünk
Az IT Sectr 2017 óta készít iOS és Android alkalmazásokat induló vállalkozásoknak és vállalkozásoknak. Tanácsot adunk, és a legjobb megoldást javasoljuk.
Olvassa el is