React Redux中useEffect调用时如何执行下述MQTT相关JS函数

核心注意点 #

• MQTT连接、订阅、监听都属于副作用操作，必须放在useEffect回调中执行
• 必须配置清理逻辑，避免组件卸载后残留的MQTT回调触发内存泄漏、重复订阅问题
• 可以直接在MQTT回调中调用Redux的dispatch方法，将接收到的消息同步到全局状态

完整代码实现 #

import { useEffect } from 'react'
import { useDispatch } from 'react-redux'
// 引入你Redux中定义的处理MQTT消息的action
import { updateCustomerPermissions } from '@/store/permissionSlice'

const MqttHandler = () => {
  const dispatch = useDispatch()

  useEffect(() => {
    // 前置校验：避免全局HeartBeat实例未加载时执行报错
    if (!window.HeartBeat) {
      console.error('全局MQTT HeartBeat实例未初始化')
      return
    }

    // 1. 设置全局MQTT消息监听回调
    window.HeartBeat.onMessageFunc = function (topic, message) {    
      console.log(`${topic}: ${message.toString()}`)
    }

    // 2. 启动MQTT连接
    try {
      window.HeartBeat.start("ws://3.18.215.###:8083/mqtt/","admin","public")
    } catch (err) {
      console.error('MQTT连接失败:', err)
      return
    }

    // 3. 订阅customer-permissions主题
    window.HeartBeat.subscribe("customer-permissions", function(payload){
      console.info('收到权限主题消息:', payload)
      // 将消息同步到Redux全局状态
      dispatch(updateCustomerPermissions(payload))
    })

    // 组件卸载时执行的清理函数
    return () => {
      if (!window.HeartBeat) return
      // 取消订阅指定主题
      window.HeartBeat.unsubscribe("customer-permissions")
      // 如果MQTT是全局公用连接可以注释下面断开连接的代码，仅清理回调即可
      window.HeartBeat.end()
      // 清空全局消息回调
      window.HeartBeat.onMessageFunc = null
    }
  // 依赖数组留空代表仅组件首次挂载时执行一次，如果连接参数是动态值需要加入依赖数组
  }, [dispatch])

  return <></>
}

export default MqttHandler

额外优化建议 #

• 如果MQTT是全应用公用能力，建议把上述逻辑抽成自定义Hook，或者放在根组件/App组件中执行，避免多个页面重复创建连接
• 可以额外添加连接状态标记，避免重复调用start方法触发重复连接
• 如需支持断开重连，可监听HeartBeat的error、close事件，触发后执行重连逻辑

内容的提问来源于stack exchange，提问作者Gamlathge amila nandun jayarat