reactjs – does anyone know how to integrate mqtt integration in react using react redux to dispatch the actions and store client payload as a mqttClient object?

Basically i wanted to integrate the mqtt in my react app. I want to connect to the mqtt when user login and disconnect when user logs out.

Firstly i created actions,reducers to dispatch the connection state and get client payload. It’s connecting but the mqtt servers seems to be reconnecting in a loop with few secs. I want it to connect once and disconnect user logs out automatically. I globally initiated the mqtt client in the mqqtActions.js.

import { CONNECT_MQTT_FAILURE, CONNECT_MQTT_REQUEST, CONNECT_MQTT_SUCCESS, DISCONNECT_MQTT_FAILURE, DISCONNECT_MQTT_REQUEST, DISCONNECT_MQTT_SUCCESS } from "../constants/mqttConstants"

import mqtt from 'mqtt'
const mqttHost = "host ip address here";
const mqttPort = 8083;
const mqttUrl = `ws://${mqttHost}:${mqttPort}/mqtt`
const mqttOptions = {
    keepalive: 30,
    protocolId: 'MQTT',
    protocolVersion: 4,
    clean: true,
    reconnectPeriod: 1000,
    connectTimeout: 30 * 1000,
    clientId: "bharath",
    will: {
        topic: 'WillMsg',
        payload: 'Connection Closed abnormally..!',
        qos: 0,
        retain: false
    },
    rejectUnauthorized: false
};

const mqttClient = mqtt.connect(mqttUrl, mqttOptions)
export const mqttConnect = () => async (dispatch) => {
    try {
        dispatch({
            type: CONNECT_MQTT_REQUEST
        })
        dispatch({
            type: CONNECT_MQTT_SUCCESS,
            payload: mqttClient
        })
        //mqttClient.connect()
        localStorage.setItem('mqttClient', JSON.stringify(mqttClient))

    } catch (error) {
        dispatch({
            type: CONNECT_MQTT_FAILURE,
            payload: error.response && error.response.data.message ? error.response.data.message : error.message
        })

    }
}

export const mqttDisconnect = () => (dispatch) => {
    try {
        dispatch({ type: DISCONNECT_MQTT_REQUEST })
         mqttClient.end()
        localStorage.removeItem('mqttClient')
        dispatch({
            type: DISCONNECT_MQTT_SUCCESS,
        })
    } catch (error) {
        dispatch({
            type: DISCONNECT_MQTT_FAILURE,
            payload: error.response && error.response.data.message ? error.response.data.message : error.message
        })
    }

}

I set up my reducer file like this:

import { CONNECT_MQTT_FAILURE, CONNECT_MQTT_REQUEST, CONNECT_MQTT_SUCCESS, DISCONNECT_MQTT_FAILURE, DISCONNECT_MQTT_REQUEST, DISCONNECT_MQTT_SUCCESS } from "../constants/mqttConstants"

export const connectMqttReducer = (state = {}, action) => {
    switch (action.type) {
        case CONNECT_MQTT_REQUEST:
            return { status: 'connecting' }
        case CONNECT_MQTT_SUCCESS:
            return { status: 'connected', client: action.payload }
        case CONNECT_MQTT_FAILURE:
            return { status: 'connect', error: action.payload }
        default:
            return state
    }

}
export const disconnectMqttReducer = (state = {}, action) => {
    switch (action.type) {
        case DISCONNECT_MQTT_REQUEST:
            return { status: 'connected' }
        case DISCONNECT_MQTT_SUCCESS:
            return { status: 'connect' }
        case DISCONNECT_MQTT_FAILURE:
            return { status: 'connected', error: action.payload }
        default:
            return state
    }

}

Doing this i’m able to connect but its timestamp when connectedAt is changing continously.And also mqtt.connect() is not function error is also showing. I commented it out. I want to connect it once and disconnect when user login and logout actions are triggered.