Entonces, esta es una presentación realmente corta sobre VALTEO, que técnicamente es un estado global pero la parte realmente maravillosa de esto es que puedes tratarlo como una micro-gestión de estado, lo que significa que solo usas lo que necesitas y no tienes que cambiar todo tu paradigma. Entonces, un poco sobre mí. Mi nombre es Nia, vivo en Toronto, solía vivir en Atlanta en los Estados Unidos y ahora trabajo para una empresa que se llama Healthy y hacen telemedicina y están basados en Nueva York. Entonces, viajo por todos lados. Y trabajo como líder técnico de front-end y arquitecto.
Entonces, Valtio es más o menos cómo hemos introducido la gestión de estado a nuestra aplicación heredada también. Entonces, ¿qué es Valtio, verdad? Aquí tengo el enlace a GitHub de Valtio también, así que si estás interesado, eso es realmente genial. Pero la mejor parte de Valtio es que es un sistema de gestión de estado basado en proxies. Utiliza la idea nativa de proxies de JavaScript para crear un estado observable. Es un estado inmutable. Entonces, te permite actualizar el estado básicamente como actualizarías un objeto, pero cuando el estado cambia, todo se registra y se crean nuevos objetos de estado en lugar de modificar los existentes, ¿verdad? Y la mejor parte de esto es que en general hay una mínima plantilla. Entonces, incluso con Redux o todos los demás, como, son geniales a su manera, pero hay tanta configuración, y especialmente si estás trabajando en aplicaciones React realmente antiguas donde todavía hay muchos componentes de clase, es súper fácil. No hay muchas cosas que, como, configurar y simplemente comienza a funcionar. Pero vamos a profundizar en el concepto de proxies de JavaScript. Fue introducido en ES6, y al menos la forma en que lo he pensado, y me ha ayudado a entender es que es como un escudo alrededor de tu objeto. Protege tu objeto. Básicamente, cambia lo que ves cuando miras el objeto, las propiedades o los valores, por ejemplo, y puedes hacer que el objeto se vea diferente, añadir información extra o incluso ocultar ciertas partes. La otra parte que es realmente genial es que ahora también puedes pasar funciones de controlador y controlar lo que sucede cuando intentas hacer cosas con el objeto, como cambiar una propiedad, leer una propiedad, o llamar a una función, ¿verdad? Así que puedes añadir reglas y controles y balances a ello, por lo que protege tu objeto mientras intentas cambiarlo. Puedes leer más sobre ello aquí también, en este pequeño enlace. Así que aquí, ese mismo código, lo que quería mostrarte aquí es que he configurado mi objeto objetivo, tengo una función de controlador, y lo he configurado dentro de mi proxy, y lo que hay que notar aquí es que el mensaje dos aquí dice everyone. Normalmente, cuando haces target.message dos, obtendrías everyone como respuesta, pero como pasa por mi proxy, cuando hago proxy.message dos, en realidad voy a obtener world en lugar de everyone, porque de cómo el proxy establece aquí, la función de controlador, establece que si la propiedad es igual a message devuelve world. Así que aunque target.message dos es everyone, el proxy lo protege y dice proxy.message dos, que está tomando target aquí, devolverá world. Así que esto es más o menos la base de cómo funciona Valteo, pero toda esta plantilla aquí, ellos la han hecho mucho más simple para nosotros. Veamos cómo se ve. Bueno, antes de eso, por qué esto importa es que esto funciona con componentes de clase. Sé que con muchas cosas de Redux o incluso React query, todo el mundo está en hooks, pero si todavía estás en aplicaciones grandes heredadas o estás transfiriendo y estás tratando de manejar la deuda técnica, esta es una gran manera de tratar de encontrar un equilibrio entre los dos mientras estás en transición, pero todavía obtienes aspectos de la gestión de estado global en un componente de clase o en componentes de JavaScript puro y todavía puedes avanzar. Entonces, veamos cómo es la implementación de React. Uno, aquí puedes ver, es solo importar proxy, y Valtio ha configurado toda esa plantilla para tu parte de proxy, así que no tienes que hacer ninguno de ese trabajo. Tengo mi proxy de estado de persona aquí, y mi estado de autenticación, que tiene un proxy anidado, que es el estado de la persona del usuario, ¿verdad? Entonces, la forma en que lo mutaría o lo accedería, como está establecido aquí, es auth state.userDate.name equals Nina, ¿verdad? Eso es un
Comments