Сочетание socket.io с редукторным редуктором

Question

Стек - React native, socket.io, Node.js

Я занимаюсь разработкой приложения для чата. На данный момент у меня есть такой поток: пользователь нажимает «отправить сообщение» -> сообщение посылается socket.io на сервер -> соединение с сокетом на сервере получает сообщение. Теперь с этого момента я хочу, чтобы сообщение было отправлено с сервера на редукторный редуктор, а затем редуктор вернет новое состояние, которое будет отображать компонент внешнего интерфейса.
Как установить соединение между серверной стороной сокет и редуктор?

Текущий сервер:

    const express = require("express");
    const app = express();
    const port = 3000;
    const server = require("http").createServer(app);
    let io = require("socket.io")(server);

    app.get("/", (req, res) => res.send("Hello World!"));

    io.on("connection", socket => {
      console.log("a user connected");

      socket.on("join", (name, message) => {
      console.log("chat room connected")
      });

    });

    server.listen(port, () => console.log(`listening on port ${port}!`));

Текущий редуктор:

    const initialState = {
      chats: [

      ]
    };
    const chatsReducer = (state = initialState, action) => {
      let sender = action.sender;
      let message = action.message;

      switch (action.type) {
        case SEND_MESSAGE:
          let newMessage = {
            sender: sender,
            message: message
          };

          let newState = { ...state, chats: state.chats.push(newMessage) };
          return state;

        default:
          state;
      }
      return state;
    };

    export default chatsReducer;

Answer 1

Вы можете отправить новое сообщение с сервера узла, как.

let msg = {message: 'Actual Message', sender: 'Name of sender'}
io.on('connection', socket => {
  socket.on('chat message', msg => {
    io.emit('chat message', msg);
  });
}); 

Затем в компоненте чата прослушайте событие сообщения чата.

 componentDidMount() {
    this.socket = io("http://server.address:port");
    this.socket.on("chat message", msg => {
       this.props.onMessageReceivedAction (msg); // import action and will execute on message received event
   });
});

Затем добавьте действие:

export const onMessageReceivedAction = (params) => {
  return  {type: MESSAGE_RECEIVED, payload:msg};
};

Добавьте в редуктор регистр полученного сообщения

case MESSAGE_RECEIVED:

  let newMessage = {
    sender: payload.sender,
    message: payload.message
  };

  return { ...state, chats: state.chats.push(newMessage) };

Это вернет новое состояние и подпорки компонента сопоставленный с вышеупомянутым состоянием будет повторно обработан.

Надеюсь, это ответит на ваш вопрос.