0
435
Vistas¿Se permite que las acciones de MobX muestren un cuadro de diálogo de confirmación o naveguen a una nueva pantalla? En términos más generales, ¿pueden las acciones tocar la interfaz de usuario?
Estoy refactorizando MobX en aplicaciones a gran escala . Dado que es grande, hacer que el código sea limpio es muy importante.
Hay una action que hace lo siguiente (simplificado):
@action myAction() { var data = await api.getSomeDataFromServer(); if (data.warnUser) { var userAgrees = await showConfirmDialog('Hey, are you really sure?'); // #1 if (!userAgrees) return; } someOperations(data); Navigator.push('/another_page'); // #2 } Me preocupa si el #1 y #2 están bien o no. La razón es que, en mi humilde opinión, mobx tiene una tríada de UI - action - state (como se ve en la figura a continuación en el libro de mobx). Por lo tanto, Action s debe modificar el State en lugar de la UI de usuario directamente. Pero en #1 , la Action muestra directamente un cuadro de diálogo, que es UI ; en #2 , la Action navega directamente a otra página, que también está relacionada con la interfaz de usuario.
En resumen, ¿pueden las action de MobX "tocar" y manipular directamente las ui ?
He hecho algunas búsquedas sobre esto y ahora estoy bastante confundido. ¡Gracias por cualquier sugerencia!
Observación: lo etiqueto como Flutter y JavaScript, porque de hecho estoy usando Flutter, pero esta pregunta también se aplica a la versión JS de MobX.
Observación: El siguiente es el diagrama del libro mobx.
1 Respuestas
Responde la pregunta0
Una de las principales ventajas de Mobx es que el estado y la interfaz de usuario están completamente desacoplados. Al desacoplar el estado de la interfaz de usuario, sus pruebas serán mucho más fáciles de escribir. El ejemplo que publicaste sería muy difícil de probar.
Tenía proyectos en los que escribiría la lógica de negocios de la aplicación completa sin comenzar a trabajar en la interfaz de usuario, luego simplemente conectaría el estado y los métodos de cambio de estado a la interfaz de usuario.
Además, debido a que Mobx funciona con flutter y Javascript al desacoplar la interfaz de usuario de la administración del estado, puede transferir la lógica comercial completa a Javascript y viceversa. Entonces, para concluir, su código funciona pero no es la forma Mobx :)
Por ejemplo, podría reaccionar mobx para reaccionar 😁 a los cambios de estado.
@action myAction() { // if myAction is a method on JS class this.data = await api.getSomeDataFromServer(); }Luego, en algún lugar de tu código de interfaz de usuario
reaction( () => myClassInstance.data, // when data changes data => { //<- run this function if (data.warnUser) { var userAgrees = await showConfirmDialog(); // #1 if (!userAgrees) return; } someOperations(data); Navigator.push('/another_page'); // #2 } )Espero que esto ayude