Managing store data dependency in React/Flux

Question

I have a web app developed using Facebook's Flux Architecture. The page has two views: one displays a list of TODO items. The second view displays a random set of TODO items.

There are clearly two concerns that need to be managed by stores. The first is the list of available TODO's. The second is the list of randomly selected TODO items.

I thus have a TODOStore, who's concern is solely of managing the available TODO items. It has actions to loadTODOs, addTODO, deleteTODO, editTODO. On startup, this store does not load all TODO items. I want it retrieve the list of TODO items from the database only when necessary.

The second store is the RandomTODOListStore. It's responsibility is to manage the randomly selected TODO items. Seems to me that the RandomTODOListStore should access the TODO items through the TODOStore, using TODOStore.getTODOItems().

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");
    }
}

The issue with this is that, as previously stated, the TODOStore does not load the TODO items on startup.

The question is: "How does the RandomTODOListStore guarantee that the TODOStore has already retrieved the TODO items?".

Answer 1

The proposed Flux implementation uses a waitFor method to synchronize stores. I created Reflux to handle this much more easily by letting the stores be able to listen to other stores. The effect of that feature is that it will guarantee that the previous store in the chain has handled it's data.

The interface is a bit different, because Reflux doesn't rely on string constants to discern actions so here is an example.

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();

Hope this makes sense.