如何保持 React 组件与后端同步？答案

【问题标题】：How to keep a React component in sync with backend?如何保持 React 组件与后端同步？
【发布时间】：2019-02-14 15:30:19
【问题描述】：

我正在开发一个使用 Redux 进行状态管理的小型 React 应用程序。

下表显示了一个动态的对象列表，这些对象是从 REST 后端检索的，该后端是用 Java 和 Spring 实现的。目前，我必须单击一个按钮才能添加最新的数据增量（到 Redux 存储）。

表格应该以高效的方式自动更新。我发现了一个 hacky 解决方法，它递归地使用 Window's setTimeout 方法定期从后端获取数据，但我不喜欢这个解决方案。

我可以使用哪些框架、工具或方法来实现与 React、Redux、React Redux 和 Redux Thunk 良好集成的自动更新？

【问题讨论】：

我觉得这个问题太笼统了。对服务器有什么限制？您可以让服务器通过 WebSocket 通知您有关数据更改的信息吗？如果服务器无法告诉您数据何时更改，那么间歇性检查更改或多或少是您唯一的选择。
请发表评论，而不是投票结束。
一个不排除另一个。这个问题对 SO 来说太宽泛了。如果您需要一些想法，我们已经为您提供了一个。这是网络套接字的用例。轮询 (setTimeout) 是最后的手段。
我在服务器上添加了信息。我目前不使用 WebSockets。因此，我想知道/一些非 WebSocket 方式。
@mike 如果你有 REST 服务器并且不愿意或不能改变这种情况，轮询是唯一的选择。

标签： javascript reactjs redux react-redux redux-thunk

【解决方案1】：

由于您已经在使用 redux 和 react-redux，如果调度了一个操作并且更新了 store 的状态，则应该使用新数据重新渲染组件。
当您调用setTimeout 定期获取数据时，您使用的是一种称为轮询的技术。
为了避免进行轮询，这也取决于后端，您是否支持 WebSocket 或 GraphQL 的订阅或使用某种实时数据源（例如 Firebase）

【讨论】：

【解决方案2】：

为此目的使用window.setInterval 优于window.setTimeout。除了定期从客户端获取数据之外，您还可以查看 websockets 库，例如 socket.io，尽管这需要在服务器端进行配置。

【讨论】：

感谢您的选择！我刚刚读到使用window.setTimeout 而不是window.setInterval 可以避免拥塞和函数堆叠（stackoverflow.com/a/8682723/1809463）。
哦，有道理，从现在开始，当我想定期获取异步数据时，我肯定会使用 setTimeout 而不是 setInterval，感谢您提供的信息
递归使用 setTimeout 比 setInterval 更好。使用 setTimeout，我们会考虑准备响应所需的时间，如果响应成功，我们可以安排下一次执行 setTimeout。让我们考虑 setInverval 设置为 1000 毫秒且响应在 1500 毫秒后到达的示例。无需等待结果，将安排下一次执行 setInverval。 12 秒后 - 我们将发送 12 个请求并处理 8 个响应

【解决方案3】：

如果您正在谈论自动更新数据 - 当您的数据库中的某些内容被更新时 - 您需要某种套接字服务器。您可以从后端触发事件，并在前端订阅它，然后执行查询以获取数据。我不认为使用 setInterval 来处理这类事情（在大多数情况下）是一个好主意。

查看Pusher。

【讨论】：

【解决方案4】：

可能是带有 PouchDB 的 CouchDB（或 Couchbase（不一样））会有所帮助吗？我过几天试试吧。

他们似乎有 Spring 数据库

【讨论】：