Flux-master-flex NPM

FluxMasterFlex

A simple Flux framework that will seamlessly integrate with your React application.

Usage

FluxMasterFlex requires there to be a global Promise object. I recommend using es6-promise to polyfill.

npm install flux-master-flex --save

var React = require('react');
var FluxMasterFlex = require('flux-master-flex');

var ExampleStore = FluxMasterFlex.createStore({
  displayName: 'exampleStore',

  getInitialState: function () {
    return {
      prop: 'this is the intitial state of exampleStore'
    };
  },

  _updateProp: function (payload) {
    this.setState({
      prop: payload
    });
  },

  storeWillReceiveDispatch: function (action, payload) {
    switch (action) {
      case 'update:prop':
        return this._updateProp(payload);
    }
  }
});

var ExampleApp = FluxMasterFlex.createApp({
  displayName: 'exampleApp',

  stores: [ExampleStore],

  actions: {
    doSomething: function (prop) {
      this.dispatch('update:prop', prop);
    }
  }
});

var ExampleComponent = React.createClass({
  displayName: 'exampleComponent',

  mixins: [FluxMasterFlex.Mixin],

  // Could also be written as:
  //
  // listenTo: function () {
  //   var listenTo = {};
  //   listenTo[ExampleStore] = function () {
  //     this.setState(this.getInitialState());
  //   };
  //   return listenTo;
  // },
  //
  // or
  //
  // listenTo: {
  //   exampleStore: '_updateState'
  // }
  //
  // or
  //
  // listenTo: {
  //   exampleStore: function () {
  //     this.setState(this.getInitialState());
  //   }
  // }
  listenTo: function () {
    var listenTo = {};
    // will add this._updateState as a change listener
    listenTo[ExampleStore] = '_updateState';
    return listenTo;
  },

  getInitialState: function () {
    // could also be written as
    // return {
    //   prop: this.context.getStore('exampleStore').state.prop
    // };
    return {
      prop: this.context.getStore(ExampleStore).state.prop
    };
  },

  componentDidMount: function () {
    var self = this;

    this.setState({isLoading: true});

    // executes the action `doSomething`
    setTimeout(function () {
      self.context.executeAction('doSomething', 'exampleStore was updated 3 secs after mounting component')
      // context.exec always returns a Promise object
      .then(function () {
        self.setState({isLoading: false});
      });
    }, 3000);
  },

  _updateState: function () {
    this.setState(this.getInitialState());
  },

  render: function () {
    return (
      <div>
        {this.state.prop}
      </div>
    );
  }
});

var context = ExampleApp.createContext();

React.render(
  <ExampleApp context={context}><ExampleComponent/></ExampleApp>,
  document.body
);