facebookarchive / flux

Application Architecture for Building User Interfaces
https://facebookarchive.github.io/flux/
Other
17.45k stars 3.46k forks source link

Provide a base Store #97

Closed justinwoo closed 9 years ago

justinwoo commented 9 years ago

I think it's kind of silly that clients of this module still have to write the same boilerplate for their stores. I think it'd be nice to provide a base for clients.

The simplest way to do this would be to do something like this:

var EventEmitter = require('events').EventEmitter;
var assign = require('react/lib/Object.assign');
var CHANGE_EVENT = 'change';

var Store = assign({}, EventEmitter.prototype, {
  emitChange: function() {
    this.emit(CHANGE_EVENT);
  },

  /**
   * @param {function} callback
   */
  addChangeListener: function(callback) {
    this.on(CHANGE_EVENT, callback);
  },

  /**
   * @param {function} callback
   */
  removeChangeListener: function(callback) {
    this.removeListener(CHANGE_EVENT, callback);
  }
});

module.exports = Store;

For even better usability, a constructing function could be provided:

function createStore(dispatcherCallback, methods) {
  return assign({}, BaseStore, methods, {
    dispatcherIndex: Dispatcher.register(dispatcherCallback)
  });
}

Here's an 'example' of how I think it could be done/used: https://github.com/justinwoo/15-puzzle/blob/c600e4d82344b2aa0ccf6c83e06c47a76e2431f7/src/Store.js#L114

Thoughts? Are people's implementations of stores much too different to handle something like this?

sterpe commented 9 years ago

Might be using Backbone.event.

Sent from my iPhone

On Nov 12, 2014, at 10:43 PM, Justin Woo notifications@github.com wrote:

I think it's kind of silly that clients of this module still have to write the same boilerplate for their stores. I think it'd be nice to provide a base for clients.

The simplest way to do this would be to do something like this:

var EventEmitter = require('events').EventEmitter; var assign = require('react/lib/Object.assign');

var Store = assign({}, EventEmitter.prototype, { emitChange: function() { this.emit(CHANGE_EVENT); },

/**

  • @param {function} callback */ addChangeListener: function(callback) { this.on(CHANGE_EVENT, callback); },

    /**

  • @param {function} callback */ removeChangeListener: function(callback) { this.removeListener(CHANGE_EVENT, callback); } });

module.exports = Store; For even better usability, a constructing function could be provided:

function createStore(dispatcherCallback, methods) { return assign({}, BaseStore, methods, { dispatcherIndex: Dispatcher.register(dispatcherCallback) }); } Here's an 'example' of how I think it could be done/used: https://github.com/kimagure/15-puzzle/blob/master/src/Store.js#L120

Thoughts? Are people's implementations of stores much too different to handle something like this?

— Reply to this email directly or view it on GitHub.

jedireza commented 9 years ago

I'm happy to share flux-store :heart:

fisherwebdev commented 9 years ago

Also see McFly https://github.com/kenwheeler/mcfly

On Thursday, November 13, 2014, Reza Akhavan notifications@github.com wrote:

I'm happy to share flux-store https://github.com/jedireza/flux-store [image: :heart:]

— Reply to this email directly or view it on GitHub https://github.com/facebook/flux/issues/97#issuecomment-62928999.

ghost commented 9 years ago

Thank you for reporting this issue and appreciate your patience. We've notified the core team for an update on this issue. We're looking for a response within the next 30 days or the issue may be closed.

kyldvs commented 9 years ago

We just released some of the basic Flux infrastructure we use at Facebook, including a base store.

http://facebook.github.io/flux/docs/flux-utils.html#content

justinwoo commented 9 years ago

cool, thanks! :beer: