Gestión eficiente del estado con Hookstate

lleva la simplicidad a otro nivel. Así que quiero usar esta aplicación para demostrar hook states. Sé que, sé que hacer operaciones es la única forma en que puedo mostrarte cómo crear, leer, actualizar y eliminar de la forma más sencilla en lugar de mostrarte eso con una herramienta de gestión de estado como hook state, por ejemplo. Así que justo en nuestro trabajo podemos completar tareas, eso es actualizar la tarea. También podemos eliminarla y podemos agregar nuevas tareas. Así que hagamos cosas. Y he decidido usar dos componentes diferentes para esta aplicación. Tenemos el componente de tareas pendientes que representa las tareas no completadas, ese es un componente, tenemos otro componente para las tareas completadas. Y estos dos componentes comparten el mismo estado, utilizando hook state para la gestión del estado. Ahora, si volvemos a ID en este momento, estoy en una base de código inicial, lo que significa que aún no estoy usando hook state. Esta tenemos un archivo starter js y luego tenemos tareas dentro de él. ¿Y si la gestión del estado global fuera tan fácil como esto? ¿Y si esto es todo lo que necesitamos hacer para gestionar el estado global, solo tenemos una variable y su nombre es tareas, o cualquier estado que queramos. Y lo exportamos, luego volvemos a diferentes componentes. Y todo lo que tenemos que hacer es importarlo y usarlo. Lo mismo con el componente de tareas no completadas. Esto no es un estado fijo, solo estamos usando variables de JavaScript para exportar e importar. Probablemente hayas usado Redux antes, o la API de contexto de React, o RxJS y todo lo demás. La gestión del estado funciona, es realmente eficiente, la gestión del estado con estas herramientas. Pero es complejo. Es realmente complejo. Y quiero que sea tan fácil como esto. Quería que si quiero agregar una nueva tarea, solo tenga un método como tenemos en la línea 10, como tasks.push. Y luego tengo mi nueva tarea, en lugar de usar rebanadas adicionales, reductores, acciones y todo lo demás o el operador de propagación teniendo un estado anterior y luego el siguiente estado.

y todo eso. ¿Puedo simplemente hacer tasks.push y tener mi nueva tarea? Por eso amo HookState. Ahora volvamos a la rama principal donde tengo, debería ser esto, donde tengo la implementación de HookState. Esta es una aplicación construida con HookState. Y en el archivo store.js, así es como estamos usando HookState para crear un estado global.

Tenemos store y eso es igual al método createState de add HookState/core. Así que quieres instalar hookstate, eso es npm install/core, o yarn add HookState/core. Y por qué tenemos /core en este momento es porque HookState, recuerda que dije que es muy extensible. Así que también tenemos hookstate/persistence, que nos ayuda a persistir estados en el almacenamiento local del navegador. ¿Qué tan genial es eso? Pero lo que necesitamos ahora es HookState/core. Y el método createState de HookState/core. Esto es todo lo que tenemos que hacer para crear un estado global. Y tenemos tasks dentro del objeto para los métodos de createState. Así que por qué uso un objeto es porque en realidad quiero agregar otras cosas, digamos esto es un almacén global. Y quiero agregar otras cosas como algo más. Y este es mi nuevo estado en este momento, este es mi nuevo estado que puedo, cualquier método, HookState hace disponible para store, que contiene todos los demás estados, también está disponible para tasks y para algo más. Así que si vamos al archivo Apple GS, estamos agregando una nueva tarea y en la línea 12. Es así de simple. Así que no les dije chicos, tenemos tasks.merge y una nueva tarea. Eso es todo por ahora en la línea siete, estamos usando el gancho useStates de HookState para obtener el valor de tasks. Así que queremos usar tasks desde un almacén global, tenemos const y luego destructuramos directamente podemos decidir decir que esto es constate es igual a use stage y luego destruir la importación de ./store y luego decidimos hacer store.tasks. Sí, pero lo que decidimos hacer es destructurarlo realmente y luego aquí tenemos tasks y podemos usar eso. Ahora en HookState para obtener el valor de un estado, necesitamos el método get. Así que aquí tenemos el valor de entrada que obtiene y obtiene el valor de este estado local y crea en la línea ocho, podemos crear estados globales, podemos crear estados locales y crear el estado para el valor de entrada. Y simplemente hago eso directamente con el gancho useStates. No necesito el método createState para esto. Quería que fuera un estado global. Uso el método createState. Uso el gancho useDate y luego tengo mi estado local y el valor de entrada que obtiene el valor de mi estado local. Y puedes ver aquí en la línea 27, donde estoy

estableciendo el valor del valor de entrada para que sea lo que sea que use ese tipo dentro del campo de entrada. Y estoy usando el valor de entrada para establecer. Eso es todo lo que tengo que hacer. Y tenemos el componente completado y no completamente un componente. Ambos usan store. Y todo lo que tenemos que hacer es importar store desde ../store, que es el archivo store.js. Y en la línea cinco, tenemos tasks desde store. Y luego, para las tareas completadas, lo que estamos haciendo en este caso es usar tasks para obtener todas las tareas y luego usar el método filter para obtener solo las tareas completadas. Probablemente haya una forma más sencilla de hacer esto. Pero quiero mostrarte cómo trabajar. Estoy trabajando con dos componentes diferentes y usando eso para acceder a un store. Y para eliminar una tarea, estamos usando hook state para eliminar la tarea, usando el método splice de tasks para obtener la tarea que queremos eliminar. Así es como obtenemos el índice de la tarea en la línea nueve, tenemos tasks.indexOf(task). Esto es un método de JavaScript. Entonces, indexOf(task). Y esta es la tarea que vamos a obtener del argumento de la función removeTask cuando la llamamos aquí en la línea 21. Entonces, removeTask y tasks. Esta es una tarea en particular que cuando la eliminamos obtenemos su índice, usamos el método splice de tasks para establecer el valor de esa tarea en ninguno, así es como eliminamos algo en hook state, usamos el valor no de hook state/core. Entonces llamamos al método set y su argumento es ninguno. Si quieres establecer esto en algo más, digamos, hey, este será el nuevo valor de esa tarea en particular, queremos eliminar la tarea, y tenemos ninguno. Y eso es todo. Así es como uso hook state para acceder a un store, obtenemos todas las tareas. Y luego usamos el método get para obtener el valor de la tarea. Ahora estamos filtrando para obtener las tareas completadas. Para actualizar una tarea, tenemos el método set, y luego ese será el nuevo valor. Ahora, para eliminar una tarea, tenemos el valor no de hook state/core. Y eso es lo que vamos a hacer para usar hook state para la gestión del estado. Tengo un tutorial más largo sobre hook state en mi canal de YouTube. Así que sí, puedes echarle un vistazo si quieres ver más sobre hook state, si quieres algo más.

Para obtener más información, tengo un tutorial más extenso. También tengo un artículo sobre el tema en hook state. Así que hazme un favor y echa un vistazo a mi canal de YouTube. Tengo otros tutoriales sobre la gestión del estado en React. Y también búscame en LinkedIn, GitHub y Twitter, encontrarás los diversos artículos que he escrito en mi perfil de GitHub. Entonces, ve a github.com/evidence. Tengo un enlace allí a todos mis artículos.

Ha sido agradable. Y eso es todo, demostrando el estado para una gestión eficiente del estado en aplicaciones de React. Por favor, echa un vistazo a hook state. Es un trabajo realmente bueno que está haciendo el equipo detrás de él, es rápido, eficiente, lo he usado y funciona. Ha funcionado bien para mí. Bien, eso es todo, nos vemos la próxima vez. Adiós.