useAuth: manejo de sesiones con Custom Hooks y React Context

Clase 6 de 21 • Curso de React Native: Formularios, Almacenamiento y Deploy

Gregson Murcia Castro

student•

Se me dificultaba un poco el tema del React Context, pero luego de leer la documentación y otro ejemplo lo hizo más claro:

“Context se usa principalmente cuando algunos datos tienen que ser accesibles por muchos componentes en diferentes niveles de anidamiento. Aplícalo con moderación porque hace que la reutilización de componentes sea más difícil.”

https://es.reactjs.org/docs/context.html

https://medium.com/noders/manejo-de-estado-con-context-y-hooks-en-react-7adfc7a740a3

IVAN FONSECA

student•

https://platzi.com/clases/1601-react-avanzado/21283-introduccion-a-reactcontext/?gclid=CjwKCAjwnZaVBhA6EiwAVVyv9Ki8E3UtfoNtf5ii_MMcsmeTvSPz31eISa8QBR6Ku82uQIKCASEh5RoCDS8QAvD_BwE&gclsrc=aw.ds

Migrant Cyborg

student•

Esta clase es literalmente un salto de fé.

Sabino Fernández

student•

He usado el Context API de React en otras ocasiones, pero nunca se me había ocurrido usarlo de una forma tan elegante! Me gusta mucho.

Gilberto Santamaria

student•

La verdad para temas como login y fetching de datos siento que es mejor usar un state manager como Redux o Zustand que se pueden usar sin importar la librería y el ReactContext para temas de manejo de datos internos de la app como una lista de favoritos, un carro de compras etc . Pero como explica el uso de los customHooks si está muy bueno!

Daniel Ochoa

student•

No se debe utilizar undefined para inicializar variables o estados, para eso existe null, que es la declaración textual de una variable sin valor, es una muy mala practica ✖️

David Rangel

student•

Les comparto mi repo de esta clase, lo hice todo con Zustand y me pareció más sencillo así:

El código de la store:

import { create } from 'zustand';

import { UserDetailsType } from '@/utils/types/db/UserType';

interface AuthStoreState {
  currentAuthData: UserDetailsType | null;
  setAuthData: (data: UserDetailsType) => void;
  clearAuthData: () => void;
}

export const useAutStore = create<AuthStoreState>((set) => ({
  currentAuthData: null,
  setAuthData: (data) => set({ currentAuthData: data }),
  clearAuthData: () => set({ currentAuthData: null }),
}));

Daniel Ochoa

student•

Otro error mas en esta clase, es que en el contexto defines un user pero luego usas un estado llamado auth, los valores que le pasas inicialmente por createContext son algo asi como los default Props que lo dices tambien anteriormente, sin embargo lo inicializas mal porque debe referirse a tu estado si quieres algo inicial o de plano no poner nada. Luego en el retorno debias retornar algo existente en este caso tu estado auth.

Daniel Ochoa

student•

Adicional la razon real de no pasarte el contexto al Auth al NavigationContainer es que no tiene sentido pasarle a un enrutador un contexto de autenticación cuando realmente donde lo necesitas es en el contenido de la aplicación, en otras palabras el NavigationContainer, también se constituye en otra especie de provider y no tiene sentido darle mas props a un provider.

Kader Gómez

student•

En este artículo proveo una alternativa al useContext en React Native utilizando el Observable Pattern, puede ser muy útil en muchas ocasiones.

Kevin Parra Lopez

student•

Creo que esto pudo haber sido mas sencillo

Kevin Parra Lopez

student•

Suelo hacerlos de esta manera

// Librerias
import { createContext, useState } from "react";

// Otros

/**
 * Descripcion del context: Este contexto se encarga de adminstar la sesion
 *
 * Implementacion: Descripción sobre cómo puedes implementar el context.
 *
 * Bugs: Qué bugs se han presentado y como se solucionan.
 */

const AuthContext = createContext({
  user: undefined,
});

export function AuthProvider({ children }) {
  const [auth, setAuth] = useState(null);

  return (
    <AuthContext.Provider value={{ auth, setAuth }}>
      {children}
    </AuthContext.Provider>
  );
}
export default AuthContext;

Stiven Jiménez

student•

Qué clase tan interesante, me gusto mucho la estructura que propuso user para crear él Contextoe, y muy inteligente usar useAuth (customhook) para obtener los datos y funciones del contexto.

import { create } from 'zustand';

import { UserDetailsType } from '@/utils/types/db/UserType';

interface AuthStoreState {
  currentAuthData: UserDetailsType | null;
  setAuthData: (data: UserDetailsType) => void;
  clearAuthData: () => void;
}

export const useAutStore = create<AuthStoreState>((set) => ({
  currentAuthData: null,
  setAuthData: (data) => set({ currentAuthData: data }),
  clearAuthData: () => set({ currentAuthData: null }),
}));

// Librerias
import { createContext, useState } from "react";

// Otros

/**
 * Descripcion del context: Este contexto se encarga de adminstar la sesion
 *
 * Implementacion: Descripción sobre cómo puedes implementar el context.
 *
 * Bugs: Qué bugs se han presentado y como se solucionan.
 */

const AuthContext = createContext({
  user: undefined,
});

export function AuthProvider({ children }) {
  const [auth, setAuth] = useState(null);

  return (
    <AuthContext.Provider value={{ auth, setAuth }}>
      {children}
    </AuthContext.Provider>
  );
}
export default AuthContext;

useAuth: manejo de sesiones con Custom Hooks y React Context

Sistema de formularios

Descarga el código base del proyecto

Pantalla de Mi cuenta

Formulario de Login

Sistema de formularios avanzados

Implementando Formik y Yup

Iniciando sesión

useAuth: manejo de sesiones con Custom Hooks y React Context

Datos del usuario y logout

Sistema de favoritos

Botón de añadir a favoritos

Almacenando un Pokémon favorito con AsyncStorage

Almacenando varios Pokémon favoritos

Pantalla de favoritos

Toggle en el botón de favoritos

Eliminar Pokémon de favoritos

Lista de Pokémon favoritos

Navegación hacia atrás en favoritos

Logout

Sincronizando información entre pantallas

Pre deploy

Configuración básica antes del BUILD

Cómo generar el APK y AAB para Android

Cómo generar la app para iOS

¿Quieres cursos más avanzados de React Native?