Как использовать действие в редукторе?

#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.

Вместо этого мы рекомендуем, чтобы постоянные соединения, такие как сокеты, передавались в промежуточное ПО.