React.js+Flux-正确初始化存储中的数据对象
React.js + Flux - Init data objects in stores properly
如何在Flux存储中初始化数据对象?
class MyStore {
constructor() {
this.myData = {};
// or
this.myData = null;
}
onReceiveData(data) {
this.myData = data;
}
}
在我的React组件中,我正在检查数据是否从服务器加载以呈现子级:
render() {
// <Child /> has required props in `data` object
return (
<div>
{!this.state.myData ? (
<div>Loading...</div>
) : (
<Child data={this.state.myData} />
)}
</div>
)
}
我使用AppBootstrap.js模块来(1)实例化存储,(2)使用来自服务器的初始数据调度初始化操作,以及(3)呈现根React组件。
示例:
// AppBootstrap.js
var AppConstants = require('AppConstants');
var AppDispatcher = require('AppDispatcher');
var AppRoot = require('AppRoot.react');
var React = require('React');
require('FriendStore');
require('LoggingStore');
require('MessageStore');
module.exports = (initialData, elem) => {
AppDispatcher.dispatch({
type: AppConstants.ActionTypes.INITIALIZE,
data: initialData
});
React.render(<AppRoot />, elem);
};
View应始终根据流量结构监听Store数据的更改。因此,您的视图不应该检查存储是否有数据。相反,Store应该通知视图数据已经更改。
示例:
var ActionConstants = require('../constants/action-constants.js');
var AppDispatcher = require('../dispatcher/app-dispatcher.js');
var React = require('react');
var EventEmitter = require('events').EventEmitter;
var MyStore = assign({}, EventEmitter.prototype, {
items_: [],
emitChange: function() {
this.emit(ActionConstants.stores.DATA_CHANGED);
},
addChangeListener: function(callback) {
this.on(ActionConstants.stores.DATA_CHANGED, callback);
},
removeChangeListener: function(callback) {
this.removeListener(ActionConstants.stores.DATA_CHANGED, callback);
}
});
MyStore.dispatchToken = AppDispatcher.register(function(payload) {
switch(payload.type) {
// Handle store initiation on action result received.
// Also broadcast the data change event to listeners.
case ActionConstants.MyStoreInit:
MyStore.init(payload.data);
MyStore.emitChange();
}
}
相关文章:
- 在控制器和数据对象之间同步数据
- AngularJs指令,该指令创建内部有数据对象的新指令
- 从数据对象数组创建折线图
- Vue.js 数据对象不适用于某些 lodash 函数
- 无法获取带有 .data(el,'dataname').sublev 的数据对象
- React.js+Flux-正确初始化存储中的数据对象
- 如何调用另一个js文件中的函数或触发一个自定义事件,该事件将参数作为Jquery中的数据对象传递
- Meteor模板数据对象可防止javascript事件触发
- 我该如何访问由gullow灰质插件创建的数据对象(当使用nunjucks编译html文件时)
- 如何使用javascript数据对象?如何通过变量访问条目
- Knockout:为许多数据对象绑定模板引导模式
- 如何将数据对象添加到JSON对象中
- jQuery+php如何在数据对象中返回多个值
- $http put v create - 每个 (JavaScript) 中从 .success() 返回的数据对象有什
- 数据对象内的 D3 循环数组
- 在jQuery的.on()数据对象中访问$(this)
- AngularJS模态窗口数据/对象流
- 关于在 Vue.js 中设置数据对象属性的最佳实践
- 如何构建数据对象以在不知道多少时传递给 ajax
- 如何访问放置在谷歌地图上的geoJSON数据中的数据对象