使用 redux 构建 React 应用程序时在哪里存储 WebRTC 流

IT技术 javascript html reactjs webrtc redux
2021-05-04 12:10:40

我正在构建一个 React.js 应用程序,它与 WebRTC api 交互以进行音频/视频通话。成功建立呼叫后,将在 RTCPeerConnection 实例上触发“onaddstream”事件,该实例包含我作为开发人员应该连接到视频元素以向用户显示远程视频的流。

我遇到的问题是了解将流从事件获取到 React 组件进行渲染的最佳方式。我通过将流转储到我的 redux 状态来成功地工作,但在另一个答案中,redux 的创建者 Dan Abramov 提到了这一点:

[...] 不要在州内使用类。它们不能按原样序列化。[...] 只使用普通对象和数组。

这让我想知道,如果我不应该将这些流置于 redux 状态,是否有更好的方法来响应 'onaddstream' 事件并让 React 组件更新而不将流置于 redux 状态?

1个回答

根据我的经验,像套接字连接这样的东西,就像你的情况一样,webrtc 东西,非常适合生活在为你的应用程序手写的自己的中间件中。您可以在此处连接所有连接管理,触发操作以与 UI 通信并侦听来自此处的操作。

另一种解决方案是查看redux saga,这似乎是处理套接字和 webrtc 等复杂效果的不错选择。