Javascript 在React+；Redux应用程序？

在react+redux应用程序中，长时间运行的进程应该“存活”在哪里

一个简单的例子，考虑一个通过WebSoCu:/P>发送和接收消息的类。

class WebsocketStreamer {
  sendMessage(message) {
    this.socket.send(…);
  }

  onMessageReceive(event) {
    this.dispatch({
        type: "STREAMER_RECV",
        message: event.data,
    })
  }
}

该如何管理此类的生命周期

我的第一反应是把它保存在

商店中

：

var stores = {
  streamer: function(state={}, action) {
    if (action.type == "@@INIT")
      return { streamer: new WebsocketStreamer() }
    if (action.type == "STREAMER_SEND")
      state.streamer.sendMessage(action.message)
    return state;
  }
}

但是，除了有点奇怪之外，

WebsocketStreamer

也无法访问

dispatch（）

函数，它会中断热重新加载

另一个潜在的解决方案是将其保持在全球范围内：

const streamer = new WebsocketStreamer();

但这具有明显的可测试性含义，并且也会中断热重新加载

那么，在react+redux应用程序中，长时间运行的流程应该在哪里

---

注意：我意识到这个简单的示例可以只使用stores+action providers构建。但我特别想知道，在存在长期流程的情况下，它们应该存在于何处。

我正在对WebSocket做类似的事情。在我的例子中，我只是简单地将websocket客户端包装在一个React组件中，该组件呈现null并将其尽可能地注入到根目录中

<App>
    <WebSocketClientThingy handlers={configuredHandlers}/>
    ....
</App>

简要说明：
websocket不在商店里。它只是在那里发布行动

编辑：
我决定探索将客户机（长寿命对象）设置为全局状态。我得说我是这个方法的粉丝

根据我的经验，有两种选择。首先，您可以将存储传递给任何非Redux代码，并从这里分派操作。我已经用插座连接完成了，一切都很好。第二，如果您需要socket或其他任何东西来更改redux操作，那么将连接及其管理放在自定义中间件中似乎是一个好主意。您将有权访问store API，并将收到所有操作调度的通知，因此可以执行任何您需要的操作。
我使用React/Redux/Node打开了一个演示问题跟踪器，该跟踪器具有长时间运行的ops，所有涉及的代码都是开源和MIT。
有时我需要拉或推回购协议，根据连接情况，这可能需要很长时间，这就是下一个长时间运行的操作

总体而言，该方法的关键点是：


具有活动操作及其状态的redux存储
包含操作事件的redux存储
使用页面中所有正在进行的操作初始化操作存储
初始化
使用http事件服务器更新操作状态，包括数据、错误、完成、进度等
将按钮等组件连接到正在进行的操作状态
如果操作和参数匹配，则为每个组件保留一个涉及操作和参数的列表。。。将按钮状态更改为加载/完成/等
使用事件更新或请求结果更改操作存储的状态（我使用的是GraphQL，所有突变都返回“操作”类型）

涉及的存储库包括：


-->转到---->src/pkg/app operation/src




这就是跑步的感觉：

以这种方式保持状态也有助于您：


即使刷新了窗口，仍将保持“正在进行的操作”状态
如果打开两个或多个窗口并在一个窗口中执行操作，则所有窗口的运行操作和UI的状态也是同步的

我希望这种方法或代码能有所帮助。
两者都是有效的解决方案。Chris，我发现将Pusher客户端存储在redux存储中会导致很多热重新加载问题。你经历过/克服过吗？史蒂文，我不能这么说。我以前没有用过类似的概念验证阶段。