Redux: React Native-də vəziyyətin idarə edilməsi nümunəsi
Redux — 2015-ci ildə Dan Abramov tərəfindən yaradılmış JavaScript tətbiqləri üçün proqnozlaşdırıla bilən vəziyyət idarəetmə konteyneridir. Redux Flux arxitekturasına əsaslanan bir istiqamətli məlumat axını həyata keçirir: vəziyyət tək Store-da saxlanılır, yalnız təmiz Reducer funksiyaları vasitəsilə dəyişdirilir və Dispatch ilə Action vasitəsilə başladılır. npm Trends məlumatlarına görə, Redux həftəlik 7 milyondan çox yükləməni qoruyaraq React Native və veb tətbiqlərində vəziyyət idarəetmə standartı olaraq qalır.
Əsas məqamlar
- Store — tətbiqin bütün vəziyyət ağacını saxlayan yeganə həqiqət mənbəyi
- Action — vəziyyəti dəyişdirmək niyyətini təsvir edən type sahəsi olan obyekt
- Reducer — yan təsirləri olmayan təmiz funksiya (prevState, action) => newState
- Dispatch — Action-u Reducer-a göndərmək üçün Store metodu
- Middleware — asinxron əməliyyatlar və günləmə üçün dispatch və reducer arasında ara təbəqə
Redux nədir?
Redux — üç prinsipə əsaslanan memarlıq nümunəsi və vəziyyət idarəetmə kitabxanasıdır: yeganə həqiqət mənbəyi (single source of truth), yalnız oxuna bilən vəziyyət (read-only) və təmiz funksiyalar vasitəsilə dəyişikliklər. Modelin vəziyyəti proqnozlaşdırıla bilməyən şəkildə dəyişdirə bildiyi MVC-dən fərqli olaraq, Redux determinizmi təmin edir: eyni giriş məlumatları ilə nəticə həmişə eynidir.
Redux Facebook-un Flux arxitekturasından və Elm dilindən ilhamlanmışdır. Flux-dan əsas fərq — bir neçə Store əvəzinə tək Store-dur. Redux-da tətbiqin bütün vəziyyəti — obyektlər, massivlər, yükləmə bayraqları — bir ağacda saxlanılır. Bu, sazlama, test etmə və vəziyyətin bərpasını (time-travel debugging) asanlaşdırır. Tərtibatçı bütün Store-u saxlaya, Action ardıcıllığını təkrarlaya və hər addımda vəziyyətin necə dəyişdiyini görə bilər.
State of JS 2025 məlumatlarına görə, vəziyyət idarəetməsindən istifadə edən respondentlərin 68%-i Redux və ya Redux Toolkit seçir. Alət bütün müasir freymvorklar tərəfindən dəstəklənir: React, React Native, Angular, Vue və hətta freymvorksuz təmiz JavaScript.
Bir istiqamətli məlumat axını
Unidirectional data flow — Redux-un əsas prinsipi, burada məlumatlar ciddi şəkildə bir istiqamətdə hərəkət edir: View → Action → Dispatch → Reducer → Store → View. Heç bir komponent Store-u birbaşa dəyişə bilməz. View yalnız useSelector və ya connect vasitəsilə dəyişikliklərə abunə olur və dispatch vasitəsilə dəyişiklikləri başladır.
Redux-un iş dövrü: istifadəçi düyməni basır → komponent dispatch({ type: 'INCREMENT' }) çağırır → Store Action-u Root Reducer-a ötürür → Reducer yeni vəziyyəti hesablayır → Store abunəçilərə xəbər verir → View yeni məlumatlarla yenidən çəkilir. Bu dövr hər dəyişikliyin konkret Action şəklində aşkar səbəbi olduğunu təmin edir.
DevTools — hər Action, Store vəziyyəti və icra müddətini izləmək üçün Redux-un daxili alətidir. Tərtibatçı bütün göndərilmiş Action-ların siyahısını, əvvəl və sonra vəziyyət fərqini (diff) görür və istənilən əvvəlki vəziyyətə geri dönə bilər. Bu, mürəkkəb vəziyyətlərin sazlanmasını adi günləmə ilə müqayisədə onlarla dəfə sürətləndirir.
Redux-un əsas komponentləri
Store — tam vəziyyət ağacını ehtiva edən obyekt. configureStore (RTK) və ya createStore vasitəsilə yaradılır. Store üç metod təqdim edir: oxumaq üçün getState(), dəyişdirmək üçün dispatch(action) və abunə olmaq üçün subscribe(listener). Redux Toolkit-də Store artıq middleware, DevTools və slays dəstəyini ehtiva edir.
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 və Action Creator — Action məcburi type sahəsi (string sabiti) və isteğe bağlı payload (məlumat) olan obyektdir. Action Creator — Action qaytaran funksiya. Redux Toolkit-də avtomatik tipləşdirmə ilə Action yaratmaq üçün createAction istifadə olunur.
Reducer — cari vəziyyəti və Action-u alan, yeni vəziyyət qaytaran təmiz funksiyadır. Reducer etməməlidir: state-i mutasiya etmək (yeni obyekt qaytarılır), API çağırmaq, təsadüfi ədədlər yaratmaq və ya Date-ə müraciət etmək. Dəyişməzlik spread operatoru ... və ya Immer (RTK-ya daxildir) ilə təmin edilir.
| Komponent | Vəzifə | Məhdudiyyətlər |
|---|---|---|
| Store | Vəziyyətin saxlanması, dispatch, subscribe | Tətbiq başına bir |
| Action | Vəziyyəti dəyişdirmək niyyətinin təsviri | type olmalıdır |
| Reducer | Yeni vəziyyətin hesablanması | Təmiz funksiya, yan təsirləri yoxdur |
| Dispatch | Action-u Reducer-a göndərmək | Susmaya görə sinxron |
| Selector | Store-dan məlumatların çıxarılması | createSelector vasitəsilə memoizasiya |
Middleware və Redux Thunk
Middleware — dispatch çağırışı ilə Action-un Reducer-a çatması arasında yerləşdirilən funksiyalar zənciridir. Hər middleware Store API-nı alır və Action-u günləyə, dəyişdirə, gecikdirə və ya ləğv edə bilər. Redux Thunk — asinxron əməliyyatlar üçün standart middleware, obyektlər əvəzinə funksiyaları dispatch etməyə imkan verir.
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()
}
)Məşhur middleware-lər: Redux Thunk — sadə asinxron çağırışlar üçün, Redux Saga — generator-saqaları olan mürəkkəb ssenarilər üçün (debounce, race, paralel sorğular), Redux Observable — reaktiv axınlar üçün RxJS əsasında. Redux Toolkit-də middleware configureStore-da middleware parametri vasitəsilə qoşulur.
State of JS 2025 sorğusuna görə, Thunk Redux layihələrinin 72%-də, Saga — 18%-də, Observable — 5%-də istifadə olunur. Əksər tətbiqlər üçün Thunk + RTK Query kombinasiyası məlumatlarla asinxron iş ssenarilərinin 95%-ni əhatə etmək üçün kifayətdir.
Redux Toolkit və RTK Query
Redux Toolkit (RTK) — 2019-cu ildə buraxılmış Redux məntiqinin yazılmasının rəsmi, tövsiyə olunan üsuludur. RTK configureStore, createSlice, createAsyncThunk və createEntityAdapter daxil edərək Redux boilerplate-ni 60-70% azaldır. Action Creator, Reducer və tiplərin əl ilə yaradılması əvəzinə bir createSlice istifadə olunur.
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 — Redux Toolkit əsasında API ilə iş üçün daxili həll. createApi vasitəsilə endpoint-ləri deklarativ şəkildə təyin etməyə, avtomatik hook yaradılması, keşləmə, teqlərin etibarsızlaşdırılması və optimist yeniləmələrə imkan verir. RTK Query hər API sorğusu üçün əl ilə Thunk, Reducer və Selector yazılmasını əvəz edir.
Entity Adapter — varlıq kolleksiyalarının normallaşdırılması üçün createEntityAdapter köməkçi vasitəsidir. Obyekt massivləri üçün daxili CRUD reducers, selektorlar və sıralama təmin edir. Store-da istifadəçi, məhsul və ya sifariş siyahıları saxlanılırsa — Entity Adapter reduksiya kodunu 80% azaldır.
React Native-də Redux
React Native Redux — JavaScript-də mobil tətbiqlər üçün standart birləşmədir. Redux react-redux Provider ilə inteqrasiya olunur, tətbiqin kök komponentini əhatə edir. useSelector və useDispatch hook-ları komponentlərə props drilling olmadan vəziyyətə giriş imkanı verir. Persist — redux-persist Store-u AsyncStorage və ya MMKV-də saxlayır, tətbiq yenidən başladıldıqdan sonra vəziyyəti bərpa edir.
React Native üçün Middleware: Flipper vasitəsilə sazlama üçün redux-flipper, yerli sürücülərlə reaktiv axınlar üçün redux-observable, sürətli davamlı yaddaş üçün react-native-mmkv. redux-first-router naviqasiya plaginı ekranları Store ilə əlaqələndirir, geri qayıtdıqda ekran vəziyyətini bərpa etməyə imkan verir.
React Native-də Redux network-first strategiyası ilə birlikdə istifadə olunur: tətbiq əvvəlcə serverdən məlumat yükləməyə çalışır, sonra RTK Query və ya redux-persist vasitəsilə Store-da keşləyir. Oflayn rejim Redux + NetInfo + əlaqə bərpa edildikdə yenidən göndərmək üçün Action növbəsi kombinasiyası ilə əldə edilir.
Tez-tez verilən suallar
Redux React-də Context API-dən nə ilə fərqlənir?
Redux — Store, DevTools, Middleware və dəyişməz vəziyyətlə tam həllidir. Context API — props drilling olmadan məlumat ötürmək üçün React-in daxili mexanizmidir. Context qlobal mövzular və lokalizasiya üçün uyğundur, Redux — asinxron əməliyyatlar, keşləmə və sazlama ilə mürəkkəb vəziyyət üçün. Böyük tətbiqlərdə Context lazımsız yenidən çəkilmələrə səbəb olur, Redux selektorlarla bu problemi həll edir.
Redux Toolkit-də Immer nədir?
Immer — Redux Toolkit-ə daxil edilmiş vəziyyətlə dəyişməz iş üçün kitabxanadır. Immer reducers-ları sanki state-i birbaşa mutasiya edirmiş kimi yazmağa imkan verir: state.value += 1. Arxa planda Immer proxy-obyekt (draft) yaradır, dəyişiklikləri izləyir və yeni dəyişməz obyekt qaytarır. Bu, reducers kodunun həcmini 50% azaldır və təsadüfi mutasiyaları aradan qaldırır.
Redux-u necə test etmək olar?
Redux məntiqi təcrid olunmuş şəkildə test edilir: Reducer — təmiz funksiya, müxtəlif Action-larla çağırmaq və nəticəni yoxlamaq kifayətdir. Action Creator — qaytarılan obyekti yoxlamaq. Thunk — API-i mock etmək, dispatch çağırmaq və hansı Action-ların göndərildiyini yoxlamaq. useSelector ilə komponent — rendererdə test Store ilə Provider istifadə etmək. Redux DevTools real seansdan Action ardıcıllığını təkrarlayaraq test yazmağa kömək edir.
Nə vaxt useState əvəzinə Redux istifadə edilməlidir?
useState bir komponentin lokal vəziyyəti üçün kifayətdir: sahə mətni, modalın açıq/bağlı olması. Redux vəziyyət bir çox ekran arasında paylaşıldıqda, asinxron sinxronizasiya (serverdən məlumat) tələb etdikdə, tətbiq yenidən başladılanda saxlanmalı olduqda (persist) və ya time-travel sazlama tələb edildikdə lazımdır. Kiçik tətbiqlər üçün Redux həddindən artıqdır — Context + useReducer istifadə edin.
Redux-da normalize nədir?
Normalizr — iç-içə məlumatları Store-un düz strukturuna normallaşdırmaq üçün kitabxanadır. user.posts[0].comments kimi dərin obyektləri saxlamaq əvəzinə, normallaşdırma lüğətlər yaradır: entities.users, entities.posts, entities.comments ID-lərlə istinadlar. Bu, bir varlığın bütün yerlərdə yenilənməsini asanlaşdırır və selektorları sürətləndirir. Redux Toolkit mürəkkəb modellər üçün normallaşdırılmış məlumatları tövsiyə edir.
Nəticə
- Redux — tək Store və təmiz Reducer ilə proqnozlaşdırıla bilən vəziyyət konteyneri
- Action — type olan obyekt, Reducer — təmiz funksiya, Dispatch — göndərmə mexanizmi
- Redux Toolkit — createSlice, createAsyncThunk və RTK Query ilə rəsmi API
- Middleware — asinxronluq üçün ara təbəqə: Thunk, Saga, Observable
- React Native Provider, useSelector və oflayn rejim üçün redux-persist ilə inteqrasiya olunur
- DevTools — hər Action-ın təkrar istehsalı ilə time-travel sazlama
- Normalizr — səmərəli selektorlar və yeniləmələr üçün məlumat normallaşdırılması
Açar təslim mobil tətbiq hazırlayacağıq
IT Sectr 2017-ci ildən startaplar və bizneslər üçün iOS və Android tətbiqləri yaradır. Sizə məsləhət verəcəyik və ən yaxşı həlli təklif edəcəyik.
Həm də oxuyun