React MQTT Workflow Manager
Open SourceBiblioteca React de código abierto construida para el ecosistema Flow Build, encapsulando suscripciones de eventos MQTT en una API basada en hooks publicada en npm.
- TypeScript
- React
Flow Build es un motor de flujos de trabajo de código abierto basado en JSON, creado por FDTE (Fundação para o Desenvolvimento Tecnológico da Engenharia), una fundación de ingeniería de São Paulo. Las aplicaciones React que participan en un workflow de Flow Build (un formulario de múltiples pasos, un proceso de aprobación, cualquier secuencia orientada a eventos) deben suscribirse a los eventos que el motor publica en un broker MQTT. @flowbuild/react-mqtt-workflow-manager empaqueta toda esa lógica de integración en una biblioteca reutilizable para que cualquier proyecto cliente del ecosistema pueda conectarse sin reimplementarla.
Las Restricciones
Las conexiones MQTT son stateful y de larga duración, lo que choca con el ciclo de vida de los componentes React, que montan y desmontan libremente. Sin una abstracción compartida, cada proyecto cliente de Flow Build reimplementaría por su cuenta la conexión al broker, la gestión de suscripciones y la integración con Redux.
- El estado de Redux debía ser inyectable antes de que el árbol React se monte, requiriendo un puente entre la configuración imperativa y el renderizado declarativo
La Biblioteca
Construida y publicada en npm como el único punto de integración MQTT para frontends React en el ecosistema Flow Build:
WorkflowManager: provider de contexto que gestiona el ciclo de vida de la conexión al broker y envuelve la aplicaciónWorkflowManagerConfig: clase utilitaria estática para uso fuera del ámbito de los componentes:setStore,subscribe,unsubscribeuseMqtt(): devuelve{ client, status, error }para visibilidad de la conexión dentro de los componentesuseSubscribe()/useUnsubscribe(): hooks que exponen la gestión de suscripciones de tópicos siguiendo los idiomas de React
Tecnologías
- TypeScript: cobertura completa de tipos, incluyendo opciones del cliente MQTT y formas de retorno de los hooks
- React 18 + Context API: patrón provider para la gestión del ciclo de vida de la conexión
- MQTT.js: cliente de broker WebSocket/WSS subyacente
- Redux Toolkit: slice
workflowManagerReducercompartido en toda la aplicación anfitriona