初始化数据的正确方法
Proper way to initialize data
使用 RefluxJS 初始化数据(异步)的正确方法是什么?是否有类似于 AngularJS' 的解决方案,或者 Flux 实现与此无关(路由器应该处理此责任)?
在应用程序的顶级组件中,使用 comoponentWillMount
方法 (docs) 触发获取数据的操作。最初呈现组件时将调用此方法。
例如:
// Create an async action, that will request data using a promise
// Using the recently released (v0.2.2) helpers for async actions
var actions = Reflux.createActions({
init: {asyncResult: true}
});
actions.init.listenAndPromise(promiseToGetData);
// Update the store when the init action's promise is completed
var store = Reflux.createStore({
listenables: actions,
onInitCompleted: function (data) {
// do stuff
this.trigger(data)
}
});
var App = React.createClass({
mixins: [Reflux.connect(store)],
componentWillMount: function () {
// When this component is loaded, fetch initial data
actions.init()
}
});
Reflux 实际上有一个 API。
文档对它的描述很差,但 Spoike(Reflux 的作者)给出了一个答案和一个代码示例:
使用 RefluxJS 初始化数据(异步)的正确方法是什么?是否有类似于 AngularJS' 的解决方案,或者 Flux 实现与此无关(路由器应该处理此责任)?
在应用程序的顶级组件中,使用 comoponentWillMount
方法 (docs) 触发获取数据的操作。最初呈现组件时将调用此方法。
例如:
// Create an async action, that will request data using a promise
// Using the recently released (v0.2.2) helpers for async actions
var actions = Reflux.createActions({
init: {asyncResult: true}
});
actions.init.listenAndPromise(promiseToGetData);
// Update the store when the init action's promise is completed
var store = Reflux.createStore({
listenables: actions,
onInitCompleted: function (data) {
// do stuff
this.trigger(data)
}
});
var App = React.createClass({
mixins: [Reflux.connect(store)],
componentWillMount: function () {
// When this component is loaded, fetch initial data
actions.init()
}
});
Reflux 实际上有一个 API。
文档对它的描述很差,但 Spoike(Reflux 的作者)给出了一个答案和一个代码示例: