Question

我一直在阅读有关将WebSockets集成到React / Redux应用程序中的最佳方法，我正在寻找答案，但有一句话就是“websocket实现的最佳位置通常是中间件”。

我的问题是为什么这是首选？这样做有什么好处？在外部App级React容器中设置websocket /有监听器调度操作（例如在componentWillMount中）？

这似乎与应用程序的整个生命周期中的持久性相当，等等。我在这里缺少什么？

Answer 1

有很多专业人士将这种逻辑放在中间件而不是实际组件中我认为的主要原因是：

每个连接的组件都会实例化一个WebSocket或者你会需要一个全局的连接声明独立于商店，换句话说，不是redux的一部分流动。
中间商品可以访问商店，并且是redux的一部分流动。
您还可以访问整个商店，因此您可以通过转发更多数据然后最初发送。
您可以将组件与Web套接字逻辑分离，因此可以集中您的代码并重用您的组件。

总而言之，没有特别的原因可以使用带有中间件的网络插座，使用中间件通常具有很大的优势。

修改
作为评论的后续内容

您如何建议管理您可能需要的案例用于初始化websocket连接但需要的特定组件管理它是否已经连接......等等简单的说，在商店里有一个标志，表明它已连接或是有更好的方法吗？

正如我所说的，我不会在组件中初始化Web套接字连接，而是在应用程序的入口点进行。比如index.js 如果您的关注点是确保在已经建立连接时不会尝试连接，那么在您创建{{1}时会调用一个简单的 socketStart 方法并初始化您的所有App数据，您可以向其传递一个回调函数，该回调函数将执行渲染并通过store进行store更新。
一个简单的例子（请记住这是伪代码）：

我们的套接字启动方法：

dispatch

我们可以在export function socketStart(store, callback) { // this is only a pseudo code! // register to server -> client events _socketClient.someFunction = (data) => { store.dispatch({ type: "Server_Invoked_Some_Function", data }); } _socketClient.someFunction2 = (data) => { store.dispatch({ type: "Server_Invoked_Some_Function2", data }); } // connect to the server via the web-socket client API _socketClient.connect(() => callback()); }文件中使用它：

index.js

Answer 2

使用中间件，您可以轻松地在Redux和Web Socket之间展开/中继消息。此外，您可以在没有React的情况下使用Redux中间件，这意味着您可以在服务器端代码上使用Redux编写API（可能使用Redux saga）。

我同意终身管理作为React组件比Redux中间件更容易。但是如果你想重新连接（破坏/重新创建），你将需要使用key道具来使协调器将它视为一个新对象，这有点奇怪。

您可以查看redux-websocket-bridge，它将Web Socket消息展开为Redux操作，并将Redux操作中继到Web Socket。

在Web Socket服务器上，发送操作：

ws.on('connection', conn => {
  conn.send(JSON.stringify({ 
    type: 'GREETING', 
    payload: { now: Date.now() } 
  }));
});

您将在Redux减速机上获得GREETING操作。反之亦然，当您想要将操作转发到Web Socket时，可以使用meta.send true标记您的操作：

this.props.dispatch({ 
  type: 'SIGN_IN',
  meta: { send: true },
  payload: { authToken: '...' }
});

Redux + Websockets：为什么要使用中间件来管理它？

2 个答案: