fluxing v0.0.5

Fluxing

Simple implementation of Flux architecture.

Fluxing provides ...

• Action
• Store
• Component

Then, Dispatcher isn't provided, so you can build your application much simply.

* _ES6 syntax is preferred._ *

Action

Example

import Fluxing from 'fluxing';

const EVENTS = {
  FOO: 'some unique string'
};

let FooAction = Fluxing.createAction({

  foo: function() {
    $.get('somewhere').done(response => {
      this.dispatch(EVENTS.FOO, response);
    });
  }

});

Usage

Define the action object by Fluxing.createAction.

Then you can call this.dispatch(eventName, ...args) in each methods of the action object. (This invokes an event of eventName in background.)

Store

Example

import Fluxing from 'fluxing';

const EVENTS = {
  FOO: 'some unique string'
};

let FooStore = Fluxing.createStore({

  getInitialState() {
    return {
      baz: ['a', 'b']
    };
  },

  mapHandlers() {
    return {
      [EVENTS.FOO]: this.handleFoo
    };
  },

  handleFoo() {
    this.setState({baz: this.state.baz.concat('c')}, () => {
      console.log('handled foo');
    });
  }

});

Usage

Define the store object by Fluxing.createStore.

Then you can call this.setState(state [, callback]) in each methods of the store object.

And you can also define following methods...

• getInitialState
  The store object has state, so define initial state of store object.
• mapHandlers
  Map event handlers to correct event.

You DO NOT have to implement any method to set event listeners of each events because those will be set in background.

Component

Example

import React from 'react';
import Fluxing from 'fluxing';

import FooAction from 'path/to/action';
import BarStore from 'path/to/store';

let FooComponent = Fluxing.createClass({

  syncStores: [BarStore],

  displayName: 'Foo',

  componentDidMount() {
     FooAction.foo();
  },

  render() {
    return (
      <div>
        <h1>Title</h1>
        <p>{BarStore.state.bar}</p>
      </div>
    );
  }

});

Usage

Define the component object by Fluxing.createClass.

As the method name is similar to React.createClass, you can define any attributes or methods of React, such as displayName, getInitialState, and so on.

Also, if you defined syncStores attributes with an array of FluxingStore instance, the component will be updated automatically as those FluxingStore instances update.