Question

长时间运行的进程应该在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应用程序中？

注意：我意识到这个简单的例子可以只使用商店+动作提供者构建。但我特别想知道在它们存在的情况下应该存在多长时间的过程。

Answer 1

根据我的经验，有两种选择。首先，您可以将商店传递给任何非Redux代码并从此处调度操作。我用socket连接做了这个，一切都很好。其次，如果你需要套接字或者用redux动作改变什么，那么将连接和它的管理放在自定义中间件中似乎是个好主意。您可以访问商店API，并将获得所有调度操作的通知，因此可以执行您需要的任何操作。

Answer 2

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

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

这是一个简单的例子。这很天真，但是完成了。

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

快速说明： websocket不在商店里。它就在那里并发布行动。

编辑：我决定探索将客户端（长期存在的对象）设置为全局状态。我得说我是这种方法的粉丝。

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

Answer 3

我使用React / Redux / Node开源了一个具有长期运行操作的演示问题跟踪器，所有涉及的代码都是开源的并且是MIT。有时，我需要拉或推存储库，并且可能需要很长时间，具体取决于连接，这是下一个长时间运行的操作的来源。

该方法的总体要点是：

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

涉及的存储库是：

https://github.com/vicjicaman/tracker-common --->转到---> 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-4e0aa280-9ac7-11e9-9129-b8e31b455c50.gif

以这种方式保持状态还可以帮助您：

即使刷新窗口，正在进行的操作状态也保持不变
如果打开两个或多个窗口并在一个窗口中执行操作，则所有窗口的运行状态和用户界面也会同步。

我希望该方法或代码有所帮助。

长时间运行的进程在React + Redux应用程序中的位置在哪里？

3 个答案: