flux2

#Flux2# Take it easy! Clean and simple to use Flux-implementation. Rethink of Flux.

Contents

• Installation

• Usage

• waitFor()

• Stores methods

• WatchStoreMixin

• Extra features

• TODO

• Installation

Using npm:

npm install flux2 --save

Using bower:

bower install flux2 --save

• Usage

There is example of full component (with the store and actions module). It contains 3 files:

• index.jsx
• actions.js
• store.js

#####index.jsx#####

var React = require('react');
var store = require('./store.js');

var getStateFromStore = function () {
    return {
        nodes: store.state.nodes
    }
};  

module.exports = React.createClass({displayName: 'NodesList',
  getInitialState: function () {
      return getStateFromStore();
  },
  render: function () {
      return (
          <ul>{this.state.nodes.map(function (item) {
              return (
                  <li>{item}</li>
              );
          })}</ul>
      );
  },
  componentWillMount: function () {
      store.on('change', this._onStoreChange, this);
  },
  componentWillUnmount: function () {
      store.off('change', this._onStoreChange);
  },
  
  _onStoreChange: function () {
      this.setState(getStateFromStore());
  }
});

#####actions.js#####

var Flux2 = require('flux2');
var Dispatcher = Flux2.Dispatcher;

module.exports = {
    fetch: function () {
        Dispatcher.dispatch('setNodesState', [
            'one',
            'two',
            'three'
        ]);
    }
};

#####store.js#####

var Flux2 = require('flux2');
var Dispatcher = Flux2.Dispatcher;

module.exports = Flux2.createStore({
    getInitialState: function () {
        return {
            nodes: []
        };
    },
    storeWillRegister: function () {
        Dispatcher.register('setNodesState', this._onSetState, this);
    },
    _onSetState: function (changes) {
        this.setState(changes);
    }
};

• waitFor()

Use this feature when you want render components only when required data has been loaded.

#####index.js#####

'use strict';
var React = require('react');
var Flux2 = require('flux2');
var Dispatcher = Flux2.Dispatcher;
var MainPage = require('./main-page');
var commentsActions = require('./comments/actions');
var commentsStore = require('./comments/store');
var activeUsersActions = require('./active-users/actions');
var activeUsersStore = require('./active-users/store');

Dispatcher.waitFor([{
    store: commentsStore,
    ready: function (params) {
        return Array.isArray(params.comments);
    }
}, {
    store: activeUsersStore,
    ready: function (params) {
        return Array.isArray(params.users);
    }
}], function () {
    React.render(
        React.createElement(MainPage, null),
        document.body
    );
});
commentsActions.fetch();
activeUsersStore.fetch();

• Store methods

According React paradigm Stores can contains those method:

• storeWillRegister()
• storeDidRegister()
• shouldStoreUpdate()
• willStoreUpdate()
• didStoreUpdate()
• storeWillUnregister()

• WatchStoreMixin

Mixin to make store watching a totally easy.

You can do it in a few lines:

...
module.exports = React.createClass({displayName: 'MyComponent1',
    mixins: [WatchStoreMixin(myStore)],
    // follow method will call automatically when watching store is changed
    getStateFromStore: function () {
        return myStore.state;
    },
...

But that's not all. You can take a more control in this operation:

module.exports = React.createClass({displayName: 'MyComponent1',
    mixins: [WatchStoreMixin({
        store: myStore,
        initialState: function (store) {
            return {
                items: myStore.state.items
            }
        },
        change: function (changes, store) {
            this.setState({
                items: store.state.items,
                lastItemsModified: Date.now()
            });
            // ...or...
            return {
                items: store.state.items,
                lastItemsModified: Date.now()
            };
        }
    )],
...

• Extra features

Don't like pub-sub pattern? Get and set state of your store with using special methods of Dispatcher:

// actions.js
module.exports = {
    fetchMore: function () {
        // get state of the store
        var state = Dispatcher.getState('Nodes');
        // dispatch('setNodesState', ...)
        Dispatcher.setState('Nodes', {
            items: state.items.concat('four', 'five');
        });
    },
...

It's hard to add new items in this way? Ok, let's do it easier:

// actions.js
module.exports = {
    fetchMore: function () {
        Dispatcher.appendState('Nodes', {
            items: ['four', 'five'];
        });
    },
...

Would like to call method of store in the same way? It's easy:

// actions.js
module.exports = {
    reset: function () {
        var store = Dispatcher.getStore('Nodes');
        if (store) {
            store.resetState();
        } else if (console && console.warn) {
            console.warn(
                'reset: store `Nodes` is not found'
            );
        }
    }
...

Do you have SPA (Single Page Application) and have to create/destroy stores dynamically? Ok:

// store.js
...
module.exports = {
    storeWillRegister: function () {
        // something
    },
    storeWillUnregister: function () {
        // something
    }
};
...
// component.jsx
...
var myStore = require('./store');

module.exports = React.createClass({displayName: 'MyComponent1',
    componentWillMount: function () {
        this._store = Flux2.createStore(myStore);
    },
    componentWillUnmount: function () {
        this._store.destroy();
    }
...

• TODO

• mixins (see dispatchr)
• contexts (see dispatchr again)