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 — fundamentally different from React's component lifecycle, which mounts and unmounts freely
• Without a shared abstraction, every Flow Build client project would reimplement broker connection, subscription management, and Redux state wiring independently
• 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