How to refresh a react redux application when data changes on DB outside of the application

Question

Scenario - data changes on some of the tables in the database, say using a file upload from another process, like an ETL tool that is not part of the react-redux application. How can we then refresh the react-redux application components? Is web sockets the only to push such a change from server to client? Or do we refresh the affected components at regular intervals? but then all such ports will have to be left open all the time? Backend is a java/oracle application. Thanks

Answer 1

You should make an Ajax call (I like using axios) to the database every time the relevant React component loads to ensure that the data is up to date. If you are creating the component with React.createClass, use getInitialState() inside said component.

EDIT: Since you don't want the component to query the DB every time it loads but rather only after a specified time period, I suggest a variation on the code below:

getInitialState() {
  //Define a variable and set as the current date object
  let date = new Date;

  //Convert the variable's value to a string
  date = date.toString();

  //Slice the day of the month from the date string
  let day = date.slice(6,8);

  //Query the database if it's the 15th or 28th (approximately every 2 
  //weeks, accounting for February
  if (day == ("15" || "28")) {
    //Ajax call here
    return {data: ajaxResponse};
  }
}

Please note that this code will query the DB every time the component loads on the days selected. Since the date object goes down to the millisecond, you could make the time window as narrow as you want. Just keep in mind that if the component is never loaded during that time, the DB will not be queried until the if conditional is satisfied again.

Answer 2

The actual implementation of this state sync is up to you to decide and analyze which solution is the best to your problem. You can choose between fetching that state at regular intervals or have the server pushing that state into the client, you can achieve the same user experience with different implementation.

About the implementation details, the only thing that is really necessary in your Redux application is creating a corresponding state for what you want, and exposing actions (in that case, pure and synchronous actions) to change that state. With those actions, and with the dispatch method from the store, you can have your task of sync (which can be running in parallel) dispatching those actions to update your state as soon as it has data to sync. Furthermore, you can implement your own state change validation so the task only dispatches an action when it's really necessary.

To implement a parallel task which can sync your client, you can use redux-saga for example, and build a saga which in regular intervals fetch that state and updates the Redux store. You can use redux-saga with the other pushing data solutions too. To push data to the client, you can use a WebSocket, or more complete solutions like socket.io or Firebase Cloud Messaging.