Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
June 9, 2022 03:01 am GMT

Qu es XState y por qu usar mquinas de estado?

Una de las bibliotecas clave que utilizo actualmente en mis desarrollos es XState. En esta pequea publicacin, Quiero mostrarte por qu, sinceramente, es uno de los descubrimientos ms importantes que he hecho recientemente sobre programacin y por qu te recomiendo que lo implementes.

Qu es XState?

XState es una biblioteca para crear, interpretar y ejecutar mquinas de estado finito y diagramas de estado, as como para administrar las invocaciones de esas mquinas como actores.

Sinceramente tom esta definicin del sitio oficial, pero no se preocupe si no esta familiarizado con los conceptos de mquinas de estado y estados finitos, parecen complejos pero en realidad no lo son.

Si crees que necesitas ampliar tus conocimientos al respecto, en la documentacin puedes encontrar los conceptos, pero en resumen, xstate te ayuda a definir de forma declarativa toda tu lgica de negocio de tus aplicaciones, facilitando su interceptacin, interaccin y respuesta con una gran confianza.

Por qu mquinas de estado?

Mquinas de estado: Una mquina de estados finitos es un modelo matemtico de computacin que describe el comportamiento de un sistema que puede estar en un solo estado en un momento dado. Por ejemplo, supongamos que puede estar representado por una mquina de estado con un nmero finito (2) de estados: dormido o despierto. En un momento dado, ests dormido o despierto. Es imposible que ests dormido y despierto al mismo tiempo, y es imposible que no ests ni dormido ni despierto.

En realidad, una mquina de estado es un modelo explcito a lo largo del tiempo de su estado, por lo que le ayuda a definir su lgica de negocio de una manera ms concisa, tambin le ayuda a comunicarse mejor con UI/UX y otros compaeros de equipo que no son desarrolladores, lo que hace que su producto sea ms robusto y preparado para el futuro. Creo que lo hace atractivo para m y darle una oportunidad.

Visualizador y un ejemplo

Una gran ventaja de xstate es que tiene un visor fantstico en lnea y en editores de texto, lo que le permite ver su grfico de estado en su totalidad.

as que digamos que tenemos una solicitud para recuperar datos de una API, que representaramos de la siguiente manera.

Los estados que asignamos a nuestra mquina son:

  • idle: Es el inicio y es por defecto cuando arrancamos nuestra mquina.
  • loading: Este estado nos ayudara a saber que la llamada a la api ha iniciado y esta en proceso de ser resuelta.
  • failure: Nos ayudar a saber si la llamada no tuvo xito.
  • loaded: Si la llamada es exitosa, pasaremos a este estado y nuestra mquina terminar, ya que es un estado de tipo final.

Los eventos que tendr nuestra mquina son:

  • FETCH: Nos ayudar a pasar del estado de idle al loading
  • FETCH_CANCEL: Nos llevar de vuelta al estado idle
  • FETCH_RETRY: Nos ayudar a volver al estado loading cuando estamos en un estado failure, un modo de reintento al llamar a la API.
  • FETCH_SUCCESS: Pasar del estado de loading al estado loaded, como una forma de terminar la mquina con xito.
  • FETCH_ERROR: Pasar del estado de loading al estado failure, esto sucede si hay un error en la llamada a la API.

Image description

En la prxima iteracin, ver cmo pas del estado idle, con el evento FETCH al estado loading

FETCH

En el estado en que se encuentra la mquina loading, entonces nos habilita 3 eventos que son FETCH_CANCEL, FETCH_SUCCESS, FETCH_ERROR

En este ejemplo simularemos que nuestro usuario quiere cancelar la llamada lo cual nos apoyar desde el evento FETCH_CANCEL, lo que el evento nos va a llevar del estado loading al estado idle y habilitar el evento nuevamente FETCH, esto para que pueda realizar el flujo de nuevo.
Image description
para simular una llamada a la api no es exitosa nos ayudar el evento FETCH_ERROR, nos va a llevar del estado loading al estado failure, con ayuda del evento FETCH_ERROR. y nos habilitar el evento FETCH_RETRY para poder hacer un reintento.
FETCH_ERROR
as que ahora estamos en un estado de failure y con el evento FETCH_RETRY vamos a regresar al estado loading para poder hacer un reintento.
Image description
Con todos los estados expuestos en este momento, es hora de ver cmo llegamos al estado de loaded, nos apoyamos el evento FETCH_SUCCESS, y esto termina el flujo del estado de la mquina.
FETCH_SUCCESS

Coclucion

Realmente creo que una de las razones por las que las mquinas de estados finitos se han vuelto tan populares es porque tener que escribir explcitamente todo tu estado te ayuda a pensar en un caos ms extremo y probablemente a descubrir algunos errores que te perdiste en alguna parte.


Original Link: https://dev.to/wootsbot/que-es-xstate-y-por-que-usar-maquinas-de-estado-10bl

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To