在React/Flux中管理存储数据依赖关系

Question

第二个存储区是RandomTodolistStore。它的责任是管理随机选择的TODO项目。在我看来，RandomTodoListStore应该使用TodoStore.getTodoItems()通过TodoStore访问TODO项。

function RandomTODOListStore() {
   var $randomTODOs = [];

   dispatcher.register(function(payload) {
        var action = payload.action;

        switch (action.actionType) {
            case Constants.LOAD_RANDOM_TODO:
                loadRandomTODO();
                break;
        }
    });

    function loadRandomTODO() {
        $randomTODOs = selectRandom(TODOStore.getTODOList());
        emit("change");
    }
}

问题在于，如前所述，TodoStore在启动时不会加载TODO项。

问题是：“RandomTodoListStore如何保证TodoStore已经检索了TODO项？”

Answer 1

提出的流量实现使用Waitfor方法来同步存储。我创建了Reflux来更容易地处理这个问题，让商店能够监听其他商店的声音。该特性的效果是，它将保证链中的前一个存储区已经处理了它的数据。

接口有点不同，因为回流不依赖于字符串常量来识别操作，所以这里是一个示例。

var TodoActions = Reflux.createActions(['load']);

var todoStore = Reflux.createStore({
    init: function() {
        // Listen to the load action
        this.listenTo(TodoActions.load, this.loadActions);
    },
    loadActions: functions() {
        var loadedActions = [];
        // load your actions into loadedActions
        // and do then the following inside the ajax 
        // callback when it is done:
        this.trigger(loadedActions);
    }
});

var randomTodoStore = Reflux.createStore({
    init: function() {
        // You may listen to stores as well
        this.listenTo(todoStore, onLoadedActions);
    },
    onLoadedActions: function(loadedActions) {
        // loaded actions will be passed in from the
        // dotoStores change event trigger

        // you may do your select random from loaded 
        // actions list   
    }
});

// Invoke the action
TodoActions.load();

希望这有道理。