Sync
- React Native kursu
- İleri seviye
- Ders 33/83
- 5 dk
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.
Başlangıç kodu
import React from 'react';
import NetInfo from '@react-native-community/netinfo';
export function useSyncOnOnline(syncQueue) {
React.useEffect(() => {
// ağ gelince senkronize et ve temizlik döndür
}, []);
}Örnek çözüm
const unsubscribe = NetInfo.addEventListener((state) => {
if (state.isConnected) syncQueue();
});
return () => unsubscribe();Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Senkronizasyon işlevini yaz
async function ____() { /* kuyruğu sunucuya gönder */ }async function syncQueue() { /* kuyruğu sunucuya gönder */ }Açıklama: syncQueue kuyruğu senkronize eder.
2 Senkronizasyon ne zaman başlatılır?
NetInfo.addEventListener((state) => { if (state.???) syncQueue(); })- type === 'wifi'
- isInternetReachable === false
- details
- isConnected Doğru cevap
Açıklama: isConnected true olunca senkronizasyon başlar.
3 Adımı amacına eşle
| Kavram | Anlamı |
|---|---|
NetInfo.addEventListener |
Ağ değişimini dinler |
syncQueue |
Kuyruğu gönderir |
isConnected |
Bağlantı durumu |
unsubscribe |
Aboneliği kaldırır |