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
Esta clase es literalmente un salto de fé.
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.
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!
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 ✖️
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 }),
}));
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.
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.
En este artículo proveo una alternativa al useContext en React Native utilizando el Observable Pattern, puede ser muy útil en muchas ocasiones.
Creo que esto pudo haber sido mas sencillo
Gregson Murcia Castro
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
Sabino Fernández
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
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
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
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
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
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
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
Creo que esto pudo haber sido mas sencillo
Kevin Parra Lopez
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
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.
