Fluxive NPM | npm.io

Fluxive

Flux-like MVB(MVVM) Library

Installation

npm install fluxive

Difference between Fluxive and Flux

Flux defines data flow as:

Action → Dispatcher → Store → View → Action → ...

But, Fluxive defines data flow as:

        (Model)
           ↓
Action → Binder → View → Action → ...

Notice:

Binder is Dispacher, and also Store in Flux.
Model is maybe unnecessary, but if you feel data store becoming more complex, you can use Model to solve its complexity.

Simple example

Create Action

let fooAction = Fluxive.Action(input => {
  let output = /* some code */;
  return output;
});

Create Binder

class FooBinder extends Fluxive.Binder {
  constructor() {
    super();
    this.state = {
      fooInfo: 'initial foo'
    };
    this.on(fooAction, output => {
      this.setState({fooInfo: output});
    });
  }
}

Create Component

class FooHandler extends Fluxive.Component {
  constructor(props) {
    super(props);
    this.involve(FooBinder);
  }
  render() {
    let {binder} = this;
    return (
      <p>Foo info: {binder.get('fooInfo')}</p>
    );
  }
}