Search code examples
javascriptreactjsreduxreact-reduxredux-thunk

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?

Solution

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