27

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

注意：我意识到这个简单的示例可以仅使用商店 + 操作提供程序来构建。但我特别想知道长期存在的过程在它们存在的情况下应该存在于哪里。

4

3 回答 3

19

根据我的经验，有两种选择。首先，您可以将 store 传递给任何非 Redux 代码并从此处调度操作。我已经通过套接字连接做到了这一点，一切都很好。其次，如果您需要 socket 或任何东西来改变 redux 操作，将连接和它的管理放在自定义中间件中看起来是个好主意。您将可以访问 store API 并了解所有操作调度，因此可以做任何您需要做的事情。

于 2015-10-03T13:25:21.847 回答
2

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

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

这是一个简单的例子。这很幼稚，但要完成任务。

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

快速说明：websocket 不在商店中。它就在那里并发布操作。

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

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

于 2015-09-07T06:16:31.027 回答
0

我使用 React/Redux/Node 开源了一个带有长时间运行操作的演示问题跟踪器，所有涉及的代码都是开源和 MIT 的。有时我需要拉或推 repo，根据连接，这可能需要很长时间，这就是下一个长时间运行的操作的来源。

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

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

涉及的存储库是：

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

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

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

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

于 2019-07-27T23:21:33.763 回答