Question

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

我知道io.on（'action'，data =＆gt; console.log（data））是每个浏览器接收套接字广播信号的方式。但是，如果我希望使用此信号更新每个浏览器的状态，是否应将其放在操作文件或redux文件中？

要应用的代码：

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

动作文件提取：

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

redux文件提取：

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});
        }
    });
});

服务器文件代码：

{{1}}

Answer 1

将socket.on放在所需组件的componentDidMount内。并使用Redux连接组件（使用react-redux＆＃39; 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);

Answer 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文档中的自述文件进行使用。

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

套接字io.emit会影响React-Redux状态

2 个答案: