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

Question

I'm working on a small React application that uses Redux for state management.

The table below displays a dynamic list of objects, which are retrieved from the REST backend, which is implement in Java with Spring. Currently, I have to click a button in order to add the latest data delta (to the Redux store).

The table should update automatically in a performant way. I found a hacky workaround that recursively used Window's setTimeout method to periodically fetch data from the backend, but I did not like the solution.

---

What frameworks, tools, or approaches can I use for auto-updating that integrate well with React, Redux, React Redux, and Redux Thunk?

Answer 1

Since you're already using redux and react-redux, if an action is dispatched and the store's state is updated, the component should be rerendered with the new data.
When you call setTimeout to periodically fetch data, you're using a technique called polling.
To avoid the need to do polling, it's also up to the backend, whether you support WebSocket or GraphQL's subscription or using some kind of real-time datasource (eg Firebase)

Answer 2

Using 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 although this will need configuration server-side.

Answer 3

If you are talking about auto-updating data reactively - when something in your database is updated - you need some kind of socket server for that. You can fire an event from your backend, and subscribe to it in your frontend, and then perform a query to fetch the data. I don't think using setInterval is a good idea for this type of stuff (in most cases).

Check out Pusher .

Answer 4

May be CouchDB (or Couchbase (it's not the same) with PouchDB could help? I what try it in couple of days.

Seems they have Spring Data libraries