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

【问题标题】：React/Flux - Best way to monitor api and update store on new data?React/Flux - 监控 api 和更新存储新数据的最佳方式？
【发布时间】：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 上获取数据是完全可以的。如果它经常变化，那么您应该考虑某种数据推送模型。

标签： javascript rest reactjs reactjs-flux flux

【解决方案1】：

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

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

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

【讨论】：