Auth context
- React Native kursu
- İleri seviye
- Ders 43/83
- 5 dk
Auth context ile kimlik doğrulama öğrenirsin.
Auth context
Bir mobil uygulamada kullanıcı giriş yaptığında bunu tüm ekranlarda bilmek isteriz. Tek tek her ekrana user bilgisini prop olarak geçirmek yorucudur. Bunun için React Context API'sini kullanırız: AuthContext, kimlik doğrulama (authentication) durumunu merkezî tutar.
Bir context oluşturmak için createContext çağrılır ve varsayılan bir değer verilir. Üst bileşende Provider ile sarmalanır; value prop'u üzerinden tüm alt bileşenler bu değere erişir. Böylece login, logout ve user durumu tek yerden yönetilir.
createContext ile başla
const AuthContext = createContext(defaultValue) ile context'i oluşturursun. Varsayılan değer, provider yokken kullanılır; çoğu durumda null veya boş bir nesne verilir. Dışa aktarırken export const AuthContext = createContext(null) yazmak yaygındır.
Alt bileşenlerden context'i okumak için useContext(AuthContext) kullanılır. Bu hook, üstteki en yakın Provider'ın value değerini döner. Provider'a value={{ user, login, logout }} vererek tüm uygulamaya bu değerleri açabilirsin.
Uygulama AuthContext oluştur
Boş dosyayı tamamla. React'ten createContext'i içe aktar. export const AuthContext'i createContext(null) ile tanımla.
Başlangıç kodu
import React from 'react';
// AuthContext'i createContext ile tanımlaÖrnek çözüm
import React, { createContext } from 'react';
export const AuthContext = createContext(null);Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Auth context neyi kolaylaştırır?
- Yalnızca dosya indirmeyi
- Yalnızca stil tanımlamayı
- Yalnızca animasyon oynatmayı
- Kimlik doğrulama durumunu tüm ekranlarda paylaşmayı Doğru cevap
Açıklama: Auth context kimlik doğrulama durumunu tüm ekranlarla paylaşır.
2 createContext çağrısını yaz
export const AuthContext = ____(null);export const AuthContext = createContext(null);Açıklama: createContext ile context oluşturulur.
3 Parçayı rolüne eşle
| Kavram | Anlamı |
|---|---|
createContext |
Context oluşturur |
Provider |
Değeri üstten aşağı taşır |
useContext |
Değeri altta okur |
value |
Provider'ın taşıdığı veri |