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 和更新存储新数据的最佳方式?的主要内容,如果未能解决你的问题,请参考以下文章