Flux Commons Store

Tested, Modular and Small Flux Store class to use with facebook/flux Dispatcher (https://github.com/facebook/flux).

Motivation

Migrate from the default proposed 'string' comparison approach:

switch(action.actionType) {
  case TodoConstants.TODO_CREATE:
    break;
  case TodoConstants.TODO_DESTROY:
    break;
  default:
    return true
}

to a simpler and more scalable api like:

// Async actions
myStore.listenToAction(Actions.fetchItems, handleFetchingItems);
myStore.listenToAction(Actions.fetchItems.done, handleFetchingItemsDone);
myStore.listenToAction(Actions.fetchItems.fail, handleFetchingItemsFail);

// Generic matchers
var unauthorizedMatcher = (payload) => payload.params.response.status === 401;
myStore.listenToMatchingAction(unauthorizedMatcher, handleUnauthorized);

Also provide the suger needed for listening/emiting changes.

How?

• The Store class expects a 'Dispatcher' on construction time, being the Dispatcher either the facebook/flux one or a custom one respecting the same interface. (more details, on how to use your own, later). new Store(dispatcher)

• Actions. Actions can be anything, the store provides a default impl where it checks for a property 'action' inside the payload to perform the matching, by doing strict equality. However you can just send a 'String' to the dispatch and it will work too.

Store API

(Check the store.js docs for full explanation and complete API)

.listenToAction(action, handler)

• action any js objcet that will be compared with the payload.action object by strict equality.
• handler the function to execute when there is a 'match', handler(payload, setSilent)

.listenToMatchingAction(matcher, handler)

• matcher a function on the way matcher(payload). The store will check each dispatched payload with this matcher and execute the handler only when the matcher returns true.

.dispatcherToken()

• returns the token created by the Dispatcher when registering the callback that listens to all the actions flowing through it.

.addChangeListener(cb) .removeChangeListener(cb) .emitChange()

• Expose a event like interface to listen to any change event happening on the store. By default every time a handler is executed in the Store a change event will be emitted.

Gist with more code and examples

https://gist.github.com/rafaelchiti/915c680b4713c459026d

More docs to come.

For more details please check the tests and the store.js the code is very simple and self explanatory (hopefully).