Question

我在我的Reactjs应用程序中使用Flux和WebSocket，在实现过程中我遇到了一些问题。

问题：

假设我有一组actioncreators和一个用于管理WebSocket连接的商店，并且连接是在actioncreator（open(token)）中启动的，我应该在哪里放置{{1我如何让其他操作访问我的连接对象，以便他们可以将数据发送到后端？
我是否必须将其作为参数传递给视图中调用的操作（例如conn.emit）或者是否有更聪明的方法？

我正在使用ES6课程。

如果我在要点中遗漏了任何必要的内容，请告诉我。

修改

到目前为止，这是我根据glortho的答案编造的：

TodoActions.create(conn, todo)

Answer 1

您应该有一个单例模块（不是商店或动作创建者）来处理打开套接字并引导流量通过。然后，任何需要通过套接字发送/接收数据的动作创建者只需要该模块并使用其通用方法。

这是一个快速而肮脏的未经测试的示例（假设您使用的是CommonJS）：

SocketUtils.js：

var SocketActions = require('../actions/SocketActions.js');

var socket = new WebSocket(...);

// your stores will be listening for these dispatches
socket.onmessage = SocketActions.onMessage;
socket.onerror   = SocketActions.onError;

module.exports = {
  send: function(msg) {
    return socket.send(msg);
  }
};

MyActionCreator.js

var SocketUtils = require('../lib/SocketUtils.js');

var MyActionCreator = {
  onSendStuff: function(msg) {
    SocketUtils.send(msg);
    // maybe dispatch something here, though the incoming data dispatch will come via SocketActions.onMessage
  }
};

当然，实际上你会做出更好，更不同的事情，但是这可以让你了解如何构建它。

Flux和WebSockets

1 个答案: