COCHES CON ESTADOS TERMINOS CON @WordPress/Data y TypeScript

Supongamos que queremos diseñar una pantalla de conexión en nuestra aplicación. Cuando el usuario lo ve por primera vez, hay una forma vacía. El usuario completa los campos y, una vez que estén configurados, presione el botón de autenticación para validar las credenciales y, bueno, autenticarse. Si la validación tiene éxito, va a la siguiente pantalla. Pero si no, se les presenta un mensaje de error y se les pide que vuelvan a intentarlo. Si implementara el estado de dicha pantalla y lea mis publicaciones sobre cómo definir el estado de una aplicación con typescities y @wordpress/date, apuesto a que haría algo como esto:
Type state = {readonly username: string; Readonly contraseña: cadena; Readonly isloggingin: boolean; Readonly errorMessage: string; }; ¿Quién tiene todas las áreas necesarias para administrar el estado, pero … es lo mejor que podemos hacer? Las máquinas con estados terminados Un automóvil con estados terminados (FSM) es, en general, un modelo matemático que nos permite definir un conjunto finito de estados y posibles transiciones entre ellos. (Más información sobre Wikipedia). Me gusta esta abstracción porque se ajusta perfectamente a nuestras necesidades cuando se trata de modelar nuestras aplicaciones. Por ejemplo, el diagrama de estado para nuestra pantalla de inicio de sesión podría verse así:

