Gestión del Estado en React con Valtio

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

mutación del objeto, y eso es todo. Así es literalmente cómo cambias tu state management, tus valores de estado en tu estado. El proxy en sí rastrea los cambios, y todo el objeto, así como todos los objetos proxy anidados. Se agrupan varios cambios, y si el valor del cambio es el mismo, no vuelve a renderizar el componente. No cambia esas cosas. Solo cambiará si el valor es realmente diferente. Ahora, así es como cambias los data. Así es como lees los data. Básicamente, lees los data dentro de tus componentes usando instantáneas, y puedes usar el hook de instantánea o como se mostró anteriormente en la otra diapositiva, puedes usar la parte de instantánea de JavaScript de Valtio. Y básicamente aquí, como puedes ver en mi componente de perfil de usuario, tengo tu instantánea, AuthState.user, y mi div está usando el snap.name, que es de este objeto que puedes ver, estoy accediendo al state.name de la persona. Ahora, la parte realmente genial de esto es que Valtio realmente envuelve la instantánea para acceder al seguimiento de los cambios del proxy y solo vuelve a renderizar tu componente cuando cambia una clave específica. Así que no importará si cambió el estado de AuthState o a menos que yo específicamente lo pida para que lo mire. No importará si cambió el rol de la persona incluso, a menos que específicamente la parte de snap.name esté cambiando. Esa es la clave. Lo siento, en realidad importará, que el rol cambió, porque estamos mirando la instantánea aquí diciendo AuthState.user. Así que básicamente la parte del usuario aquí en todos los cambios, es cuando este componente entero se vuelve a renderizar. De lo contrario, si tenemos otra información en AuthState, como no sé, tokens o algo más, no lo mirará a menos que específicamente digas míralo. Esto significa que no tienes que preocuparte por cómo se vuelve a renderizar todo tu componente cuando cambian todas las cosas del contexto. Ese es uno de los problemas con useContext, que de alguna manera se va

contigo. Ahora, hay un problema que debemos tener en cuenta. No reasignes tu proxy a un objeto completamente nuevo. Así que Valtio también tiene una función de suscripción que te permite suscribirte a los cambios en el proxy. Por lo general, para la mayoría de los componentes, puedes utilizar la instantánea para disparar el componente para volver a renderizar. En algunos casos raros, quieres mirar el cambio del proxy directamente, como en la mutación directa de ese proxy. Entonces puedes usar la suscripción. Aquí, puedes ver que tengo mi estado de proxy, y tiene proxy username igual a Timo, y me estoy suscribiendo a él, pero entonces hay este nuevo objeto. Básicamente he dicho que el estado se redefine como un nuevo objeto ahora, que es username Nina. He eliminado completamente el proxy aquí, y al asignar el estado a un objeto completamente nuevo, la suscripción no funcionará en absoluto. Así que en su lugar, deberías hacer una mutación directa aquí, state.user.name. Entonces el suscriptor realmente podrá rastrear ese cambio de proxy y decir, hey, tu estado se actualizó y cambia todo lo demás que sea necesario en consecuencia. Así que una cosa más genial antes de irme. Funciona con Redux DevTools, lo cual encuentro realmente impresionante. Esto es literalmente el código básico para eso. Eso es todo. Solo configuras tu estado. Luego lo configuras con DevTools. Puedes importar DevTools desde Valtier Utils y luego configurarlo para que sea el nombre del estado y habilitar true, y entonces es Redux DevTools. Y ahora puedes usar state management en cualquier aplicación que quieras sin añadir nada extra. Estos son algunos enlaces y tutoriales realmente geniales incluso sobre Valtier y cómo usarlo. Sus documentos y su perfil de GitHub aquí o su repositorio de GitHub es realmente, realmente genial. Recomiendo mucho sus documentos, realmente me encantan. Eso es todo lo que tengo para ustedes. Gracias.