时间戳

首页 > 解决方案 > 带有 Socket io 的 Redux 中间件

reactjs - 带有 Socket io 的 Redux 中间件

问题描述

刚刚尝试使用 react JS、redux 和 socketIO 创建一个简单的聊天应用程序。经过一段时间的探索，我发现最好有一个Redux 中间件，这样我就可以管理套接字连接和数据。经过一番研究，我想出了以下解决方案

socketMiddleware.js

import socketIOClient from "socket.io-client";

//This acts as middleware for all store actions.
const socketMiddleware = () => {
    console.log("MIDDDLEWARE")
  let webSocket = null;
  // the middleware part of this function

  return store => next => action => {


    switch (action.type) {
        case 'WS_CONNECT':
          webSocket = socketIOClient(action.host);
          webSocket.on("connection_success", data => {
            console.log("ON Connect : ",data);
          })
          webSocket.on("new_message", messageData => {
              console.log("NEW MESSAGE : ",messageData)
            })
        
        case "SEND_MESSAGE":
          webSocket.emit("received_new_message", action.payload)
          console.log('Message Send');        
    }  
    


    return next(action);
  };
};

export default socketMiddleware();

这按预期工作，但我的问题是，有没有比这更好的解决方案（当然。应该有）？

标签： reactjsreduxsocket.io

解决方案

推荐阅读