Zustand, más fácil que Redux (junto con Typescript)
ฝัง
- เผยแพร่เมื่อ 17 ต.ค. 2024
- Zustand es un manejador de estado para aplicaciones de Javascript en general, aunque también puede llegar a ser usando comúnmente con React y React Query. Este permite tener un estado centralizado y global similar a bibliotecas como Redux, MobX o similar a la API de React useContext, solo que con una configuración muy sencilla y teniendo estados que son hooks fáciles de integrar en tus aplicaciones de React. Además también puede funcionar con Typescript y no necesita de usar Providers.
💻 Código del Proyecto: github.com/faz...
⭐ Cursos Recomendados
⮕ Rust, Instalacion Windows • Rust (Lenguaje de Prog...
⮕ Rust, Instalacion Linux • Rust, Instalación en L...
⮕ Rocket, Rust backend Framework • Rocket, Framework Back...
⮕ Tauri, Rust Desktop Framework • Tauri - Aplicaciones d...
⮕ Curso de React • Curso de Reactjs desde...
⮕ Curso de Javascript para React • Javascript para Aprend...
⮕ Curso de Nodejs • Nodejs Curso Práctico ...
⮕ MPA vs SPA • Aplicaciones SPA vs MP...
⮕ Nodejs y Jest Testing • Nodejs Testing con Jes...
⮕ MERN Stack • MERN Stack con Context...
🗣 Redes Sociales
⮕ Twitter / fazttech
🎒 Servicios Recomendados
⮕Ledger (Hardware Wallet) bit.ly/3ijsVNW
⮕ SiteGround bit.ly/31u9ZEk
⮕ Cloudinary bit.ly/3ohNlJ7
⮕ Namecheap namecheap.pxf....
🌎 Sitio Web
fazt.dev
#zustand #reactjs #javascript
Solamente vi 10 minutos y fue suficiente para comprender como funciona, el mundo necesita más personas como tu Fazt
yo con 6 prro
@@8koi245 Yo solo vi la miniatura y ya lo entendí 😂
Yo solo con buscarlo y ver el título
Dios, juro que conocí Zustand hace más o menos dos semanas y no encontraba un buen curso para aprenderlo 😂 Grande Fazt! Feliz 2023
El StrictMode de React renderiza dos veces los componentes para ayudarte a detectar efectos secundarios de la renderización. Esto solo ocurre durante el desarrollo. Un saludo.
igual se puede hacer el truco con useRef para hacer api calls
Es la cosa mas horrible del mundo, en especial cuando usas toggle de classlist para ejecutar animaciones que necesitan activarse con un botón
Excelente!!!... en mi trabajo unos colegas comentaron sobre Zustand pero no encontré mucho en internet como para probar y con tu video me quedó clarísimo, como siempre, estoy super agradecido de tus constantes aportes, muchas gracias!!
Reconozco que nunca me he llevado muy bien con Redux. Esta herramienta parece mucho más sencilla.
Muchas gracias Fazt
Muy buen video como siempre, sos un profesor clave para la carrera de los autodidacta. Gracias.
Quede loquisimo con este tutorial 🤯
Es increíble lo sencillo que es ❤️
Brutal, solo un par de minutos para entender y uno mismo experimentar. Gracias!
shaaaaleeeeeeeeeeeeeeee.. en serio fazt usted me enseño mas que la documentacion de zustand jajaja, al fin entendi esto y me lo etan pidiendo para desarrollar un sitio web en react con typescript mil gracias
estaba teniendo problemas con redux toolkit en una app de next js y migre a zustand en muy poco tiempo , encanto y me soluciono el problema que tenia.
Esta hermoso, batallo para entender redux pero zustand me ha parecido muy práctico y sencillo de utilizar
Fazt, tienes pensando hacer algún tutorial sobre storybook?, Sería bueno poder ver en el canal un tutorial de como integrar y trabajar con storybook y react.
Muchas gracias por este contenido Fazt, espero que estés teniendo un fabuloso inicio de año :)
Bien explicado Fazt, aprendo bastante con tus tutoriales muchas gracias.
Buenísimo. Claro, simple y útil. Saludos capo!
Súper interesante. Me gustó mucho más que redux y es más fácil de usar. Muchas gracias por compartir
Como siempre aquí dejando mi like para apoyar al poderoso Fazt.
que espectacular! que genialidad de explicación! y que bueno, mucho más fácil de entender que redux, sí :) voy a volver a ver la clase de react query que me gustó mucho pero me irá bien un repaso ahora que conozco Zustand :) muchisimas gracias
Muchas gracia, bastante util, rapido y sencillo
Hola Fazt, no sé si es mucha molestia pero podrías hacer un video de como aprender temas nuevos y como es tu Horario? enserio me sorprende la cantidad de cursos que aprendes, haz un blog personal o algo asi , seria genial , espero me leas :)
justo lo que estaba buscando, gracias
Está excelente zustand , gracias fazt
se ve bastante util la verdad, gracias
Gracias por el video , esta excelente react con ts y tecnologias como esta
Una genialidad! Me pareció muy parecido al useContent de react(hook) puede ser? Saludos desde Argentina!
asi es, es similar solo que no necesita del provider, y es bastante intuitivo usarlo
Hola. Gracias por el video. He estado buscando en la documentación de Zustand y no encuentro nada sobre shallow. Sin embargo si encontre un hook useShallow. Lo poco que encontré sobre shallow es una configuración de un objeto y dice todo lo contrario a lo que explicaste. Es decir que es una configuración para hacer copia superficial ya que por defecto, Zustand la hace profunda. Podrías aclararme si esta info ya esta obsoleta o de donde salió el shallow que usas en el minuto 13:58 ? Gracias.
a mi tambien me sale error cuando intento exportar zustand, encontraste una respuesta?
¿Si es una buena práctica guardar toda la data (en este caso los post) en el state?
podrías hacer un video de como usar esta librería con react-query? está muy interesante, y si es posible en next.js porque vi que tiene problemas con la caché y debe usarse un hidratador para que react-query funcione.
empezando fuerte en 2023, éxitos.
Gran video, espero con ansias un nuevo tutorial de electron
Poderoso el video Fazt
Gracias por el nuevo video, una pregunta, algun dia podrás explicar como funciona un login y sesiones de usuario en react?
Si claro, esta semana publico un ejemplo practico con Autenticacion tanto backend y frontend :)
Entonces puedo hacer el llamada a mi apirest desde una store de zustand? Podría crear distintas store para distintas llamadas a la api rest que tengo? :D
Hey Fazt, quería preguntarte (ya que creo que nunca lo has dicho en una entrevista) si alguna vez has tomado algún curso aparte de cuando estabas en la universidad, ¿Y qué temarios viste en la universidad?
No realmente, pero si leía muchos los Libros de editoriales como Packt, Oreilly, o Apress, por nombrar algunas. Estos son muy prácticos, casi como cursos o tutoriales escritos, realmente avance mucho con estos. Los recomiendo
cual es tema de vs code que usa?
Qué grande Fazt
¡Buen vídeo! Gracias
Y que tal será en aplicaciones desplegadas para miles de usuarios? Y comparado con Valtio?
Justo es lo que quería, de echo a mi intuitivamente se me hucurió combinar react-query con zustand pero yo uso a zustand para los estados de los componentes y react-query para el manejo de datos. ¿Que otra combinación puedo hacer?
Fazt si no entendí mal decís que hay proyectos que combinan zustand con react query?
Sí, asi es
Muy buena explicación y ejemplos. ¡La comunidad apreciará mucho tus aportaciones!
Un saludo
Omg, esto es muy muy parecido a la forma en que Svelte maneja su estado
es posible generar disparos o actions automaticos cuando cambie el estado ? como lo hace ngrx q se dispara el selector cada que cambio un estado ?
Hola! no se de Redux. Voy directo a Zustand o igualmente conviene apreder Redux primero?
no necesariamente, puedes ir directo a zustand
@@FaztCodeHola! gracias...
yo he trabajado con Recoil JS ya que se parece mucho a lo que ya tenemos en React con el useState
Saben si esto sustituye a Volta (hecho en rust)? O se pueden usar ambas a la vez?
Hola que plugins utilizas para q tu consola muestre cuanta ram estas usando??
Hace meses hice un tutorial del tema th-cam.com/video/d9y0l7yY404/w-d-xo.html :)
Es más simple que Redux, eso me gusta. Podrías hacer un video con recoiljs, me parace más interesante
Claro, voy a crear algún ejemplo
@FaztCode es posible adaptar o implementar Zustand a Angular?
No lo he usado pero he visto que tiene una versión Vanilla que en teoría puede ser integrado con cualquier framework de JavaScript.
@@FaztCode , Muchas gracias. Voy a investigar mas sobre el mismo.
Gracioso que el nombre signifique estado en aleman.
Gracias!!
Excelente video.
Se puede usar en otros proyectos como React native?
Que tema es el de VS?👀
Fazzt opina de jotai para manejo de estados globales, lo estoy usando y se me hizo demasiado sencillo y me va bien en proyectos que voy haciendo, puedes buscarlo como jotai js... porfavor una opinión de esa libreria sea positiva o negativa, si gustas con un video para que el resto pueda saber... eres grande, gracias.
Gracias por la recomendación Anderson, lo voy a revisar :)
gracias
Master 🤯
Tkm Fazt
Por poner un ejemplo: Si en un puesto de trabajo piden como requisito saber Redux, se podria decir que uno sabe lo mismo que Redux pero con otra biblioteca?
No, son totalmente diferentes redux es demasiado complejo muchas action, dispatch y midleware
En el minuto 25:17 creo que te equivocaste por que no funciona como el useState aqui si puedes actualizar solo la propiedad sin tener que mandar el objeto completo ... de nuevo
Ojito se parece a los stores de Svelte
❣
Si quisieras guardar los datos de post en un useState como seria !!?
Este es un ejemplo de Login, donde se envia una peticion POST:
th-cam.com/video/KQbgKizEjxw/w-d-xo.html
@@FaztCode Muchas gracias, por tus videos he aprendido mucho !!
ta bonito se parece mucho a useContext con menos LOC
Podria implementarse zustand en el framenwork Astro !!?
No lo he probado pero supongo que con su versión vanilla es posible, porque en teoría puede funcionar con cualquier código de JavaScript
Será que me puede compartir, el recurso de como tener personalizada la terminar de Windows
Hoal Cristian, es este: th-cam.com/video/d9y0l7yY404/w-d-xo.html
@@FaztCode Muchas gracias
Fazt podrías hacer un mini proyecto de sveltekit y firebase desde el último que subiste an habido algunos cambios, por ejemplo ahora para añadir una page a sveltekit tiene que ser “ +page.svelte” y el layout “ +layout.svelte” lei la documentación y pude entenderla pero no puedo conectarme con los servicios de auth de firebase
Voy a revisarlo, para actualizarlo y agregarle mas funcionalidades, usando Firebase, es buena idea :)
Pero eso es en Sveltekit, svelte no tiene eso.
@@Myglobalsounds ..cierto gracias
es bastante parecido a Pullstate, de echo pullstate es mucho mas facil de utilizarlo y hace lo mismo
Crea uno pero con next 13.4! porfavor
Por que crees que redux es mas popular si zustand es mas fácil?
Tiene muchos mas años de desarrollo, herramientas de debugging, multiples bibliotecas para manejar codigo asincrono y es un ecosistema mas grande para proyectos que esta conformado por multiples desarrolladores
eCommerce con zustand porfavor.
Casi igual a mi nombre ficticio 🤑
Explica los subscribe 😢
Primero, grande fazt
redux me da asco, zustand me hace querer programar frontend
Siempre odie react por su complejidad con redux, pero ahora con zustand ha cambiado el panorama empieza a llamarme. De nuevo usar react