#reactjs #redux #mqtt
#reactjs #redux #mqtt
Вопрос:
Итак, я устанавливаю соединение с брокером MQTT через Redux. У меня есть три действия: одно устанавливает соединение, другое проверяет наличие ошибки и одно получает сообщение. Запускается только первый, а остальные 2 не запускаются. Соединение выполнено успешно.
Вот мой код:
Действия
export const mqttConnectionInit = (topic) => {
return {
type: 'INIT_CONNECTION',
topic:topic
}
}
export const mqttConnectionState = (err = null) => {
return {
type: 'MQTT_CONNECTED',
payload: err
}
}
export const processMessage = (data) => dispatch => {
console.log('Receiving Message')
return {
type: 'MESSAGE_RECEIVED',
payload: data
}
}
Редуктор
import { mqttConnectionState} from './mqttActions'
import { processMessage} from './mqttActions'
const initState = {
client: null,
err: null,
message : 'message'
}
const createClient = (topic) => {
const mqtt = require('mqtt')
const client = mqtt.connect('ws://localhost:9001');
client.on('connect', function () {
mqttConnectionState('MQTT_CONNECTED')
client.subscribe(topic, (err, granted) => {
if (err) alert(err)
console.log(`Subscribed to: ` topic)
console.log(granted)
});
});
//messages recevied during subscribe mode will be output here
client.on('message', function (topic, message) {
// message is Buffer
console.log(message.toString())
processMessage({topic, message})
// client.end() will stop the constant flow of values
})
return client;
}
const mqttReducer = (state = initState, action) =>{
switch (action.type) {
case 'INIT_CONNECTION':
return {
...state,
client: createClient(action.topic)
}
case 'MQTT_CONNECTED':
return {
...state,
err: action.payload
}
case 'MESSAGE_RECEIVED':
return {
...state,
message: action.payload //payload:data
}
default:
return state
}
}
export default mqttReducer
Почему mqttConnectionState и ProcessMessage не запускаются?
Ответ №1:
Вы никогда не сможете вызвать асинхронную логику из редуктора!Ваш метод полностью асинхронный, поэтому он не может использоваться в редукторе. createClient
Кроме того, вы не должны помещать несериализуемые значения в хранилище Redux.
Вместо этого мы рекомендуем, чтобы постоянные соединения, такие как сокеты, передавались в промежуточное ПО.