如何在应用程序外部的数据库上更改数据时刷新react redux应用程序

时间:2018-02-16 22:14:34

标签: reactjs redux react-redux

场景 - 数据库中某些表的数据更改,例如使用来自其他进程的文件上载,例如不属于react-redux应用程序的ETL工具。那么我们如何刷新react-redux应用程序组件呢? Web套接字是否只能将这种更改从服务器推送到客户端?或者我们是否定期刷新受影响的组件?但是所有这些端口都必须一直保持开放状态?后端是一个java / oracle应用程序。 感谢

2 个答案:

答案 0 :(得分:0)

每次加载相关的React组件时,都应该对数据库进行Ajax调用(我喜欢使用axios),以确保数据是最新的。如果您使用React.createClass创建组件,请在所述组件中使用getInitialState()

编辑:由于您不希望组件在每次加载时都查询数据库,而是仅在指定的时间段之后查询数据库,因此我建议对以下代码进行修改:

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};
  }
}

请注意,每当组件在所选日期加载时,此代码将查询数据库。由于日期对象下降到毫秒,您可以根据需要缩短时间窗口。请记住,如果在此期间从未加载组件,则在再次满足if条件之前不会查询数据库。

答案 1 :(得分:0)

此状态同步的实际实施取决于您决定和分析哪种解决方案最适合您的问题。您可以选择定期获取该状态,还是让服务器将该状态推送到客户端,您可以通过不同的实现获得相同的用户体验。

关于实现细节,Redux应用程序中唯一真正需要的是为所需内容创建相应的状态,并公开操作(在这种情况下,纯操作和同步操作)以更改该状态。通过这些操作以及商店中的调度方法,您可以将同步任务(可以并行运行)调度这些操作,以便在数据同步时立即更新您的状态。此外,您可以实现自己的状态更改验证,以便任务仅在必要时调度操作。

要实现可以同步客户端的并行任务,您可以使用redux-saga作为示例,并构建一个以定期间隔获取该状态并更新Redux存储的saga。您也可以将redux-saga与其他推送数据解决方案一起使用。要将数据推送到客户端,您可以使用WebSocket或更完整的解决方案,例如socket.ioFirebase Cloud Messaging