Auth ve API
- React Native kursu
- İleri seviye
- Ders 80/83
- 6 dk
Auth context ve API entegrasyonu yazarsın.
Auth context ekle
Bu derste AuthContext oluşturup App'i provider ile saracağız. createContext(null) ile başlatırız; null varsayılan değer, giriş yapılmamış durumu gösterir. Bir useAuth hook'u ile context'i okuruz.
Auth state'i user ve setUser tutar. Giriş başarılı olunca setUser(token) çağrılır; çıkışta setUser(null). Provider'ın value'şu bu ikisini verir. API isteği yapmadan önce const { user } = useAuth() ile token'ı alırsın; Authorization başlığına eklersin. Bu desen, orta ve büyük uygulamaların temelidir.
API fetch ile görev yükle
Auth context'i kurunca useEffect içinde fetch çağırırız. URL 'https://api.example.com/tasks'. Authorization başlığına user token'ını ekleriz. Dönen JSON'u setTasks ile state'e yazarız.
Örnek: fetch(url, { headers: { Authorization: 'Bearer ' + user } }). Bağımlılık dizisi [user] olur; böylece user değişince istek yeniden atılır. Hata yönetimi için .catch eklenir. Bu akış, gerçek uygulamaların veri yükleme standardıdır: önce auth, sonra veri.
Uygulama AuthContext ve provider ekle
Bir AuthContext oluştur (createContext(null) ile). useAuth hook'unu yaz (useContext ile). App içinde useState(null) ile user state'i tut; dönüşü <AuthContext.Provider value={{ user, setUser }}> ile sar.
Başlangıç kodu
import React, { useState } from 'react';
import { Text, View } from 'react-native';
function App() {
const [tasks, setTasks] = useState([]);
return (
<View>
<Text>Saha Raporu</Text>
</View>
);
}
// giriş context'ini ve provider'ı buraya ekleÖrnek çözüm
import React, { useState } from 'react';
import { Text, View } from 'react-native';
function App() {
const [tasks, setTasks] = useState([]);
return (
<View>
<Text>Saha Raporu</Text>
</View>
);
}
const AuthContext = createContext(null);
export function useAuth() { return useContext(AuthContext); }
function App() {
const [tasks, setTasks] = useState([]);
const [user, setUser] = useState(null);
return (
<AuthContext.Provider value={{ user, setUser }}>
<View>
<Text>Saha Raporu</Text>
</View>
</AuthContext.Provider>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 createContext çağrısı
const AuthContext = ____(null);const AuthContext = createContext(null);Açıklama: createContext yeni bir context oluşturur.
2 useAuth hook'u ne döndürür?
const { user } = useAuth();- Bir state
- Bir context
- Context değerini Doğru cevap
- Bir dizi
Açıklama: useAuth context değerini döndürür.
3 Parçayı rolüne eşle
| Kavram | Anlamı |
|---|---|
AuthContext |
Context tanımı |
Provider |
Değeri sağlar |
useAuth |
Değeri okur |
user |
Token taşıyan state |