Socket io.emit 影响 React-Redux 状态答案

【问题标题】：Socket io.emit to affect React-Redux stateSocket io.emit 影响 React-Redux 状态
【发布时间】：2023-03-30 02:47:01
【问题描述】：

我已经设置了 React + Redux 并添加了 socket.io。在 UI 输入框中，当我输入内容时，我可以将其传递给操作，然后是套接字，然后向访问该页面的所有浏览器发出信号。

我知道io.on('action', data => console.log(data)) 是每个浏览器接收socket广播的信号的方式。但是如果我想使用这个信号来更新每个浏览器的状态，我应该把它放在 action 文件还是 redux 文件中？

申请代码：

io.on('action', data => console.log(data)) //will write something to update the state

动作文件提取：

export const handleNameInput = (name) => {
    return {
        type: InviteeActionTypes.ADD_HANDLENAMEINPUT,
        meta: {remote: true},
        name
    };
}

redux 文件提取：

case InviteeActionTypes.ADD_HANDLENAMEINPUT: {
    return {
        ...state,
        pendingGuest : action.name
    };
}

服务器文件代码：

var http = require('http');
var server = http.createServer();
var socket_io = require('socket.io');
server.listen(4000);
var io = socket_io();
io.attach(server);
io.on('connection', function(socket){
    console.log("Socket connected: " + socket.id);
    socket.on('action', (action) => {
        if(action.type === 'invitee/ADD_HANDLENAMEINPUT'){
            console.log('Data : ', action.name);
            io.local.emit('action', {type:'message', data:action.name});
        }
    });
});

【问题讨论】：

链接stackoverflow.com/questions/39527684/using-socket-io-with-redux

标签： reactjs socket.io redux react-redux

【解决方案1】：

将socket.on 放在所需组件的componentDidMount 内。并将组件与 Redux 连接（使用 react-redux' connect ）。使用套接字数据调度操作。
像这样的：

this.socket.on('action', (action) => {
  this.props.sendDispatch(action);
});

在你的mapDispatchToProps:

const mapDispatchToProps = (dispatch) => ({
  sendDispatch: (action) => {
    dispatch(anyActionCreator(action));  // this action must update your state via reducer
  }
});

export default connect(mapStateToProps, mapDispatchToProps)(YourComponent);

【讨论】：

【解决方案2】：

对于 socket.io 集成，我建议使用我的两个 redux 中间件，它们允许您使用 redux 范例订阅事件并发出消息。

socket.io-emitter-middleware

socket.io-subscriber-middleware

您可以通过以下命令安装它们

npm i socket.io-emitter-middleware

npm i socket.io-subscriber-middleware

并按照 github 文档中的 README 进行使用。

通过这种方式，您可以将您的组件与 redux 和订阅/取消订阅事件连接起来，或者通过调度 redux 操作来发出消息。

【讨论】：