El diagrama de estado de un formulario de conexión.
Lo que, como puede ver, sorprende el comportamiento que queremos implementar de una manera clara y concisa. Definición de estados con @WordPress/Date En nuestra serie introductoria en el React, vimos cómo usar el paquete @WordPress/Date para crear y administrar el estado de nuestra aplicación. Hicimos esto definiendo los componentes principales de nuestro depósito de datos: un conjunto de selectores para interrogar el estado
Un conjunto de acciones para activar una solicitud de actualización
Una función de descuento para actualizar el estado, dada la condición actual y una acción de actualización
Esencialmente, las tiendas en @WordPress/Data ya se comportan como automóviles con estados terminados, porque la función de la reducción de la “transición” de un estado a otro utilizando una acción:
(Estado: estado, acción: acción) => establece cómo definir un automóvil con estados finitos con mecanografiado en @wordpress/date parece que @wordpress/data está bastante cerca del modelo FSM que he introducido algunas filas más: nosotros Solo carecen de los estados específicos en los que podemos averiguarlo y las transiciones entre ellos … así, para ver más de cerca cómo podemos solucionar estos problemas, paso a un paso. Estados explícitos Comencé esta publicación mostrando una posible implementación de la condición de nuestra aplicación. Nuestra primera propuesta fueron muchos atributos que hicieron el trabajo, pero no parecía un automóvil con estados terminados. Entonces, comencemos por garantizar que nuestros estados estén explícitamente definidos en nuestro modelo:
Estado de tipo = | Forma | Loggingin | Éxito | Error; Type form = {readonly status: ‘form’; Readonly Nombre de usuario: cadena; Readonly contraseña: cadena; }; Type logGingIn = {readonly status: ‘loging-in’; Readonly Nombre de usuario: cadena; Readonly contraseña: cadena; }; Type Success = {Readonly Status: ‘Success’; // …}; Tipo de error = {Estado de readonly: ‘Error’; Mensaje de lectura: cadena; }; Bastante obviamente, ¿verdad? Hay un tipo para cada estado, y el estado general de la aplicación se define como un sindicato discriminado por los tipos. Se llama esto porque (a) el estado es la “unión de diferentes tipos” (es decir, es forma o loggingin, o es cualquier cosa) y (b) tenemos un atributo (en este caso) que nos permite para discriminar la condición específica que tenemos en cada momento. Creo que esta solución es mucho mejor que la que tenía al principio. En nuestra solución inicial, pudimos definir “estados no válidos”, porque podría conectarse (solo configurar isloggingin en verdadero) y al mismo tiempo estar en un estado de error (solo establezca errorgesage en otro valor que el vacío). cuerda). ¡Pero esto claramente no tiene sentido! ¿Cuál es? ¿Nos conectamos o deberíamos mostrar un error? La nueva solución, por otro lado, es mucho más precisa cuando se trata de representación estatal: hace que los estados “imposibles” de los “inválidos”. Si estamos en LoggingIn, no hay forma de configurar un mensaje de error (¡no hay atributo para ello!). Si mostramos un error, no puede iniciar sesión. Mucho mejor, ¿no te parece?
Acciones en @WordPress/Date, Acciones actualizan la tienda en nuestro estado.Debido a que modelamos nuestra condición como FSM, nuestras acciones serán las flechas en nuestro diagrama original.Todo lo que tiene que hacer es modelarlos como un sindicato discriminado por los tipos (por convención, el discriminador generalmente se llama tipo) y está listo: tipo setCredentials = {readonly type: ‘set_credentials’;Readonly Nombre de usuario: cadena;Readonly contraseña: cadena;};Escriba login = {readonly type: ‘login’;};Escriba showApp = {readonly type: ‘show_app’;// …};Type showerRor = {readonly type: ‘show_error’;Mensaje de lectura: cadena;};Type backtologinForm = {readonly type: ‘back_to_login_form’;};Nuestras acciones deberían representar las flechas que tuvimos en nuestro diagrama original, ¿verdad?Bueno, no sé sobre ti, ¡pero creo que este tipo de acciones no se ven como flechas!Las flechas tienen una dirección (pasar de un estado a otro);Las acciones no lo hacen.
Necesitamos una forma de aclarar en nuestro código que ciertas acciones son útiles solo para moverse de un estado a otro. Y hasta ahora, la mejor solución que encontré es usar el reductor en sí mismo: Reductor de funciones (estado: estado, acción: acción): state {switch (state.status) {case ‘form’: switch (acción. Tipo) {casas ‘ set_credentials ‘: return {status:’ Ready ‘, UserName: Action.Username, Password: Action.password,}; Case ‘login’: return {… estados, estado: ‘iniciar sesión’}; } Casas …: …} estados de retorno; } Si nuestro reductor comienza por el estado de estado del filtro, conocemos la “fuente” de nuestras flechas. Luego miramos la acción actual y, si es una “flecha hacia afuera”, generamos la nueva condición de “objetivo”. Vea claramente cómo funciona esto en el fragmento anterior. Si el estado actual es el formulario, la acción set_credentials nos lleva al mismo estado en el que estamos (actualizando credenciales, espíritu) y la acción de inicio de sesión cambia el estado en el inicio de sesión. Se ignora cualquier otra acción en este estado y, por lo tanto, la condición no cambia. Todo es bueno y perfecto, pero … no sé, no me gusta tanto el código, ¿verdad? Quiero asegurarme de que mi código sea claro, conciso, explícita y seguro. ¿Podemos hacer eso? El reductor fuertemente escrito para remediar la miseria en la que acabamos de ingresar, solo tenemos que restaurar nuestra reducción, para que cada estado posible de nuestro FSM tenga su propio reductor. Si hacemos esto correctamente, se escribirán fuertemente y estará claro lo que está permitido y lo que no.
Comencemos creando un chico para cada condición en nuestra aplicación.Cada tipo agrupará las acciones que nos pueden llevar del estado dado en otro lugar.Por ejemplo, nuestra condición de formulario tiene dos flechas hacia afuera (establece concreediales e inicio de sesión), así que creemos el tipo de formación con la unión de las dos acciones.Repita el proceso para cada condición y obtendrá esto: type formation = sets concreedentials |Iniciar sesión;Escriba loggingInction = ducha de ducha |Showapp;Escriba sucesión = …;Tipo ErrorAmion = backtologinform;Tipo de acción = |Formación |LoggingIntion |Sucesión |Erroracion;Luego defina todos los reductores que necesitamos.De nuevo uno para cada condición:

Función redUform (estado: forma, acción: formación): forma | LogGingIn {switch (action.type) {switch (action.type) {Houses ‘set_credentials’: return {status: ‘listos’, username: action.username, contraseña: action.password,}; Case ‘login’: return {… estados, estado: ‘iniciar sesión’}; }} RededoggingIn: (estados: loggingin, acción: loggingInction) => éxito | Reducción de errores: (Estados: Error, Acción: ErrorAcion) => Formulario Reduasuccess: (Estados: éxito, Acción: Sucesión) => … gracias a TypeScript y los tipos que acabamos de definir, ahora podemos ser extremadamente precisos con respecto al Estado de origen y el conjunto de acciones que cada reductor espera, así como los estados de destino que podemos lograr como resultado. Finalmente, debemos simplemente unir todo con una función de descuento única: reductor de funciones (estado: estado, acción: acción): state {switch (state.status) {case ‘form’: return rediform (estado, acción como formas) ?? estados; Caso ‘iniciar sesión’: Reducción de retorno (estado, acción como inyección de registro) ?? estados; Caso ‘Error’: return reduarror (estado, acción como eroracciones) ?? estados; Caso ‘éxito’: return RedSuccess (estado, acción como exitoso) ?? estados;