Redux: model de gestionare a stării în React Native
Redux — un container previzibil de gestionare a stării pentru aplicații JavaScript, creat de Dan Abramov în 2015. Redux implementează un flux de date unidirecțional bazat pe arhitectura Flux: starea este stocată într-un singur Store, modificată doar prin funcții pure Reducer și inițiată prin Action cu Dispatch. Conform datelor npm Trends, Redux menține peste 7 milioane de descărcări săptămânale, rămânând standardul pentru gestionarea stării în React Native și aplicații web.
Principalele puncte
- Store — singura sursă de adevăr, care stochează întregul arbore de stare al aplicației
- Action — obiect cu câmpul type, care descrie intenția de a modifica starea
- Reducer — funcție pură (prevState, action) => newState fără efecte secundare
- Dispatch — metoda Store pentru trimiterea Action către Reducer
- Middleware — strat intermediar între dispatch și reducer pentru operații asincrone și logare
Ce este Redux?
Redux — un model arhitectural și o bibliotecă pentru gestionarea stării, bazat pe trei principii: singura sursă de adevăr (single source of truth), stare doar în citire (read-only) și modificări prin funcții pure. Spre deosebire de MVC, unde modelul poate modifica starea în mod imprevizibil, Redux garantează determinismul: cu aceleași date de intrare, rezultatul este întotdeauna același.
Redux a fost inspirat de arhitectura Flux de la Facebook și de limbajul Elm. Diferența principală față de Flux — un singur Store în loc de mai multe. În Redux, întreaga stare a aplicației — obiecte, array-uri, flaguri de încărcare — este stocată într-un singur arbore. Acest lucru simplifică depanarea, testarea și restaurarea stării (time-travel debugging). Dezvoltatorul poate salva întregul Store, poate reproduce secvența de Action și poate vedea cum s-a schimbat starea la fiecare pas.
Conform datelor State of JS 2025, 68% dintre respondenții care folosesc gestionarea stării aleg Redux sau Redux Toolkit. Instrumentul este suportat de toate framework-urile moderne: React, React Native, Angular, Vue și chiar JavaScript pur fără framework-uri.
Fluxul de date unidirecțional
Unidirectional data flow — principiul cheie al Redux, în care datele se mișcă strict într-o singură direcție: View → Action → Dispatch → Reducer → Store → View. Niciun component nu poate modifica Store-ul direct. View doar se abonează la modificări prin useSelector sau connect și inițiază schimbări prin dispatch.
Ciclul de funcționare a Redux: utilizatorul apasă un buton → componentul apelează dispatch({ type: 'INCREMENT' }) → Store transmite Action către Root Reducer → Reducer calculează noua stare → Store notifică abonații → View se redesenează cu noile date. Acest ciclu garantează că fiecare schimbare are o cauză explicită sub forma unui Action specific.
DevTools — instrumentul încorporat al Redux pentru monitorizarea fiecărui Action, a stării Store și a timpului de execuție. Dezvoltatorul vede lista tuturor Action-urilor dispatchate, diferența de stare (diff) înainte și după și poate reveni la orice stare anterioară. Acest lucru face depanarea stărilor complexe de zeci de ori mai rapidă în comparație cu logarea obișnuită.
Componentele cheie ale Redux
Store — obiectul care conține întregul arbore de stare. Se creează prin configureStore (RTK) sau createStore. Store oferă trei metode: getState() pentru citire, dispatch(action) pentru modificare și subscribe(listener) pentru abonare. În Redux Toolkit, Store include deja middleware, DevTools și suport pentru slice-uri.
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 și Action Creator — Action este un obiect cu câmpul obligatoriu type (constantă string) și opțional payload (date). Action Creator — funcția care returnează un Action. În Redux Toolkit se folosește createAction pentru generarea Action cu tipizare automată.
Reducer — funcție pură care primește starea curentă și Action, returnând o stare nouă. Reducer nu trebuie să: muteze state (returnează un obiect nou), sune API, genereze numere aleatoare sau acceseze Date. Imutabilitatea este asigurată de operatorul spread ... sau Immer (încorporat în RTK).
| Component | Responsabilitate | Limitări |
|---|---|---|
| Store | Stocarea stării, dispatch, subscribe | Unul per aplicație |
| Action | Descrierea intenției de a modifica starea | Trebuie să aibă type |
| Reducer | Calcularea noii stări | Funcție pură, fără efecte secundare |
| Dispatch | Trimiterea Action către Reducer | Sincron în mod implicit |
| Selector | Extragerea datelor din Store | Memoizare prin createSelector |
Middleware și Redux Thunk
Middleware — un lanț de funcții inserat între apelul dispatch și momentul în care Action ajunge la Reducer. Fiecare middleware primește API-ul Store și poate loga, modifica, întârzia sau anula Action-ul. Redux Thunk — middleware standard pentru operații asincrone, care permite dispatch-ul funcțiilor în loc de obiecte.
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()
}
)Middleware populare: Redux Thunk — pentru apeluri asincrone simple, Redux Saga — pentru scenarii complexe cu saga-generatoare (debounce, race, cereri paralele), Redux Observable — bazat pe RxJS pentru fluxuri reactive. În Redux Toolkit, middleware se conectează prin parametrul middleware în configureStore.
Conform sondajului State of JS 2025, Thunk este utilizat în 72% din proiectele Redux, Saga — în 18%, Observable — în 5%. Pentru majoritatea aplicațiilor, combinația Thunk + RTK Query este suficientă pentru a acoperi 95% din scenariile de lucru asincron cu date.
Redux Toolkit și RTK Query
Redux Toolkit (RTK) — modul oficial, recomandat de a scrie logică Redux, lansat în 2019. RTK include configureStore, createSlice, createAsyncThunk și createEntityAdapter, reducând codul boilerplate Redux cu 60-70%. În locul creării manuale a Action Creator, Reducer și tipuri, se folosește un singur 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 — soluția încorporată pentru lucrul cu API pe baza Redux Toolkit. Permite definirea endpoint-urilor în mod declarativ prin createApi cu generare automată de hook-uri, cache, invalidare de tag-uri și actualizări optimiste. RTK Query înlocuiește scrierea manuală a Thunk, Reducer și Selector pentru fiecare cerere API.
Entity Adapter — utilitarul createEntityAdapter pentru normalizarea colecțiilor de entități. Oferă reductoare CRUD încorporate, selectoare și sortare pentru array-uri de obiecte. Dacă în Store sunt stocate liste de utilizatori, produse sau comenzi — Entity Adapter reduce codul de reducere cu 80%.
Redux în React Native
React Native Redux — combinația standard pentru aplicații mobile în JavaScript. Redux se integrează prin Provider din react-redux, care înfășoară componenta rădăcină a aplicației. Hook-urile useSelector și useDispatch oferă componentelor acces la stare fără props drilling. Persist — redux-persist salvează Store-ul în AsyncStorage sau MMKV, restaurând starea după repornirea aplicației.
Middleware pentru React Native: redux-flipper pentru depanare prin Flipper, redux-observable pentru fluxuri reactive cu drivere native, react-native-mmkv pentru stocare persistentă rapidă. Plugin-ul de navigație redux-first-router conectează ecranele cu Store-ul, permițând restaurarea stării ecranului la revenire.
În React Native, Redux este folosit împreună cu strategia network-first: aplicația încearcă mai întâi să încarce datele de pe server, apoi le cache-uează în Store prin RTK Query sau redux-persist. Modul offline este obținut prin combinația Redux + NetInfo + coadă de Action pentru retrimitere la restabilirea conexiunii.
Întrebări frecvente
Cu ce se diferențiază Redux de Context API în React?
Redux — o soluție completă cu Store, DevTools, Middleware și stare imutabilă. Context API — mecanismul încorporat al React pentru transmiterea datelor fără props drilling. Context este potrivit pentru teme globale și localizare, Redux — pentru stare complexă cu operații asincrone, cache și depanare. În aplicațiile mari, Context cauzează rerandomări inutile, Redux cu selectoare rezolvă această problemă.
Ce este Immer în Redux Toolkit?
Immer — o bibliotecă pentru lucrul imutabil cu starea, încorporată în Redux Toolkit. Immer permite scrierea reductoarelor ca și cum ați muta direct state-ul: state.value += 1. În spate, Immer creează un obiect proxy (draft), urmărește modificările și returnează un nou obiect imutabil. Aceasta reduce volumul codului reductoarelor cu 50% și elimină mutațiile accidentale.
Cum se testează Redux?
Logica Redux se testează izolat: Reducer — funcție pură, este suficient să fie apelată cu diferite Action și verificat rezultatul. Action Creator — verificat obiectul returnat. Thunk — se mocked-uiește API, se apelează dispatch și se verifică ce Action au fost trimise. Component cu useSelector — se folosește Provider cu un Store de test în renderer. Redux DevTools ajută la scrierea unui test prin reproducerea secvenței de Action dintr-o sesiune reală.
Când să folosim Redux în loc de useState?
useState este suficient pentru starea locală a unui singur component: textul unui câmp, modal deschis/închis. Redux este necesar când starea este partajată între mai multe ecrane, necesită sincronizare asincronă (date de pe server), trebuie păstrată între reporniri ale aplicației (persist) sau necesită depanare time-travel. Pentru aplicații mici, Redux este excesiv — folosiți Context + useReducer.
Ce este normalize în Redux?
Normalizr — o bibliotecă pentru normalizarea datelor imbricate într-o structură plată a Store-ului. În loc să stocați obiecte adânci de tipul user.posts[0].comments, normalizarea creează dicționare: entities.users, entities.posts, entities.comments cu referințe după ID. Aceasta simplifică actualizarea unei entități în toate locurile și accelerează selectoarele. Redux Toolkit recomandă date normalizate pentru modele complexe.
Concluzii
- Redux — container previzibil de stare cu un singur Store și reductoare pure
- Action — obiect cu type, Reducer — funcție pură, Dispatch — mecanism de trimitere
- Redux Toolkit — API oficial cu createSlice, createAsyncThunk și RTK Query
- Middleware — strat intermediar pentru asincron: Thunk, Saga, Observable
- React Native se integrează prin Provider, useSelector și redux-persist pentru modul offline
- DevTools — depanare time-travel cu reproducerea fiecărui Action
- Normalizr — normalizarea datelor pentru selectoare și actualizări eficiente
Vom dezvolta o aplicație mobilă la cheie
IT Sectr creează aplicații iOS și Android pentru startup-uri și afaceri din 2017. Vă vom consilia și vă vom propune cea mai bună soluție.
Citiți și