reactjs - 我应该在 redux 存储中存储高吞吐量、结构化传感器数据吗?

标签 reactjs redux react-redux

我最近开始使用 React,到目前为止我已经构建了几个应用程序,包括一个用于操作和可视化传感器数据的实时应用程序。该数据包含来自 100Hz-200Hz Websocket 的高吞吐量、结构化 JSON 帧。

随着我的应用程序的复杂性迅速增长,在通过官方文档和 Dan Abramov 的类(class)了解 Redux 后,我发现使用 Redux 来管理应用程序的视觉状态、路由、服务器信息等非常有吸引力。

在我的 React-non-Redux 应用程序中,所有内容都保留在本地状态,但这在架构设计中产生了成本。现在,我想开始重构应用程序以集成 redux。由于我目前的知识有限,我陷入了关于在哪里存储传感器流数据以及对应用程序渲染和处理性能的影响的架构决策。

在 redux 文档中,有一些经验法则用于确定应将哪种数据放入 Redux 中:

  • 应用程序的其他部分是否关心这些数据? [是]
  • 您是否需要能够基于此创建进一步的派生数据 原始数据? [是]
  • 是否使用相同的数据来驱动多个组件? [是]
  • 能够将此状态恢复到给定值对您有值(value)吗? 时间点(即时间旅行调试)? [是]
  • 你想缓存数据吗(即,如果状态是的话,就使用它的状态) 已经存在而不是重新请求)? [也许]

有几个线程讨论了这个问题,但没有任何明确的答案。我也无法对此发表评论(这里太菜鸟了):

我发现了许多需要学习的不同分支,包括中间件、RxJS 等。我想进一步插入开发,但由于所有这些都需要时间来掌握,我想引用社区一些方向。

提前致谢!

最佳答案

我目前正在使用 redux 为小部件提供数据,我想说传入速率约为 80-90 赫兹,而我在小部件 Canvas 上仍然获得 60 fps。正如 Dan 在他的文章中所说,使用 redux 本身并没有什么慢的地方。然而,每秒更新 UI 200 次是完全没有必要的,我至少会添加一些中间件(如果你不想有服务器)来 redux,以将更新聚合到每秒最多 60 次。 Redux 可能不会那么慢,但尝试每秒渲染 200 次肯定会慢。

但是我要说的是,我最近不得不做出与您相同的决定,并且将数据流保存在 redux 中使得在我的应用程序中访问它们变得更加简单。

我发现使用 Web Worker 是将数据合并到单个更新中的好方法。如果你还没有,我会检查一下https://developer.mozilla.org/en-US/docs/Web/API/Worker 。如果您决定朝这个方向发展,它可能会对性能有很大帮助,因为工作人员将直接处理 websocket 连接并导致操作分派(dispatch)以更受控的方式进行 redux。

关于reactjs - 我应该在 redux 存储中存储高吞吐量、结构化传感器数据吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47312053/

相关文章:

javascript - 如何使用异步操作从 reducer 取回数据

reactjs - 将 Redux-Form 与 React-Redux connect 结合使用时出现 TypeScript 错误

javascript - Jest - 测试给出错误 TypeError : Cannot read property 'then' of undefined

javascript - react : Setting state to an es6 Map

css - 如何覆盖 react 引导颜色?

reactjs - 提交时无法识别 mobx-react-form 文本字段默认值

reactjs - 为什么我无法通过 firebase 进行身份验证?

reactjs - React/Redux 不更新状态

reactjs - Route.Component 没有任何构造或调用签名 - React Router with TypeScript

reactjs - 如何在应用程序的客户端内使用 router.replace?