React.js + Flux - 正确初始化存储中的数据对象
Posted
技术标签:
【中文标题】React.js + Flux - 正确初始化存储中的数据对象【英文标题】:React.js + Flux - Init data objects in stores properly 【发布时间】:2015-05-07 00:57:11 【问题描述】:如何在 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>
)
【问题讨论】:
我会使用null
... 比空对象更容易检查!
【参考方案1】:
我使用 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);
;
【讨论】:
【参考方案2】:视图应始终根据通量结构侦听存储数据更改。因此,您的视图不应该检查商店是否有数据。相反,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();
【讨论】:
以上是关于React.js + Flux - 正确初始化存储中的数据对象的主要内容,如果未能解决你的问题,请参考以下文章