React Context API adalah alat manajemen status yang digunakan untuk berbagi data di seluruh komponen React. Cari tahu cara menggunakan API Konteks untuk melacak pengguna yang diautentikasi dalam komponen fungsional.

Apa itu React Context API?

React adalah library berbasis komponen. Aplikasinya terdiri dari: komponen yang berbeda yang bekerja sama. Dalam beberapa kasus, aplikasi Anda perlu berbagi data di seluruh komponen ini.

Misalnya, Anda mungkin ingin membagikan nama pengguna pengguna saat ini dari Gabung komponen ke komponen lain dalam aplikasi Anda. Konteks memudahkan berbagi nama pengguna dengan menghilangkan kebutuhan untuk melewatkan data melalui setiap komponen di pohon komponen.

Kapan Anda Harus Menggunakan React Context API?

Sebelum menggunakan konteks React, pertama-tama, pertimbangkan tipe data yang Anda kerjakan. Konteks lebih cocok untuk data statis. Data yang berubah terus menerus akan menyebabkan terlalu banyak rendering ulang dan akibatnya, mengurangi kinerja. Data tersebut juga harus bersifat global atau setidaknya digunakan oleh banyak komponen, misalnya data seperti bahasa pengguna, tema, dan autentikasi.

Menggunakan Konteks untuk Melacak Status Otentikasi Pengguna

Jika aplikasi Anda menggunakan autentikasi, banyak komponennya perlu mengetahui status autentikasi pengguna saat ini. Melewati status otentikasi ke setiap komponen berlebihan dan mengarah ke pengeboran penyangga sehingga menggunakan konteks adalah pilihan yang baik.

buatKonteks()

Untuk memulai Context API, pertama-tama Anda harus membuatnya menggunakan sintaks ini.

const Konteks = React.createContext (defaultValue);

Nilai default tidak diperlukan dan biasanya digunakan untuk tujuan pengujian.

Pemberi

Setiap konteks memiliki penyedia yang menerima nilai yang dikonsumsi oleh komponen yang dibungkusnya. Hal ini memungkinkan komponen ini untuk berlangganan perubahan konteks.

gunakanKonteks

gunakanKonteks() adalah Kait reaksi yang memungkinkan komponen untuk mengkonsumsi konteks. Anda hanya perlu lulus dalam konteksnya.

const contextValue = useContext (Konteks)

Sekarang mari kita buat konteks autentikasi untuk melacak status autentikasi.

Mulailah dengan membuat file baru, AuthContext.js, dan tambahkan berikut ini.

import { createContext } dari "bereaksi";
const AuthContext = createContext();
ekspor AuthContext default;

Selanjutnya, buat AuthProvider.js dan tambahkan fungsi penyedia.

import { useState, useEffect } dari 'bereaksi';
impor { getUser } dari './auth.js'
impor AuthContext dari './AuthContext'
export const AuthProvider = ({ anak }) => {
 const [pengguna, setUser] = useState (null);
 useEffect(() => {
 const currentUser = getUser()
 setUser (Pengguna saat ini)
 }, []);
kembali (
{anak-anak}
 );
 };

Di sini, Anda mengambil pengguna saat ini dari yang palsu dapatkanPengguna() fungsi. Dalam aplikasi nyata, ini akan menjadi layanan backend Anda.

Simpan pengguna dalam status saat ini untuk melacak perubahan apa pun, lalu berikan pengguna ke penyedia di prop nilai.

AuthProvider.js juga menerima anak-anak dengan akses ke konteks.

Langkah selanjutnya adalah membuat kait khusus yang memungkinkan komponen yang dibungkus dengan penyedia untuk mengakses konteks.

Buat file baru gunakanAuthContext.js dan tambahkan berikut ini.

impor AuthContext dari "./AuthContext";
const useAuthContext.js = () => {
 const pengguna = useContext (AuthContext);
 if (pengguna tidak ditentukan) {
 throw new Error("useAuthContext hanya dapat digunakan di dalam AuthProvider");
 }
 pengguna kembali;
};

Sekarang jika kode di luar panggilan penyedia Konteks Otentik, aplikasi Anda akan menangani kesalahan dengan baik.

Langkah terakhir adalah membungkus komponen menggunakan konteks dengan AuthProvider.js.

impor { AuthProvider } dari "./AuthContext";
ReactDOM.render(




,
 rootElement
);

Berikut adalah contoh bagaimana Anda akan menggunakan konteks untuk melindungi halaman dari pengguna yang tidak diautentikasi.

impor useAuthContext dari "./useAuthContext";
import { Navigasi } dari "react-router-dom";
const Profil = () => {
 const { pengguna } = useAuthContext();
 jika (!pengguna) {
 kembali ;
 }
 kembali (
 <>
Profil

 );
};

komponen ini render bersyarat halaman profil tergantung pada status otentikasi pengguna. Ini memeriksa apakah pengguna ada dan jika tidak, mengarahkan mereka ke halaman login. Jika tidak, itu membuat halaman profil.

Kapan Tidak Menggunakan React Context API

Dalam artikel ini, Anda mempelajari cara menggunakan Konteks untuk melacak pengguna yang diautentikasi di seluruh komponen. Meskipun Anda mungkin tergoda untuk menggunakan Konteks untuk semua kasus penggunaan berbagi data Anda, Anda tidak boleh melakukannya karena hal itu mengurangi kemampuan pemeliharaan dan kinerja kode. Setiap kali nilai konteks berubah, setiap komponen yang menggunakan status dirender ulang. Jika data hanya digunakan oleh beberapa komponen, pilihlah alat peraga.

Cara Menggunakan Alat Peraga di ReactJS

Baca Selanjutnya

Tentang Penulis