如何保持 React 组件与后端同步?
Posted
技术标签:
【中文标题】如何保持 React 组件与后端同步?【英文标题】:How to keep a React component in sync with backend? 【发布时间】: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 服务器并且不愿意或不能改变这种情况,轮询是唯一的选择。 【参考方案1】:由于您已经在使用 redux 和 react-redux,如果调度了一个操作并且更新了 store 的状态,则应该使用新数据重新渲染组件。
当您调用setTimeout
定期获取数据时,您使用的是一种称为轮询的技术。
为了避免进行轮询,这也取决于后端,您是否支持 WebSocket 或 GraphQL 的订阅或使用某种实时数据源(例如 Firebase)
【讨论】:
【参考方案2】:为此目的使用window.setInterval 优于window.setTimeout
。除了定期从客户端获取数据之外,您还可以查看 websockets
库,例如 socket.io,尽管这需要在服务器端进行配置。
【讨论】:
感谢您的选择!我刚刚读到使用window.setTimeout
而不是window.setInterval
可以避免拥塞和函数堆叠(***.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 数据库
【讨论】:
以上是关于如何保持 React 组件与后端同步?的主要内容,如果未能解决你的问题,请参考以下文章