React MQTT Workflow Manager
Open SourceBiblioteca React de código abierto construida para el ecosistema Flow Build — encapsula 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 — fundamentalmente distintas del 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 desde cero 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