Auth context

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.

Örnek çözümü göster

import React, { createContext } from 'react';

export const AuthContext = createContext(null);

Kendini test et

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ı
Cevabı göster

Kimlik doğrulama durumunu tüm ekranlarda paylaşmayı — Auth context kimlik doğrulama durumunu tüm ekranlarla paylaşır.

createContext çağrısını yaz

export const AuthContext = ____(null);

Cevabı göster

export const AuthContext = createContext(null);

Parçayı rolüne eşle

createContext

Context oluşturur
Provider

Değeri üstten aşağı taşır
useContext

Değeri altta okur
value

Provider'ın taşıdığı veri

Sıradaki ders: Login

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler