Redux: React Native-da holatni boshqarish namunasi
Redux — 2015-yilda Dan Abramov tomonidan yaratilgan JavaScript ilovalari uchun oldindan bashorat qilinadigan holat boshqaruv konteyneri. Redux Flux arxitekturasiga asoslangan bir yo'nalishli ma'lumot oqimini amalga oshiradi: holat yagona Store-da saqlanadi, faqat sof Reducer funksiyalari orqali o'zgartiriladi va Dispatch bilan Action orqali boshlanadi. npm Trends ma'lumotlariga ko'ra, Redux haftalik 7 milliondan ortiq yuklab olishni saqlab qolgan holda, React Native va veb-ilovalarda holat boshqaruv standarti bo'lib qolmoqda.
Asosiy fikrlar
- Store — ilovaning butun holat daraxtini saqlaydigan yagona haqiqat manbai
- Action — holatni o'zgartirish niyatini tavsiflovchi type maydoniga ega obyekt
- Reducer — yon ta'sirlarsiz sof funksiya (prevState, action) => newState
- Dispatch — Action-ni Reducer-ga yuborish uchun Store metodi
- Middleware — asinxron operatsiyalar va jurnallash uchun dispatch va reducer o'rtasidagi oraliq qatlam
Redux nima?
Redux — uch tamoyilga asoslangan arxitektura namunasi va holat boshqaruv kutubxonasi: yagona haqiqat manbai (single source of truth), faqat o'qish uchun holat (read-only) va sof funksiyalar orqali o'zgarishlar. MVC-dan farqli o'laroq, bu yerda model holatni oldindan aytib bo'lmaydigan tarzda o'zgartirishi mumkin, Redux determinizmni kafolatlaydi: bir xil kirish ma'lumotlari bilan natija har doim bir xil.
Redux Facebook-ning Flux arxitekturasidan va Elm tilidan ilhomlangan. Flux-dan asosiy farq — bir nechta Store o'rniga yagona Store. Redux-da ilovaning barcha holati — obyektlar, massivlar, yuklash bayroqlari — bitta daraxtda saqlanadi. Bu tuzatish, test qilish va holatni tiklashni (time-travel debugging) soddalashtiradi. Dastur butun Store-ni saqlab, Action ketma-ketligini takrorlab va har bir qadamda holat qanday o'zgarganini ko'rishi mumkin.
State of JS 2025 ma'lumotlariga ko'ra, holat boshqaruvidan foydalanuvchi respondentlarning 68% Redux yoki Redux Toolkit-ni tanlaydi. Asbob barcha zamonaviy freymvorklar tomonidan qo'llab-quvvatlanadi: React, React Native, Angular, Vue va hatto freymvorksiz sof JavaScript.
Bir yo'nalishli ma'lumot oqimi
Unidirectional data flow — Redux-ning asosiy tamoyili, bunda ma'lumotlar qat'iy bir yo'nalishda harakat qiladi: View → Action → Dispatch → Reducer → Store → View. Hech bir komponent Store-ni to'g'ridan-to'g'ri o'zgartira olmaydi. View faqat useSelector yoki connect orqali o'zgarishlarga obuna bo'ladi va dispatch orqali o'zgarishlarni boshlaydi.
Redux-ning ishlash sikli: foydalanuvchi tugmani bosadi → komponent dispatch({ type: 'INCREMENT' }) chaqiradi → Store Action-ni Root Reducer-ga uzatadi → Reducer yangi holatni hisoblaydi → Store obunachilarni xabardor qiladi → View yangi ma'lumotlar bilan qayta chiziladi. Bu sikl har bir o'zgarishning aniq Action shaklida ochiq sababi borligini kafolatlaydi.
DevTools — har bir Action, Store holati va bajarilish vaqtini kuzatish uchun Redux-ning o'rnatilgan vositasi. Dasturchi barcha yuborilgan Action-lar ro'yxatini, oldin va keyin holat farqini (diff) ko'radi va istalgan oldingi holatga qaytishi mumkin. Bu murakkab holatlarni tuzatishni oddiy jurnallash bilan solishtirganda o'nlab marta tezlashtiradi.
Redux-ning asosiy komponentlari
Store — to'liq holat daraxtini o'z ichiga olgan obyekt. configureStore (RTK) yoki createStore orqali yaratiladi. Store uchta metodni taqdim etadi: o'qish uchun getState(), o'zgartirish uchun dispatch(action) va obuna bo'lish uchun subscribe(listener). Redux Toolkit-da Store allaqachon middleware, DevTools va sleyslarni qo'llab-quvvatlashni o'z ichiga oladi.
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 va Action Creator — Action majburiy type maydoni (string doimiysi) va ixtiyoriy payload (ma'lumot) ga ega obyektdir. Action Creator — Action qaytaruvchi funksiya. Redux Toolkit-da avtomatik tiplash bilan Action yaratish uchun createAction ishlatiladi.
Reducer — joriy holat va Action-ni olib, yangi holat qaytaruvchi sof funksiya. Reducer: state-ni mutatsiya qilmasligi (yangi obyekt qaytariladi), API chaqirmasligi, tasodifiy sonlar yaratmasligi yoki Date-ga murojaat qilmasligi kerak. O'zgarmaslik spread operatori ... yoki Immer (RTK-ga o'rnatilgan) bilan ta'minlanadi.
| Komponent | Vazifa | Cheklovlar |
|---|---|---|
| Store | Holatni saqlash, dispatch, subscribe | Ilova uchun bitta |
| Action | Holatni o'zgartirish niyatini tavsiflash | type bo'lishi kerak |
| Reducer | Yangi holatni hisoblash | Sof funksiya, yon ta'sirlarsiz |
| Dispatch | Action-ni Reducer-ga yuborish | Sukut bo'yicha sinxron |
| Selector | Store-dan ma'lumotlarni olish | createSelector orqali memoizatsiya |
Middleware va Redux Thunk
Middleware — dispatch chaqiruvi bilan Action Reducer-ga yetib borishi o'rtasiga qo'yilgan funksiyalar zanjiri. Har bir middleware Store API-ni oladi va Action-ni jurnallashi, o'zgartirishi, kechiktirishi yoki bekor qilishi mumkin. Redux Thunk — asinxron operatsiyalar uchun standart middleware, obyektlar o'rniga funksiyalarni dispatch qilishga imkon beradi.
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()
}
)Mashhur middleware-lar: Redux Thunk — oddiy asinxron chaqiruvlar uchun, Redux Saga — generator-sagalar bilan murakkab stsenariylar uchun (debounce, race, parallel so'rovlar), Redux Observable — reaktiv oqimlar uchun RxJS asosida. Redux Toolkit-da middleware configureStore dagi middleware parametri orqali ulanadi.
State of JS 2025 so'roviga ko'ra, Thunk Redux loyihalarining 72% ida, Saga — 18% ida, Observable — 5% ida ishlatiladi. Aksariyat ilovalar uchun Thunk + RTK Query kombinatsiyasi ma'lumotlar bilan asinxron ish stsenariylarining 95% ini qoplash uchun yetarli.
Redux Toolkit va RTK Query
Redux Toolkit (RTK) — 2019-yilda chiqarilgan Redux mantiqini yozishning rasmiy, tavsiya etilgan usuli. RTK configureStore, createSlice, createAsyncThunk va createEntityAdapter ni o'z ichiga olib, Redux boilerplate-ni 60-70% ga qisqartiradi. Qo'lda Action Creator, Reducer va tiplarni yaratish o'rniga bitta createSlice ishlatiladi.
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 asosida API bilan ishlash uchun o'rnatilgan yechim. createApi orqali endpointlarni deklarativ tarzda aniqlash, avtomatik hook yaratish, keshlash, teglarni bekor qilish va optimistik yangilash imkonini beradi. RTK Query har bir API so'rovi uchun qo'lda Thunk, Reducer va Selector yozishni o'rnini bosadi.
Entity Adapter — obyektlar to'plamlarini normallashtirish uchun createEntityAdapter yordamchi vositasi. Obyekt massivlari uchun o'rnatilgan CRUD reducerlar, selektorlar va saralashni taqdim etadi. Agar Store-da foydalanuvchilar, mahsulotlar yoki buyurtmalar ro'yxati saqlansa — Entity Adapter reduksiya kodini 80% ga kamaytiradi.
React Native-da Redux
React Native Redux — JavaScript-da mobil ilovalar uchun standart kombinatsiya. Redux react-redux dan Provider orqali integratsiyalanadi, ilovaning ildiz komponentini o'rab oladi. useSelector va useDispatch hooklari komponentlarga props drilling holda holatga kirish imkonini beradi. Persist — redux-persist Store-ni AsyncStorage yoki MMKV-da saqlaydi, ilova qayta ishga tushirilgandan keyin holatni tiklaydi.
React Native uchun Middleware: Flipper orqali tuzatish uchun redux-flipper, mahalliy drayverlar bilan reaktiv oqimlar uchun redux-observable, tez doimiy xotira uchun react-native-mmkv. Navigatsiya plagini redux-first-router ekranlarni Store bilan bog'laydi, qaytishda ekran holatini tiklash imkonini beradi.
React Native-da Redux network-first strategiyasi bilan birga ishlatiladi: ilova avval serverdan ma'lumot yuklashga harakat qiladi, so'ngra RTK Query yoki redux-persist orqali Store-da keshlaydi. Oflayn rejim Redux + NetInfo + ulanish tiklanganda qayta yuborish uchun Action navbat kombinatsiyasi orqali erishiladi.
Ko'p beriladigan savollar
Redux React-dagi Context API-dan nima bilan farq qiladi?
Redux — Store, DevTools, Middleware va o'zgarmas holat bilan to'liq yechim. Context API — props drilling holda ma'lumot uzatish uchun React-ning o'rnatilgan mexanizmi. Context global mavzular va lokalizatsiya uchun mos, Redux — asinxron operatsiyalar, keshlash va tuzatish bilan murakkab holat uchun. Katta ilovalarda Context keraksiz qayta chizishlarga sabab bo'ladi, Redux selektorlar bilan bu muammoni hal qiladi.
Redux Toolkit-dagi Immer nima?
Immer — Redux Toolkit-ga o'rnatilgan holat bilan o'zgarmas ishlash uchun kutubxona. Immer reducerlarni go'yo state-ni to'g'ridan-to'g'ri mutatsiya qilayotgandek yozishga imkon beradi: state.value += 1. Orqa fonda Immer proksi-obyekt (draft) yaratadi, o'zgarishlarni kuzatadi va yangi o'zgarmas obyekt qaytaradi. Bu reducer kodining hajmini 50% ga kamaytiradi va tasodifiy mutatsiyalarni yo'q qiladi.
Redux-ni qanday test qilish kerak?
Redux mantiqi izolyatsiya qilingan holda test qilinadi: Reducer — sof funksiya, uni turli Action-lar bilan chaqirish va natijani tekshirish kifoya. Action Creator — qaytarilgan obyektni tekshirish. Thunk — API-ni mock qilish, dispatch chaqirish va qaysi Action-lar yuborilganini tekshirish. useSelector bilan komponent — rendererda test Store bilan Provider ishlatish. Redux DevTools haqiqiy seansdan Action ketma-ketligini takrorlab test yozishga yordam beradi.
Qachon useState o'rniga Redux ishlatish kerak?
useState bitta komponentning lokal holati uchun yetarli: maydon matni, modalning ochiq/yopiqligi. Redux holat ko'plab ekranlar o'rtasida taqsimlanganda, asinxron sinxronizatsiya (serverdan ma'lumot) talab qilinganda, ilova qayta ishga tushirilganda saqlanishi kerak bo'lganda (persist) yoki time-travel tuzatish talab qilinganda kerak. Kichik ilovalar uchun Redux ortiqcha — Context + useReducer dan foydalaning.
Redux-da normalize nima?
Normalizr — joylashgan ma'lumotlarni Store-ning tekis tuzilishiga normallashtirish uchun kutubxona. user.posts[0].comments kabi chuqur obyektlarni saqlash o'rniga, normallashtirish lug'atlar yaratadi: entities.users, entities.posts, entities.comments ID bo'yicha havolalar bilan. Bu bitta obyektni barcha joylarda yangilashni soddalashtiradi va selektorlarni tezlashtiradi. Redux Toolkit murakkab modellar uchun normallashtirilgan ma'lumotlarni tavsiya qiladi.
Xulosa
- Redux — yagona Store va sof Reducer bilan oldindan bashorat qilinadigan holat konteyneri
- Action — type li obyekt, Reducer — sof funksiya, Dispatch — yuborish mexanizmi
- Redux Toolkit — createSlice, createAsyncThunk va RTK Query bilan rasmiy API
- Middleware — asinxronlik uchun oraliq qatlam: Thunk, Saga, Observable
- React Native Provider, useSelector va oflayn rejim uchun redux-persist orqali integratsiyalanadi
- DevTools — har bir Action-ni takrorlash bilan time-travel tuzatish
- Normalizr — samarali selektorlar va yangilashlar uchun ma'lumotlarni normallashtirish
Biz kalit topshirig'i bilan mobil ilovani ishlab chiqamiz
IT Sectr 2017-yildan beri startaplar va korxonalar uchun iOS va Android ilovalarini yaratadi. Biz sizga maslahat beramiz va eng yaxshi yechimni taklif qilamiz.
Shuningdek o'qing