javascript - React + Redux 应用程序中长时间运行的进程位于何处？

Question

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

举一个简单的例子，考虑一个通过 websocket 发送和接收消息的类:

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

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

应该如何管理这个类的生命周期？

我的第一 react 是将其保留在商店:

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 应用程序中的哪里？

注意:我意识到这个简单的示例可以仅使用商店 + 操作提供者来构建。但我特别想知道长生命周期进程在存在的情况下应该存在于何处。

Answer 1

根据我的经验，有两种选择。首先，您可以将 store 传递给任何非 Redux 代码并从此处调度操作。我已经用套接字连接做到了这一点，一切都很好。其次，如果您需要使用 redux 操作来更改套接字或其他任何内容，那么将连接及其管理放在自定义中间件中似乎是个好主意。您将有权访问商店 API 并收到有关所有操作调度的通知，因此可以执行您需要执行的任何操作。