En mi aplicación React tengo la siguiente situación. En cada página tengo que crear esta lógica:
const user = useUser(); const message = user.auth ? 'Welcome' : 'You are not allowed' <Button>{message}</Button>Tengo que agregar esta lógica en 10 páginas. Se que mi pregunta es mas teorica, pero que es mejor en mi caso:
Para agregar esta lógica en cada página; o
Para crear un gancho personalizado como useButtonMessage() que se verá así:
export const useButtonMessage = () => { const user = useUser(); const message = user.auth ? 'Welcome' : 'You are not allowed' return message; }¿No será redundante el gancho si mantiene solo 3 líneas de código?
Personalmente, me gusta crear ganchos con todas las cosas relativas a un tema en particular (en lugar de solo una constante como message ). Por ejemplo:
export const useAuth = () => { const user = useUser() const isLoggedIn = user.auth const welcomeMessage = isLoggedIn ? 'Welcome' : 'You are not allowed' /* add selectors, functions to dispatch actions, or other util contants such as welcomeMessage */ return { isLoggedIn, // use this constant across your app to check if the user is logged in user, // use this across your app to obtain the user welcomeMessage, }; }No crearía un enlace para eso, sino que crearía un archivo de mensajes donde se almacenarán todos los mensajes de la aplicación.
Y luego puedes agregar propiedades condicionales fe
export const messages = { userAllowed: (authenticated: boolean) => authenticated ? 'welcome' : 'you are not allowed' }Incluso puedes ir un paso más allá:
export const messages = { Welcome: 'welcome', NotAllowed: 'you are not allowed', userAllowed: function(authenticated: boolean) { return authenticated ? this.Welcome : this.NotAllowed }, }