如何使 React 组件与后端保持同步?
How to keep a React component in sync with backend?
我正在开发一个使用 Redux 进行状态管理的小型 React 应用程序。
下面的 table 显示了一个动态的对象列表,这些对象是从 REST 后端检索的,在 Java 和 Spring 中实现。目前,我必须单击一个按钮才能添加最新的数据增量(到 Redux 存储)。
table 应该以高效的方式自动更新。我发现了一个 hacky 解决方法,它递归地使用 Window's setTimeout 方法定期从后端获取数据,但我不喜欢这个解决方案。
我可以使用哪些与 React、Redux、React Redux 和 Redux Thunk 良好集成的框架、工具或方法进行自动更新?
使用 window.setInterval is better than window.setTimeout
for this purpose. Other than fetching periodically data from your client, you could look into a websockets
library such as socket.io 虽然这需要配置服务器端。
由于您已经在使用 redux 和 react-redux,如果分派了一个动作并且更新了商店的状态,则应该使用新数据重新呈现该组件。
当您调用 setTimeout
定期获取数据时,您正在使用一种称为轮询的技术。
为了避免需要做轮询,这也取决于后端,是否支持 WebSocket 或 GraphQL 的订阅或使用某种实时数据源(例如 Firebase)
如果您正在讨论自动更新数据 - 当您的数据库中的某些内容更新时 - 您需要某种套接字服务器。您可以从后端触发一个事件,并在前端订阅它,然后执行查询以获取数据。我不认为使用 setInterval
是这类东西的好主意(在大多数情况下)。
查看 Pusher。
CouchDB(或 Couchbase(不一样))和 PouchDB 可能有帮助吗?我过几天试试。
他们似乎有 Spring 个数据库
我正在开发一个使用 Redux 进行状态管理的小型 React 应用程序。
下面的 table 显示了一个动态的对象列表,这些对象是从 REST 后端检索的,在 Java 和 Spring 中实现。目前,我必须单击一个按钮才能添加最新的数据增量(到 Redux 存储)。
table 应该以高效的方式自动更新。我发现了一个 hacky 解决方法,它递归地使用 Window's setTimeout 方法定期从后端获取数据,但我不喜欢这个解决方案。
我可以使用哪些与 React、Redux、React Redux 和 Redux Thunk 良好集成的框架、工具或方法进行自动更新?
使用 window.setInterval is better than window.setTimeout
for this purpose. Other than fetching periodically data from your client, you could look into a websockets
library such as socket.io 虽然这需要配置服务器端。
由于您已经在使用 redux 和 react-redux,如果分派了一个动作并且更新了商店的状态,则应该使用新数据重新呈现该组件。
当您调用 setTimeout
定期获取数据时,您正在使用一种称为轮询的技术。
为了避免需要做轮询,这也取决于后端,是否支持 WebSocket 或 GraphQL 的订阅或使用某种实时数据源(例如 Firebase)
如果您正在讨论自动更新数据 - 当您的数据库中的某些内容更新时 - 您需要某种套接字服务器。您可以从后端触发一个事件,并在前端订阅它,然后执行查询以获取数据。我不认为使用 setInterval
是这类东西的好主意(在大多数情况下)。
查看 Pusher。
CouchDB(或 Couchbase(不一样))和 PouchDB 可能有帮助吗?我过几天试试。
他们似乎有 Spring 个数据库