Auth ve API

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.

Örnek çözümü göster

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>
  );
}

Kendini test et

createContext çağrısı

const AuthContext = ____(null);

Cevabı göster

const AuthContext = createContext(null);

useAuth hook'u ne döndürür?
```
const { user } = useAuth();
```
- Bir state
- Bir context
- Context değerini
- Bir dizi
Cevabı göster

Context değerini — useAuth context değerini döndürür.
Parçayı rolüne eşle

AuthContext

Context tanımı
Provider

Değeri sağlar
useAuth

Değeri okur
user

Token taşıyan state

Sıradaki ders: Native özellikler

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler