CODEWITHSUNDEEP
javascriptreactjsreduxreact-reduxredux-thunk
mike
mike

Reputation: 5055

How to keep a React component in sync with backend?

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?

Upvotes: 3

Views: 6517

Answers (4)

Lewik
Lewik

Reputation: 757

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

Upvotes: 1

Tomasz Rup
Tomasz Rup

Reputation: 859

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.

Upvotes: 0

hope_is_grim
hope_is_grim

Reputation: 1934

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)

Upvotes: 5

Saraband
Saraband

Reputation: 1590

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.

Upvotes: 0

Related Questions