React MQTT Workflow Manager

Flow Build is an open-source JSON-based workflow engine created by FDTE (Fundação para o Desenvolvimento Tecnológico da Engenharia), a São Paulo engineering foundation. React applications that participate in a Flow Build workflow (a multi-step form, an approval process, any event-driven sequence) must subscribe to events the engine publishes on an MQTT broker. @flowbuild/react-mqtt-workflow-manager packages all that integration logic into a single reusable library so any client project in the ecosystem can connect without reimplementing it from scratch.

The Constraints

MQTT connections are stateful and long-lived, which sits awkwardly against React's component lifecycle of mounting and unmounting freely. Without a shared abstraction, every Flow Build client project would reimplement broker connection, subscription management, and Redux state wiring on its own.

• Redux state had to be injectable before the React tree mounts, requiring a bridge between imperative configuration and declarative rendering

The Library

Built and published to npm as the single MQTT integration point for React frontends in the Flow Build ecosystem:

• WorkflowManager: context provider that owns the broker connection lifecycle and wraps the application
• WorkflowManagerConfig: static utility class for use outside component scope: setStore, subscribe, unsubscribe
• useMqtt(): returns { client, status, error } for connection awareness inside components
• useSubscribe() / useUnsubscribe(): hooks that expose topic subscription management following React idioms

Technologies

• TypeScript: full type coverage including MQTT client options and hook return shapes
• React 18 + Context API: provider pattern for connection lifecycle management
• MQTT.js: underlying WebSocket/WSS broker client
• Redux Toolkit: workflowManagerReducer slice shared across the host application