React/Flux - 监控 api 和更新存储新数据的最佳方式?

Posted

技术标签:

【中文标题】React/Flux - 监控 api 和更新存储新数据的最佳方式?【英文标题】:React/Flux - Best way to monitor api and update store on new data? 【发布时间】:2015-10-31 16:05:34 【问题描述】:

我试图弄清楚当 api 返回更改的数据时如何更新存储。 当其他用户将数据写入 api 时,我的一个组件应该呈现“实时”数据。最好的方法是什么?每隔一段时间轮询异步数据?

我正在使用 ReactJS/AltJS,现在我正在使用 jQuery 在我的操作中进行异步 api 调用。

谢谢!

BookActions.js:

getBook(bookId) 
  $.ajax( url: '/api/books/' + bookId )
    .done((data) => 
      this.actions.getBookSuccess(data);
    )
    .fail((jqXhr) => 
      this.actions.getBookFail(jqXhr);
    );

BookStore.js

import alt from '../alt';
import BookActions from '../actions/BookActions';

class BookStore 
  constructor() 
    this.bindActions(BookActions);
    this.books = [];
  

  onGetBookSuccess(data) 
    this.books = data;
  

  onGetBookFail(errorMessage) 
    toastr.error(errorMessage);
  



export default alt.createStore(BookStore);

【问题讨论】:

你能再解释一下,你想要做什么。您声明您按间隔轮询异步数据,但我看到您仅在 getBook 方法中执行此操作(也许您在间隔调用它?)。图书数据中存储了哪些类型的数据?他们经常更换吗?如果不是,那么在 componentDidMount 上获取数据是完全可以的。如果它经常变化,那么您应该考虑某种数据推送模型。 【参考方案1】:

首先,您必须定义什么是“实时”数据。用户将一些数据写入服务器后,您可以等待多长时间才能知道有新数据?如果你想在 1 秒内收到通知,你还需要仔细设计你的后端系统。

在您的问题中,我认为延迟几秒钟是可以容忍的。一种简单的解决方案是轮询。根据react doc,您可以在componentDidMount 中创建一个定时器来定期调用API,并清理componentWillUnmount 中的所有内容。

不要将定时器逻辑放入可能被人工组件共享的动作中。

【讨论】:

以上是关于React/Flux - 监控 api 和更新存储新数据的最佳方式?的主要内容,如果未能解决你的问题,请参考以下文章

React、Flux、React-Router 调度错误 - 可能的批处理更新解决方案?

React/Flux 存储不会改变它的状态

React Flux:存储依赖项

React Flux 从远程服务获取 Api 数据

React Flux 通过 API 调用加载初始数据

API 调用后 React/Flux seState 不重新渲染组件