FirebaseUtils.js

var Firebase = require('firebase-client');
var AppConstants = require('../constants/AppConstants');
var ServerActionCreators = require('../actions/ServerActionCreators');

exports.openUsersConnection = once(function() {
  var ref = new Firebase(AppConstants.FIREBASE_HOST+'/users').limit(100);
  ref.on('value', function(snapshot) {
    ServerActionCreators.receiveUsers(snapshot.val());
  });
});

function once(fn) {
  return function() {
    if (fn.__once__) return;
    fn.__once__ = true;
    fn.apply(null, arguments);
  };
}

UsersStore.js

var EventEmitter = require('events').EventEmitter;
var merge = require('react/lib/merge');
var AppDispatcher = require('../dispatcher/AppDispatcher');
var AppConstants = require('../constants/AppConstants');
var ActionTypes = AppConstants.ActionTypes;
var Firebase = require('firebase-client');
var moment = require('moment');
var toArray = require('../lib/toArray');

var CHANGE_EVENT = 'change';

var _state = {
  users: []
};

var UsersStore = merge(EventEmitter.prototype, {

  emitChange: function() {
    this.emit(CHANGE_EVENT);
  },

  addChangeListener: function(callback) {
    this.on(CHANGE_EVENT, callback);
  },

  getState: function() {
    return _state.users;
  }

});

function setUsersState(snapshot) {
  var users = toArray(snapshot);
  _state.users = users;
}


UsersStore.dispatchToken = AppDispatcher.register(function(payload) {
  var action = payload.action;

  switch (action.type) {
    case ActionTypes.RECEIVE_USERS:
      setUsersState(action.snapshot);
      UsersStore.emitChange();
      break;

    default:
  }

});

module.exports = UsersStore;

ViewActionCreators.js

var AppConstants = require('../constants/AppConstants.js');
var ActionTypes = AppConstants.ActionTypes;
var AppDispatcher = require('../dispatcher/AppDispatcher');
var FirebaseUtils = require('../utils/FirebaseUtils');

var ViewActionCreators = {

  openUsersConnection: function() {
    FirebaseUtils.openUsersConnection();
    AppDispatcher.handleViewAction({
      type: ActionTypes.OPEN_USERS_CONNECTION
    });
  }

};

module.exports = ViewActionCreators;

step 1
An action gets called, and opens a connection with firebase
https://gist.github.com/rpflorence/dc2a7b9c6aa9bed48895#file-viewactioncreators-js-L9

step 2
firebase responds with data, and a server action is called
https://gist.github.com/rpflorence/dc2a7b9c6aa9bed48895#file-firebaseutils-js-L8

step 3
The store responds to the server action and collects the data
https://gist.github.com/rpflorence/dc2a7b9c6aa9bed48895#file-usersstore-js-L42-L43

step 4
A React component, or SVG element, or anything is subscribed to changes on the store and present the UI.