fluxo v0.0.14

Fluxo

A small yet extensible Flux implementation.

Why Fluxo?

Flux pattern is a good thing but the official (and other) implementations are a bit too complicated to fit the needs of simple apps.

With Fluxo I aim for simplicity first.

You can use Fluxo to detach the state handling responsibility from your ReactJS components.

A ReactJS component should implement one single responsibility:

Components' responsibility is to describe the appeareance of a given set of data.

Quick Start

Why don't try it out with the obiquitous TodoList example?

React's Flux pattern is not meant to write less code, it's purpose is to give your app a good structure to scale up!

(You find the working example in examples/todos.html)

// singleton Todos store instance
// it holds the data state and implements the actions
var todosStore = Fluxo.createStore(true, {
  initialState: {
    items: ['buy milk', 'call mom']
  },
  actions: ['addTodo'],
  onAddTodo: function(todo) {
    var items = this.getState('items');
    items.push(todo);
    this.setState('items', items);
  }
});

// UI description:
var TodosView = React.createClass({
  mixins: [todosStore.mixin()],
  addTodo: function() {
    var node = this.refs['msg'].getDOMNode();
    this.store.trigger('addTodo', node.value);
    node.value = '';
  },
  render: function() {
    var todos = this.state.items.map(function(todo, key) {
      return React.createElement('li', {key:'todo-'+key}, todo);
    });
    return React.createElement('div', null, 
      React.createElement('ul', null, todos),
      React.createElement('input', {ref:'msg'}),
      React.createElement('button', {onClick:this.addTodo}, 'Add')
    );
  }
});

React.render(
  React.createElement(TodosView),
  document.getElementById('todos')
);

Explanation

In the TodoList example you build a Fluxo Store which does 3 things:

• define the initial state
• expose a list of available data actions
• implement those actions

The UI part is tied up with this store (via mixin), she receives the state from the store and it's the store that is responsible for updating UI's state.

So the UI implements two things:

• describe the visual representation of a given state
• drive user actions to data actions exposed by the store

This is good, WHY?

Use as NPM dependency

var Fluxo = require('fluxo');
Fluxo.createStore({ ... });

Build / Dist

npm run build
npm run dist

Contribute

The backlog is available here:
https://waffle.io/marcopeg/fluxo

In order to contribute:

• create an issue in the backlog
• wait that issue to be set as "ready"
• fork the repo
• do your changes
• cover your changes with tests
• commit and create a pull request

Run Tests

npm run test
npm run ci