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?
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?
Share Improve this question edited Feb 14, 2019 at 15:35 mike asked Feb 14, 2019 at 15:30 mikemike 5,0554 gold badges47 silver badges84 bronze badges 7- 4 I think this question is too broad. What are the restrictions with respect to the server? Can you have the server notify you on data change through WebSocket? If the server can't tell you when data changes, checking for changes intermittently is more or less your only option. – zero298 Commented Feb 14, 2019 at 15:34
- Please ment, instead of voting for close. – mike Commented Feb 14, 2019 at 15:34
- One doesn't exclude the other. The question is too broad for SO. If you need some ideas, you've been provided with one. That's use case for web sockets. Polling (setTimeout) is the last resort. – Estus Flask Commented Feb 14, 2019 at 15:38
- I've added information on the server. I currently don't use WebSockets. Thus, I'd like to know the/some non-WebSocket way(s). – mike Commented Feb 14, 2019 at 15:42
- @mike If you have REST server and aren't willing or able to change the situation, polling is the only option. – Estus Flask Commented Feb 14, 2019 at 15:48
4 Answers
Reset to default 5Since you're already using redux and react-redux, if an action is dispatched and the store's state is updated, the ponent 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 (e.g. Firebase)
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
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.
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.