Logo
Voltar
Logo do React e logo do MQTT lado a lado: biblioteca React MQTT Workflow Manager

React MQTT Workflow Manager

Open Source

Biblioteca React open-source construída para o ecossistema Flow Build, encapsulando assinaturas de eventos MQTT em uma API baseada em hooks publicada no npm.

  • TypeScript
  • React

Flow Build é um motor de workflows de código aberto baseado em JSON, criado pela FDTE (Fundação para o Desenvolvimento Tecnológico da Engenharia), uma fundação de engenharia de São Paulo. Aplicações React que participam de um workflow do Flow Build (um formulário multi-step, um processo de aprovação, qualquer sequência orientada a eventos) precisam assinar eventos que o motor publica em um broker MQTT. O @flowbuild/react-mqtt-workflow-manager empacota toda essa lógica de integração em uma biblioteca reutilizável para que qualquer projeto cliente do ecossistema possa se conectar sem reimplementá-la.

As Restrições

Conexões MQTT são stateful e de longa duração, o que fica em atrito com o ciclo de vida de componentes React, que montam e desmontam livremente. Sem uma abstração compartilhada, cada projeto cliente do Flow Build reimplementaria por conta própria a conexão ao broker, o gerenciamento de assinaturas e a integração com Redux.

  • O estado do Redux precisava ser injetável antes da árvore React montar, exigindo uma ponte entre configuração imperativa e renderização declarativa

A Biblioteca

Construída e publicada no npm como o único ponto de integração MQTT para frontends React no ecossistema Flow Build:

  • WorkflowManager: provider de contexto que gerencia o ciclo de vida da conexão ao broker e envolve a aplicação
  • WorkflowManagerConfig: classe utilitária estática para uso fora do escopo de componentes: setStore, subscribe, unsubscribe
  • useMqtt(): retorna { client, status, error } para visibilidade da conexão dentro de componentes
  • useSubscribe() / useUnsubscribe(): hooks que expõem o gerenciamento de assinaturas de tópicos seguindo os idiomas do React

Tecnologias

  • TypeScript: cobertura completa de tipos, incluindo opções do cliente MQTT e formatos de retorno dos hooks
  • React 18 + Context API: padrão provider para gerenciamento do ciclo de vida da conexão
  • MQTT.js: cliente de broker WebSocket/WSS subjacente
  • Redux Toolkit: slice workflowManagerReducer compartilhado em toda a aplicação hospedeira