react + @reduxjs/toolkit + mqtt 实现实时通讯

这里只写单一切片

因为在RTK reducer中，状态被immer库包装在代理对象中以检测修改。在缩减程序完成后，该代理对象将被撒销，以防止内存泄漏。所以这里需要使用异步的方式实现!

//创建小仓库节点
import { createSlice, createAsyncThunk } from "@reduxjs/toolkit"
import * as mqtt from 'mqtt/dist/mqtt' //mqtt
import { mqttUrl } from "../tools/common"


//订阅主题列表
const subscribeList = ['byd']

// 创建一个异步的action
export const fetchHomeMultidataAction = createAsyncThunk(
    "fetch/homemultidata",
    // 有传递过来两个个参数, 从store里面解构拿到dispatch
    async (extraInfo, { dispatch }) => {
        // 1.发送网络请求获取数据
        const client = mqtt.connect(mqttUrl)
        // mqtt连接
        client.on('connect', (e) => {
            console.log('连接成功:', mqttUrl)
            dispatch(changeConnectState(true))
            //订阅DT模块数据的消息
            subscribeList.forEach(it => {
                client.subscribe(it, { qos: 0 }, (error) => {
                    if (error) {
                        console.log(`订阅失败${it}`)
                        return
                    }
                })
            })
        })

        // 接收消息处理
        client.on('message', (topic, message) => {
            dispatch(accept_mqtt_data({[topic]:message.toString()}))
        })

        // 断开发起重连
        client.on('reconnect', (error) => {
            console.log('正在重连:', error)
        })

        // 链接异常处理
        client.on('error', (error) => {
            console.log('连接失败:', error)
            dispatch(changeConnectState(false))
        })
    }
)

//初始数据
const initialState = {
    //连接对象
    client: null,
    //当前传输数据
    mqtt_data: null,
    //是否连接
    mqtt_isConnect: false
}

//处理方法
const reducers = {
    //接收数据
    accept_mqtt_data(state, { payload }) {
        state.mqtt_data = payload
    },

    //切换连接状态
    changeConnectState(state, { payload }) {
        state.mqtt_isConnect = payload
    }
}

const stateSlice = createSlice({
    name: 'mqtt',
    initialState,
    reducers
})

export const { accept_mqtt_data, changeConnectState } = stateSlice.actions
export default stateSlice.reducer

上面只使用到了mqtt的接收,并没涉及到订阅, 如后续有需要再添加!

注意点: 在异步函数中dispatch调用的函数需要导出,不然找不到!