La API de contexto de React es una herramienta de administración de estado que se utiliza para compartir datos entre los componentes de React. Descubra cómo utilizar la API de contexto para realizar un seguimiento de los usuarios autenticados en componentes funcionales.

¿Qué es la API de contexto de reacción?

React es una biblioteca basada en componentes. Sus aplicaciones comprenden diferentes componentes que trabajan juntos. En algunos casos, su aplicación necesita compartir datos entre estos componentes.

Por ejemplo, es posible que desee compartir el nombre de usuario del usuario actual de la Acceso componente a otros componentes en su aplicación. Contexto facilita compartir el nombre de usuario al eliminar la necesidad de pasar datos a través de cada componente en el árbol de componentes.

¿Cuándo debería usar la API de contexto de reacción?

Antes de usar el contexto de React, primero, considere el tipo de datos con los que está trabajando. El contexto es más adecuado para datos estáticos. Los datos que cambian continuamente provocarán demasiados renderizados y, como resultado, reducirán el rendimiento. Los datos también deben ser globales o al menos utilizados por muchos componentes, por ejemplo, datos como el idioma del usuario, los temas y la autenticación.

Uso del contexto para realizar un seguimiento del estado de autenticación del usuario

Si su aplicación usa autenticación, muchos de sus componentes necesitarán conocer el estado de autenticación del usuario actual. Transmitir el estado de autenticación a cada componente es redundante y conduce a la exploración de accesorios, por lo que usar el contexto es una buena opción.

crearContexto()

Para comenzar con la API de contexto, primero debe crearla con esta sintaxis.

const Contexto = React.createContext (valor predeterminado);

El valor predeterminado es innecesario y generalmente se usa para fines de prueba.

Proveedor

Cada contexto tiene un proveedor que recibe un valor consumido por los componentes que envuelve. Permite que estos componentes se suscriban a los cambios de contexto.

useContext

useContext() es un Gancho de reacción que permite que los componentes consuman contexto. Solo necesita pasar en el contexto.

const contextValue = useContext (Contexto)

Ahora vamos a crear el contexto de autenticación para realizar un seguimiento del estado de autenticación.

Comience creando un nuevo archivo, AuthContext.js, y agrega lo siguiente.

importar { createContext } de "reaccionar";
const AuthContext = createContext();
exportar AuthContext predeterminado;

A continuación, crea AuthProvider.js y agregue la función de proveedor.

import { useState, useEffect } desde 'reaccionar';
importar { getUser } desde './auth.js'
importar AuthContext desde './AuthContext'
export const AuthProvider = ({ niños }) => {
 const [usuario, establecerUsuario] = useState (nulo);
 usarEfecto(() => {
 const usuario actual = getUser()
 setUser (usuario actual)
 }, []);
devolver (
{niños}
 );
 };

Aquí, está recuperando el usuario actual de un falso obtenerUsuario() función. En una aplicación real, este sería su servicio de backend.

Almacene al usuario en el estado actual para realizar un seguimiento de cualquier cambio y luego pase el usuario al proveedor en la propuesta de valor.

AuthProvider.js también recibe a los niños con acceso al contexto.

El siguiente paso es crear un enlace personalizado que permitirá que los componentes envueltos con el proveedor accedan al contexto.

Crear un nuevo archivo useAuthContext.js y agrega lo siguiente.

importar AuthContext desde "./AuthContext";
const useAuthContext.js = () => {
 const usuario = useContext (AuthContext);
 si (usuario indefinido) {
 throw new Error("useAuthContext solo se puede usar dentro de AuthProvider");
 }
 usuario de retorno;
};

Ahora si el código fuera del proveedor llama AuthContext, su aplicación manejará el error con gracia.

El paso final es envolver los componentes usando contexto con Proveedor de autenticación.js.

importar {AuthProvider} desde "./AuthContext";
ReactDOM.render(




,
 rootElement
);

Este es un ejemplo de cómo usaría el contexto para proteger una página de usuarios no autenticados.

importar useAuthContext desde "./useAuthContext";
importar {Navegar} desde "react-router-dom";
const Perfil = () => {
 const {usuario} = useAuthContext();
 si (!usuario) {
 devolver ;
 }
 devolver (
 <>
Perfil

 );
};

este componente hace condicionalmente la página de perfil dependiendo del estado de autenticación del usuario. Comprueba si el usuario existe y, si no, lo redirige a la página de inicio de sesión. De lo contrario, representa la página de perfil.

Cuándo no usar la API de contexto de reacción

En este artículo, aprendió a usar Context para realizar un seguimiento de un usuario autenticado en todos los componentes. Si bien puede sentirse tentado a usar Context para todos sus casos de uso de uso compartido de datos, no debería hacerlo, ya que reduce la capacidad de mantenimiento y el rendimiento del código. Cada vez que el valor del contexto cambia, cada componente que consume el estado se vuelve a renderizar. Si los datos solo son utilizados por unos pocos componentes, opte por accesorios.

Cómo usar accesorios en ReactJS

Leer siguiente

Sobre el Autor