Reflux avoid hitting server every time, when data cached locally

I curious if there is any agreed upon pattern to check if data has been already loaded before hitting the server.

Say I have my action that looks like this:

Actions.loadRequest.preEmit = function () {
  $.get('/store/', function (data) {
      Actions.loadSuccess(data);
  }.bind(this));
}

This is called from a component that is simply saying give me this data: But I don't want to hit the server if that data is already in the store. Should I store the logic of checking the store in the component:

render: function () {
  var data = this.state.store.data;
  if (!data) {
    Actions.loadRequest();
  }

Is there a better way to go about this?

Solution

In my project I use shouldEmit for this (see https://github.com/reflux/refluxjs#action-hooks). An example from my code:

var streamStore = Reflux.createStore({
    [...]
});

actions.loadStream.shouldEmit = function(streamId) {
    if(streamId in streamStore.data)
        return false;
    return true;
};

This lives in the same file as the store definition. I think this is conceptually the right approach because the store saves the data, so the store should be responsible for intercepting the request to load more data and saying not to, just as it's responsible for listening to the action saying more data is available and updating itself.

Unfortunately this won't work with your example because you bound the AJAX call to preEmit, which gets called before shouldEmit. I would suggest refactoring to make the API call in a normal listen call, like this:

Actions.loadRequest.listen(function () {
  $.get('/store/', function (data) {
      Actions.loadSuccess(data);
  }.bind(this));
});

This saves preEmit for the rare case of needing to rewrite an action's arguments before emitting it. I do use this pattern in my code, for example when loading a second page of results, which relies on a next token that came with the first page and is thus in the store. But in the general simple case of "action triggered, so make a request", using listen makes more sense because then you can add preEmit and shouldEmit for more advanced behavior, like the caching you want.

Reflux also has a helper function, listenAndPromise, which further simplifies the common use case of "action fired, make AJAX call, then fire another action when it's done". Your example could become:

Actions.loadRequest.listenAndPromise(function () {
    return $.get('/store/');
});

See this section of the docs for more info on how to set that up: https://github.com/reflux/refluxjs#asynchronous-actions