Redux: React Native'de durum yönetimi deseni nedir
Redux, Dan Abramov tarafından 2015 yılında oluşturulan JavaScript uygulamaları için öngörülebilir bir durum yönetimi konteyneridir. Redux, Flux mimarisine dayalı tek yönlü veri akışını uygular: durum tek bir Store'da saklanır, yalnızca saf Reducer işlevleri aracılığıyla değiştirilir ve Dispatch ile Action aracılığıyla başlatılır. npm Trends'e göre Redux, haftalık 7 milyondan fazla indirmeyi koruyarak React Native ve web uygulamalarında durum yönetimi standardı olmaya devam ediyor.
Önemli Noktalar
- Store — tek gerçek kaynağı, uygulamanın tüm durum ağacını saklar
- Action — type alanına sahip nesne, durumu değiştirme niyetini tanımlar
- Reducer — yan etkisiz saf işlev (prevState, action) => newState
- Dispatch — Action'ı Reducer'a göndermek için Store yöntemi
- Middleware — async işlemler ve günlükleme için dispatch ile reducer arasındaki katman
Redux nedir?
Redux, üç prensibe dayanan bir mimari desen ve durum yönetimi kütüphanesidir: tek gerçek kaynağı, salt okunur durum ve saf işlevler aracılığıyla değişiklikler. Modelin durumu öngörülemez şekilde değiştirebildiği MVC'nin aksine, Redux determinizmi garanti eder: aynı girdi verileriyle sonuç her zaman aynıdır.
Redux, Facebook'un Flux mimarisinden ve Elm dilinden ilham almıştır. Flux'tan temel farkı, birden çok yerine tek bir Store kullanmasıdır. Redux'ta, tüm uygulama durumu — nesneler, diziler, yükleme bayrakları — tek bir ağaçta saklanır. Bu, hata ayıklamayı, test etmeyi ve zamanda yolculuk hata ayıklamayı basitleştirir. Geliştirici Store'un tamamını kaydedebilir, bir Action dizisini oynatabilir ve her adımda durumun nasıl değiştiğini görebilir.
State of JS 2025 anketine göre, durum yönetimi kullanan katılımcıların %68'i Redux veya Redux Toolkit'i seçiyor. Araç, React, React Native, Angular, Vue ve hatta frameworksüz vanilya JavaScript dahil tüm modern frameworkler tarafından desteklenmektedir.
Tek yönlü veri akışı
Tek yönlü veri akışı, Redux'un temel prensibidir ve veriler kesin olarak tek yönde hareket eder: View → Action → Dispatch → Reducer → Store → View. Hiçbir bileşen Store'u doğrudan değiştiremez. Bir View yalnızca useSelector veya connect aracılığıyla değişikliklere abone olur ve dispatch aracılığıyla değişiklikleri başlatır.
Redux iş akışı döngüsü: kullanıcı bir düğmeye tıklar → bileşen dispatch({ type: 'INCREMENT' }) çağırır → Store Action'ı Root Reducer'a iletir → Reducer yeni durumu hesaplar → Store aboneleri bilgilendirir → View yeni verilerle yeniden oluşturulur. Bu döngü, her değişikliğin belirli bir Action biçiminde açık bir nedene sahip olmasını garanti eder.
DevTools — her Action'ı, Store durumunu ve yürütme süresini izlemek için Redux'a yerleşik araç. Geliştirici, gönderilen tüm Action'ların listesini, önceki ve sonraki durum farkını (diff) görür ve önceki herhangi bir duruma geri dönebilir. Bu, karmaşık durumların hata ayıklamasını geleneksel günlüklemeye kıyasla onlarca kat daha hızlı hale getirir.
Redux'un temel bileşenleri
Store — uygulamanın tam durum ağacını içeren nesne. configureStore (RTK) veya createStore aracılığıyla oluşturulur. Store üç yöntem sağlar: getState() okuma için, dispatch(action) değiştirme için ve subscribe(listener) abonelik için. Redux Toolkit'te Store zaten middleware, DevTools ve dilim desteğini içerir.
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 ve Action Creator — Action, zorunlu type alanı (bir dize sabiti) ve isteğe bağlı payload (veri) içeren bir nesnedir. Action Creator, Action döndüren bir işlevdir. Redux Toolkit'te, otomatik tipleme ile Action oluşturmak için createAction kullanılır.
Reducer — mevcut durumu ve bir Action'ı alan, yeni durum döndüren saf işlev. Bir Reducer şunları yapmamalıdır: durumu mutasyona uğratmak (yeni bir nesne döndürülür), API çağırmak, rastgele sayılar üretmek veya Date'e erişmek. Değişmezlik, yayılma operatörü ... veya Immer (RTK'ya entegre) aracılığıyla sağlanır.
| Bileşen | Sorumluluk | Kısıtlamalar |
|---|---|---|
| Store | Durum depolama, dispatch, subscribe | Uygulama başına bir |
| Action | Durumu değiştirme niyetini tanımlama | type olmalı |
| Reducer | Yeni durum hesaplama | Saf işlev, yan etkisiz |
| Dispatch | Action'ı Reducer'a gönderme | Varsayılan olarak senkron |
| Selector | Store'dan veri çıkarma | createSelector ile belleğe alma |
Middleware ve Redux Thunk
Middleware, dispatch çağrısı ile Action'ın Reducer'a ulaştığı an arasına eklenen işlevler zinciridir. Her middleware Store API'sini alır ve Action'ları günlükleyebilir, değiştirebilir, geciktirebilir veya iptal edebilir. Redux Thunk, nesneler yerine işlevleri göndermeye izin veren async işlemler için standart middleware'dir.
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()
}
)Popüler middleware'ler: Redux Thunk — basit async çağrılar için, Redux Saga — oluşturucu saga'lar ile karmaşık senaryolar için (debounce, race, paralel istekler), Redux Observable — reaktif akışlar için RxJS tabanlı. Redux Toolkit'te middleware, configureStore içindeki middleware parametresi aracılığıyla bağlanır.
State of JS 2025 anketine göre, Thunk Redux projelerinin %72'sinde, Saga %18'inde ve Observable %5'inde kullanılıyor. Çoğu uygulama için, Thunk + RTK Query kombinasyonu async veri iş akışlarının %95'ini kapsamak için yeterlidir.
Redux Toolkit ve RTK Query
Redux Toolkit (RTK), 2019'da yayınlanan Redux mantığı yazmanın resmi, önerilen yoludur. RTK, configureStore, createSlice, createAsyncThunk ve createEntityAdapter'ı içerir ve Redux şablon kodunu %60-70 oranında azaltır. Action Creator, Reducer ve türleri manuel olarak oluşturmak yerine, tek bir createSlice kullanılır.
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 tabanlı API'lerle çalışmak için yerleşik bir çözümdür. createApi aracılığıyla bildirimsel olarak uç noktalar tanımlamaya olanak tanır ve otomatik hook oluşturma, önbellekleme, etiket geçersiz kılma ve iyimser güncellemeler sunar. RTK Query, her API isteği için manuel Thunk, Reducer ve Selector yazmanın yerini alır.
Entity Adapter — varlık koleksiyonlarını normalleştirmek için createEntityAdapter yardımcı programı. Nesne dizileri için yerleşik CRUD reducer'lar, selector'ler ve sıralama sağlar. Store kullanıcı, ürün veya sipariş listeleri içeriyorsa — Entity Adapter reducer kodunu %80 azaltır.
React Native'de Redux
React Native Redux, JavaScript'te mobil uygulamalar için standart yığındır. Redux, react-redux 'dan Provider aracılığıyla entegre edilir ve kök uygulama bileşenini sarar. useSelector ve useDispatch hook'ları, bileşenlere props drilling olmadan duruma erişim sağlar. Persist — redux-persist, Store'u AsyncStorage veya MMKV'ye kaydeder, uygulama yeniden başlatıldıktan sonra durumu geri yükler.
React Native için Middleware: Flipper aracılığıyla hata ayıklama için redux-flipper, yerel sürücülerle reaktif akışlar için redux-observable, hızlı kalıcı depolama için react-native-mmkv. Navigasyon eklentisi redux-first-router, ekranları Store'a bağlayarak geri dönüşte ekran durumunun geri yüklenmesine olanak tanır.
React Native'de Redux, ağ-ilk stratejisiyle birlikte kullanılır: uygulama önce sunucudan veri yüklemeye çalışır, ardından RTK Query veya redux-persist aracılığıyla Store'da önbelleğe alır. Çevrimdışı mod, Redux + NetInfo + bağlantı geri yüklendiğinde yeniden göndermek için Action kuyruğunun birleştirilmesiyle elde edilir.
Sıkça Sorulan Sorular
Redux, React'teki Context API'den nasıl farklıdır?
Redux, Store, DevTools, Middleware ve değişmez durum ile tam özellikli bir çözümdür. Context API, props drilling olmadan veri aktarmak için React'in yerleşik mekanizmasıdır. Context, küresel temalar ve yerelleştirme için uygundur; Redux ise async işlemler, önbellekleme ve hata ayıklama ile karmaşık durumlar içindir. Büyük uygulamalarda, Context gereksiz yeniden oluşturmalara neden olurken, selector'lerle Redux bu sorunu çözer.
Redux Toolkit'te Immer nedir?
Immer, Redux Toolkit'e entegre edilmiş değişmez durum yönetimi kütüphanesidir. Immer, reducer'ları sanki durumu doğrudan mutasyona uğratıyormuş gibi yazmanıza olanak tanır: state.value += 1. Perde arkasında Immer bir proxy nesnesi (draft) oluşturur, değişiklikleri izler ve yeni bir değişmez nesne döndürür. Bu, reducer kod hacmini %50 azaltır ve yanlışlıkla mutasyonları ortadan kaldırır.
Redux nasıl test edilir?
Redux mantığı izole olarak test edilir: Reducer — saf işlev, farklı Action'larla çağırın ve sonucu kontrol edin. Action Creator — döndürülen nesneyi doğrulayın. Thunk — API'yi mock'layın, dispatch'i çağırın ve hangi Action'ların gönderildiğini kontrol edin. useSelector ile bileşen — oluşturucuda test Store'u ile Provider kullanın. Redux DevTools, gerçek bir oturumdan Action dizisini oynatarak test yazmaya yardımcı olur.
useState yerine ne zaman Redux kullanmalıyım?
useState, tek bir bileşenin yerel durumu için yeterlidir: alan metni, modal açma/kapama. Redux, durum birçok ekran arasında paylaşıldığında, async senkronizasyon (sunucudan veri) gerektirdiğinde, uygulama yeniden başlatmaları arasında kalıcı olması gerektiğinde (persist) veya zamanda yolculuk hata ayıklaması gerektirdiğinde gereklidir. Küçük uygulamalar için Redux gereksizdir — bunun yerine Context + useReducer kullanın.
Redux'ta normalleştirme nedir?
Normalizr, iç içe verileri düz bir Store yapısına normalleştirmek için bir kütüphanedir. user.posts[0].comments gibi derin nesneleri depolamak yerine, normalleştirme sözlükler oluşturur: entities.users, entities.posts, entities.comments kimlik referanslarıyla. Bu, tek bir varlığı her yerde güncellemeyi basitleştirir ve selector'leri hızlandırır. Redux Toolkit, karmaşık modeller için normalleştirilmiş verileri önerir.
Özet
- Redux — tek bir Store ve saf Reducer'lar ile öngörülebilir durum konteyneri
- Action — type ile nesne, Reducer — saf işlev, Dispatch — gönderme mekanizması
- Redux Toolkit — createSlice, createAsyncThunk ve RTK Query ile resmi API
- Middleware — asenkronite için katman: Thunk, Saga, Observable
- React Native, çevrimdışı mod için Provider, useSelector ve redux-persist aracılığıyla entegre olur
- DevTools — her Action'ı oynatan zamanda yolculuk hata ayıklaması
- Normalizr — verimli selector'ler ve güncellemeler için veri normalleştirme
Anahtar teslim bir mobil uygulama geliştireceğiz
IT Sectr, 2017'den beri girişimler ve işletmeler için iOS ve Android uygulamaları oluşturmaktadır. Size danışmanlık yapacak ve en iyi çözümü önereceğiz.
Ayrıca okuyun