React Native
Sync
Online olunca senkronize etmeyi öğrenirsin.
Senkronizasyon
Çevrimdışı kaydedilen veriyi daha sonra sunucuya göndermeye senkronizasyon denir. Kullanıcı çevrimdışıyken yerel bir kuyruğa yazarsın; çevrimiçi olunca kuyruktaki her öğeyi sırayla sunucuya gönderirsin. Bu kalıp, çevrimdışı değişikliklerin kaybolmamasını sağlar.
Senkronizasyonu başlatmak için NetInfo aboneliği kullanılır: ağ durumu çevrimiçi olunca syncQueue() çağrılır. Bu işlev kuyruktaki her öğeyi alır, sunucuya gönderir, başarılı olursa kuyruktan kaldırır. Başarısız olursa öğe kuyrukta kalır; bir sonraki denemede tekrar denenir. Bu kalıp, kâğıt üzerinde 'gönder' düğmesine basılmış ama ağ bekleyen mesajlar gibi düşünülebilir.
NetInfo aboneliği ile tetikleme
Senkronizasyonu ağ durumu değişince tetiklersin. NetInfo.addEventListener((state) => {{ if (state.isConnected) syncQueue(); }}) kalıbı kullanılır. Bu abonelik, ağ her değiştiğinde çağrılır; bağlantı gelince kuyruk senkronize edilir.
Aboneliği useEffect içinde kurar, temizlikte kaldırırsın. Abonelik bir işlev döndürür; bu işlev unsubscribe olarak adlandırılır ve bileşen kapanınca çağrılır. Bu kalıp, kullanıcı çevrimiçi olur olmaz kuyruğun boşalmasını sağlar. Aboneliği kurmadan önce kuyruk doluysa, uygulama açılır açılmaz da bir senkronizasyon denenebilir.
Uygulama Ağ gelince senkronize et
Boş useEffect'i tamamla. const unsubscribe = NetInfo.addEventListener((state) => {{ if (state.isConnected) syncQueue(); }}) çağır. return () => unsubscribe() ile temizle. syncQueue parametre olarak verilir. useEffect'in ikinci parametresi [] olsun.
Örnek çözümü göster
const unsubscribe = NetInfo.addEventListener((state) => {
if (state.isConnected) syncQueue();
});
return () => unsubscribe();
Kendini test et
-
Senkronizasyon işlevini yaz
async function ____() { /* kuyruğu sunucuya gönder */ }
Cevabı göster
async function syncQueue() { /* kuyruğu sunucuya gönder */ }
-
Senkronizasyon ne zaman başlatılır?
NetInfo.addEventListener((state) => { if (state.???) syncQueue(); })
- type === 'wifi'
- isInternetReachable === false
- details
- isConnected
Cevabı göster
isConnected — isConnected true olunca senkronizasyon başlar.
-
Adımı amacına eşle
- NetInfo.addEventListener
- Ağ değişimini dinler
- syncQueue
- Kuyruğu gönderir
- isConnected
- Bağlantı durumu
- unsubscribe
- Aboneliği kaldırır
Sıradaki ders: Conflict resolution
