React MQTT Workflow Manager

React MQTT Workflow Manager is a React component library designed to wrap all the MQTT sub-logic behind the scenes and must be used to work with Workflow API Layer. It only deals with events, not commands. The manager communicates with your broker to dispatch actions in your front-end application.

Table of contents

• Installation
• Dependencies
• Usage
• Example of usage
• Properties
• WorkflowManagerConfig
• Hooks
• Running locally
• Authors
• License

Installation

npm install @flowbuild/react-mqtt-workflow-manager --save

or

yarn add @flowbuild/react-mqtt-workflow-manager

Dependencies

The WorkflowManager component peer depends on the React and React DOM in version 18.

npm i react@18 react-dom@18

Usage

1. Before using the component, set the store with WorkflowManagerConfig.setStore.

// App.tsx

import * as React from 'react';

import { WorkflowManagerConfig } from '@flowbuild/react-mqtt-workflow-manager';

import { store } from './store'; // Your redux store


WorkflowManagerConfig.setStore(store);

// ...

2. Wrap your application with WorkflowManager.

// App.tsx

import * as React from 'react';

import { Provider } from 'react-redux';
import { WorkflowManager, WorkflowManagerConfig } from '@flowbuild/react-mqtt-workflow-manager';

import { store } from './store'; // Your redux store


WorkflowManagerConfig.setStore(store);

export const App: React.FC = () => {
  return (
    <Provider store={store}>
      <WorkflowManager
        brokerUrl="ws://broker.mqttdashboard.com:8000/mqtt"
        options={{
          clientId: `clientId-${Math.random().toString(36).substring(2, 9)}`,
          keepalive: 60,
        }}
      >
        {/* Your child component here */}
      </WorkflowManager>
    </Provider>
  );
};

3. Lastly, set workflowManagerReducer on your store reducers.

import { configureStore, createSlice } from '@reduxjs/toolkit';

import { workflowManagerReducer, WorkflowManagerConfig } from '@flowbuild/react-mqtt-workflow-manager';

const myAppSlice = createSlice({
  name: '@myApp',
  ...
});

export const store = configureStore({
  reducer: { myApp: myAppSlice.reducer, workflowManagerReducer },
});

Example of usage

A complete example of how to use it can be found here.

Properties

Property	Type	Required	Description
brokerUrl	string	true	URL to connect to broker. Use full URL like wss://...
options	IClientOptions	false	MQTT client options. See options config here.

WorkflowManagerConfig

The library also provides methods and utilities for your commodity. They can be used outside the context of react components.

setStore(store)

The library uses your redux store to dispatch actions. This is used to control and dispatch internal actions for your application.

getMqttClient()

A utility method that can be used outside the context of react components. Be careful; the method must be able to return null if an error occurs when setting connect. See client config here.

subscribe(topic/topic array/topic object, [options])

Works exactly like mqtt#subscribe, but the library implements validations and internal rules.

subscribe(topic/topic array/topic object, [options])

Works exactly like mqtt#unsubscribe, but the library implements validations and internal rules.

Hooks

Some hooks are exported for commodity.

useMqtt()

The hook returns a object contaning client, status and error.

Property	Type	Default value	Description
client	MqttClient	null	See client here.
status	string	offline	connecting, connected, disconnected, reconnecting, offline or error.
error	Error	null

useSubscribe()

Returns WorkflowManagerConfig.subscribe for your commodity.

useUnsubscribe()

Returns WorkflowManagerConfig.unsubscribe for your commodity.

Running locally

Clone the project

git clone https://github.com/flow-build/react-mqtt-workflow-manager.git

Go to the project directory

cd react-mqtt-workflow-manager

Install dependencies

npm install

Start the development server

npm run dev

Go to the project example directory

cd app

Install de example dependencies

npm install

Start the example application

npm run start

Authors

@wallace-sf

License

MIT