Utility to connect your Fluxo stores on your React.js component.
JavaScript HTML
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
spec
src
.gitignore
.travis.yml
Gruntfile.js
README.md
bower.json
package.json

README.md

#FluxoReactConnectStores Build Status

FluxoReactConnectStores is a utility to connect your Fluxo stores on your React.js component.

###Installation Install with bower or npm and include on your app with some module loader (browserify/webpack/require.js) or include directly on your app through script tag.

$ bower install --save fluxo_react_connect_stores

or

$ npm install --save fluxo-react-connect-stores

####Using with CommonJS module loaders (Webpack/Browserify)

var Connector = require("fluxo-react-connect-stores");
Connector(MyComponent, { comments: commentsStore });

####Using with <script> tag If you include the connector with script tag the connector will be available through window.FluxoReactConnectStores.

##How to use The FluxoReactConnectStores returns a "wrapper component" around your component that listens to the stores. When a store change, this component define new props to your component, causing the component update.

You need specify what stores you are "connecting" on your component like this:

var Connector = require("fluxo-react-connect-stores");

var commentStore = new Fluxo.ObjectStore();

var MyComponentConnected =
  Connector(MyComponent, { comment: commentStore });

The first argument is the component that you will connect and the second one is a literal object where the key is the store name and the value is the store instance.

All connected store data will be placed on the component's props. Take a look on the example below.

var Connector = require("fluxo-react-connect-stores");

// A new instance of Fluxo.Store
var comment = new Fluxo.Store({ content: "My comment" });

// My component
var MyComponent = React.createClass({
  render: function() {
    // Present my store using the object on "this.props.comment"
    return <p>{this.props.comment.content}</p>;
  }
});

// Connect my store on my component
var MyComponentConnected = Connector(MyComponent, { comment: comment });

// Render my connected component
React.render(<MyComponentConnected/>, document.getElementById("app"));

💡 You also can check and try this alive on JSFiddle.


Samuel Simões ~ @samuelsimoes ~ samuelsimoes.com