flux-store-base

flux-store-base

Yet another store utility for flux.

Deprecation notice

flux-store-base is superseded by floox which, apart form the shorter name, introduces a few new boilerplate reductions and a simple solution for circular dependency of stores.

It won't be maintained anymore.

Getting Started

Install the package with this command:

npm install flux-store-base --save

Then you can require the package with require('flux-store-base'). Once you do that, you get two functions:

FluxStoreBase.Store

Store(dispatcher, config) constructor configures the store using the provided flux dispatcher and config, which is an object whose methods and properties will be assigned to the resulting store. There are also some things going under the hood, but more about that below (see: Features).

FluxStoreBase.inject

inject(dispatcher) returns a constructor which can be used to create stores without passing dispatcher every time. The resulting function has only one argument - config.

Example

Action creator:

function createSomeAction(someData) {
  AppDispatcher.dispatchSomeAction(someData);
}

Store:

var Store = require('flux-store-base').Store;

var AppDispatcher = require('../dispatcher');


var MyFunkyStore = new Store(AppDispatcher, {

  displayName: 'MyFunkyStore',
  events: ['theChange'],

  getSomething() {
    return this.something;
  },

  onSomeAction(someData) {
    this.something = someData;
    this.emit('theChange');
  },

});

Component:

var React = require('react');

var MyFunkyStore = require('./path-to-my-funky-store');


var MyFunkyComponent = React.createClass({

  componentDidMount() {
    MyFunkyStore.on('theChange', this.doSomething);
  },

  componentWillUnmount() {
    MyFunkyStore.off('theChange', this.doSomething);
  },

  doSomething() {
    // Set state or whatever. You know what to do.
  },

});

Pro Tip: Inject the Dispatcher

Create a file (suggested name: base.js, contained in the store directory):

var fluxStoreBase = require('flux-store-base');

var AppDispatcher = require('../dispatcher');


var Store = fluxStoreBase.inject(AppDispatcher);

module.exports = Store;

Now you can use the module like this, without requiring the dispatcher for each store:

var Store = require('./base');


var MyFunkyStore = new Store({

  ...

});

Features

Display Name

The property displayName is used for errors. If it is absent, displayName will be 'anonymous'.

Actions

Each method in the config which starts with "on" and a capital letter, e. g. "onSomeAction" will be treated as an action handler. That means:

• The dispatcher will have a new function added for dispatching (in this case "dispatchSomeAction"). The function will have one argument, which will be then passed to the matching "on-" action handlers as a sole argument.

Dispatch Token

If any action handlers are detected ("on-" methods), the store will be registered in the dispatcher and will have a dispatchToken property added. It can be then used like this:

AppDispatcher.waitFor([VeryFineStore.dispatchToken]);

Events

There are two properties on config that can be used to configure events to which components can subscribe: events and maxListeners. events is expected to be an array of strings (but can be left undefined).

Each of those strings is then used to construct three methods for the resulting store: emitter, subscriber and unsubscriber. For event name 'theChange' we will get emitter emitTheChange, subscriber addTheChangeListener and unsubscriber removeTheChangeListener. As you can see, the name of the event is capitalized and incorporated into the new methods' names.

The emitter has no arguments - you should retrieve the data only from the store. Subscriber and unsubscriber have one argument - event handler.

Also, methods emit(event), on(event, fn) and off(event, fn) will be added to the store.

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style.

License

Copyright (c) 2015 FatFisz. Licensed under the MIT license.