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

React/Flux - Best way to monitor api and update store on new data?

本文关键字:数据 方式 最佳 新数据 存储 Flux 监控 api 更新 React      更新时间:2023-09-26

我试图找出如何更新存储时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);

首先,您必须定义什么是'live'数据。在用户向服务器写入一些数据之后,要等多久才能知道有新数据?如果你想在1秒内收到通知,你还需要仔细设计你的后端系统。

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

不要把定时器逻辑放到可能被多个组件共享的动作中。