React Context API je alat za upravljanje stanjem koji se koristi za dijeljenje podataka između React komponenti. Saznajte kako koristiti Context API za praćenje provjerenih korisnika u funkcionalnim komponentama.

Što je React Context API?

React je biblioteka bazirana na komponentama. Njegove primjene obuhvaćaju različite komponente koji rade zajedno. U nekim slučajevima vaša aplikacija treba dijeliti podatke između ovih komponenti.

Na primjer, možda biste željeli podijeliti korisničko ime trenutnog korisnika iz Prijaviti se komponentu drugim komponentama u vašoj aplikaciji. Kontekst olakšava dijeljenje korisničkog imena eliminirajući potrebu za prosljeđivanjem podataka kroz svaku komponentu u stablu komponenti.

Kada biste trebali koristiti React Context API?

Prije korištenja React konteksta, prvo razmotrite vrstu podataka s kojima radite. Kontekst je prikladniji za statične podatke. Podaci koji se kontinuirano mijenjaju uzrokovat će previše ponovnih generiranja i kao rezultat toga smanjiti performanse. Podaci bi također trebali biti globalni ili ih barem koristiti mnoge komponente, na primjer, podaci kao što su korisnički jezik, teme i provjera autentičnosti.

Korištenje konteksta za praćenje statusa provjere autentičnosti korisnika

Ako vaša aplikacija koristi autentifikaciju, mnoge njezine komponente morat će znati trenutno stanje provjere autentičnosti korisnika. Prosljeđivanje statusa provjere autentičnosti na svaku komponentu je suvišno i dovodi do probušenja pa je korištenje konteksta dobra opcija.

createContext()

Da biste započeli s Context API-jem, prvo ga morate izraditi pomoću ove sintakse.

const Context = React.createContext (defaultValue);

Zadana vrijednost je nepotrebna i obično se koristi u svrhe testiranja.

Pružatelj usluga

Svaki kontekst ima dobavljača koji prima vrijednost koju konzumiraju komponente koje omota. Ovim komponentama omogućuje da se pretplate na promjene konteksta.

useContext

useContext() je Reakcija kuka koji omogućuje komponentama da konzumiraju kontekst. Samo trebate proći u kontekstu.

const contextValue = useContext (kontekst)

Kreirajmo sada kontekst provjere autentičnosti kako bismo pratili stanje provjere autentičnosti.

Započnite stvaranjem nove datoteke, AuthContext.js, i dodajte sljedeće.

import { createContext } iz "react";
const AuthContext = createContext();
izvoz zadanog AuthContext;

Zatim kreirajte AuthProvider.js i dodajte funkciju provajdera.

import { useState, useEffect } iz 'react';
import { getUser } iz './auth.js'
uvoz AuthContext iz './AuthContext'
export const AuthProvider = ({ djece }) => {
 const [user, setUser] = useState (null);
 useEffect(() => {
 const currentUser = getUser()
 setUser (trenutačni korisnik)
 }, []);
vratiti (
{djeca}
 );
 };

Ovdje preuzimate trenutnog korisnika s lažnog getUser() funkcija. U stvarnoj aplikaciji, ovo bi bila vaša pozadinska usluga.

Spremite korisnika u trenutno stanje kako biste pratili sve promjene, a zatim ga proslijedite davatelju u parametru vrijednosti.

AuthProvider.js također prima djecu s pristupom kontekstu.

Sljedeći korak je stvaranje prilagođene kuke koja će komponentama omotanim s pružateljem omogućiti pristup kontekstu.

Napravite novu datoteku useAuthContext.js i dodajte sljedeće.

uvoz AuthContext iz "./AuthContext";
const useAuthContext.js = () => {
 const korisnik = useContext (AuthContext);
 if (korisnik nedefiniran) {
 throw new Error("useAuthContext se može koristiti samo unutar AuthProvider");
 }
 povratni korisnik;
};

Sada ako kod izvan davatelja poziva AuthContext, vaša će aplikacija elegantno obraditi grešku.

Posljednji korak je omotati komponente koristeći kontekst s AuthProvider.js.

import { AuthProvider } iz "./AuthContext";
ReactDOM.render(




,
 rootElement
);

Evo primjera kako biste upotrijebili kontekst za zaštitu stranice od korisnika koji nisu ovlašteni.

uvoz useAuthContext iz "./useAuthContext";
import { Navigate } from "react-router-dom";
const Profil = () => {
 const { korisnik } = useAuthContext();
 ako (!korisnik) {
 povratak ;
 }
 vratiti (
 <>
Profil

 );
};

Ova komponenta uvjetno donosi stranicu profila ovisno o statusu provjere autentičnosti korisnika. Provjerava postoji li korisnik, a ako ne postoji, preusmjerava ga na stranicu za prijavu. Inače, prikazuje stranicu profila.

Kada ne koristiti React Context API

U ovom ste članku naučili kako koristiti Context za praćenje provjerenog korisnika u svim komponentama. Iako biste mogli biti u iskušenju da koristite Context za sve svoje slučajeve korištenja dijeljenja podataka, ne biste trebali jer smanjuje mogućnost održavanja i performanse koda. Svaki put kada se vrijednost konteksta promijeni svaku komponentu koja koristi renderiranje stanja. Ako podatke koristi samo nekoliko komponenti, odlučite se za rekvizite.

Kako koristiti rekvizite u ReactJS-u

Pročitajte dalje

O autoru