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 - 正确初始化存储中的数据对象的主要内容,如果未能解决你的问题,请参考以下文章

React Js - Flux 中的状态管理

React.js 有基本的 Flux 实现吗?

Flux+React.js - 缓存 API 请求响应

React.js + Flux -- 在视图中将回调作为道具传递

React.js - 通量与全局事件总线

彻底征服 React.js + Flux + Redux