3

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).

Dynamic table with load button

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?

mike
  • 4,929
  • 4
  • 40
  • 80
  • 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 Feb 14 '19 at 15:34
  • Please comment, instead of voting for close. – mike Feb 14 '19 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 Feb 14 '19 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 Feb 14 '19 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 Feb 14 '19 at 15:48
  • @estus Yes, but I wasn't sure how to do correct polling in this context (I originally have a Java background). Seems `window.setTimeout` is the way to go. – mike Feb 14 '19 at 15:52
  • @mike setTimeout or setInterval should take place somewhere. A good thing is to not have simultaneous polling requests, this prevents state updates that can overwrite each other. You can cancel previous requests when you do a new one, or wait for previous one before doing another one. This is very specific to your implementation details, that's why the question is too broad. – Estus Flask Feb 14 '19 at 16:01

4 Answers4

5

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 (e.g. Firebase)

hope_is_grim
  • 1,934
  • 15
  • 24
1

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

Lewik
  • 649
  • 1
  • 6
  • 19
0

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.

Saraband
  • 1,540
  • 10
  • 18
  • Thanks for the alternative! I just read that using `window.setTimeout` over `window.setInterval` avoids congestion and function stacking (https://stackoverflow.com/a/8682723/1809463). – mike Feb 14 '19 at 15:50
  • 1
    Oh that makes sense, I will definitely use setTimeout over setInterval from now on when I want to fetch asynchronous data periodically, thanks for the info – Saraband Feb 14 '19 at 15:57
  • Using recursively setTimeout is better then setInterval. With setTimeout we take into account time that is required for preparing the response and if response is successfully than we can schedule next execution of setTimeout. Lets consider exampled where setInverval is set to 1000ms and response arrives after 1500ms. Without waiting for results next exection of setInverval will be scheduled. After 12 sec - we are going to send 12 request and 8 responses will be handled – Krzysztof Safjanowski Apr 05 '22 at 13:04
0

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.

Tomasz Rup
  • 829
  • 1
  • 6
  • 13