在React + Redux应用程序中，长时间运行的进程驻留在哪里?

Where do long-running processes live in a React + Redux application?

本文关键字：进程 在哪里 运行 长时间 React Redux 应用程序      更新时间：2023-09-26

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

对于一个简单的例子，考虑一个通过websocket发送和接收消息的类: 
class WebsocketStreamer {
  sendMessage(message) {
    this.socket.send(…);
  }
  onMessageReceive(event) {
    this.dispatch({
        type: "STREAMER_RECV",
        message: event.data,
    })
  }
}

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

我的第一反应是把它放在store上:

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应用程序中，长时间运行的进程应该放在哪里呢?

注意:我意识到这个简单的例子可以只用存储+操作提供程序来构建。但是我特别想知道，在长寿命进程存在的情况下，它们应该存在于哪里。

根据我的经验，有两种选择。首先，您可以将store传递给任何非redux代码并从这里分派操作。我用套接字连接做到了这一点，一切都很好。其次，如果您需要套接字或其他任何东西来更改redux操作，那么将连接及其管理放在自定义中间件中似乎是个好主意。你可以访问存储API，并将被告知所有的动作调度，所以可以做任何你需要的。

我正在用websockets做类似的事情。在我的例子中，我只是将websocket客户端包装在一个呈现null的React组件中，并将其注入到尽可能靠近根的地方。

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

这里有一个简单的例子。这很幼稚，但是要把事情做好。

https://github.com/trbngr/react-example-pusher

快速注:websocket不存在于store中。它就在那儿，发布动作。

编辑:我决定探索将客户端(长寿命对象)设置为全局状态。我得说我很喜欢这种方法。

https://github.com/trbngr/react-example-pusher/tree/client_as_state

我使用React/Redux/Node开源了一个带有长时间运行ops的演示问题跟踪器，所有涉及的代码都是开源的和MIT的。有时我需要拉或推回购，这取决于连接，这可能需要很长时间，这是下一个长期运行操作的地方。

总体而言，该方法的要点是:

  • 包含活动操作及其状态的redux存储。
  • 包含操作事件的redux存储
  • 用该页期间所有正在进行的操作初始化操作存储初始化
  • 使用http事件服务器更新操作状态，包括数据、错误、完成、进度等。
  • 将按钮等组件连接到正在进行的操作状态。
  • 为每个组件保留相关操作和参数列表，如果操作和参数匹配…将按钮状态更改为loading/done/etc.
  • 使用事件更新或请求结果更改操作存储的状态(我使用GraphQL并且所有的突变返回"operation"类型)

涉及的存储库有:

  • https://github.com/vicjicaman/tracker-common -> GO TO -> src/pkg/app-operation/src
  • https://github.com/vicjicaman/tracker-app-events
  • https://github.com/vicjicaman/tracker-operation
  • https://github.com/vicjicaman/tracker-events

这是它运行的样子:https://user images.githubusercontent.com/36018976/60389724 - 4 - e0aa280 9 ac7 - 11 - e9 - 9129 b8e31b455c50.gif

保持这种状态还可以帮助您:

  • 正在进行的操作状态保持，即使窗口被刷新
  • 如果您打开两个或多个窗口，并在一个窗口中执行操作，则所有窗口的运行操作和UI状态也同步。
相关文章：