examples

Flux TodoMVC - LCARS and CargoBay

This is the example of flux todomvc using our LCARS (implementation of facbook's dispatcher) and cargo-bay (base events for stores).

[live demo]

To see the example, clone this repo


git clone git@github.com:sstate/examples.git

cd examples/flux-todomvc

npm install

npm run start

then open examples/flux-todomvc/index.html in your browser.

You can see that our implementation of facebook's flux is facebook flux. We are not trying to re-create flux. With our libraries and tools, you can easily follow facebook's guides and documentation. LCARS and cargo-bay are intently using facebook's guides and designs, because we want to stay as close to their vision as possible.

Flux TodoMVC - Freighter

This is the example of flux todomvc using our Freighter storage mixin for react components.

[live demo]

For an example of how it might change the look of a component, here would be the diff from facebook's original code.

diff --git a/examples/flux-todomvc-freighter/js/components/TodoApp.react.js b/Users/rtorr/git/flux/examples/flux-todomvc/js/components/TodoApp.react.js
index cf2ed55..6d31a6f 100644
--- a/examples/flux-todomvc-freighter/js/components/TodoApp.react.js
+++ b/Users/rtorr/git/flux/examples/flux-todomvc/js/components/TodoApp.react.js
@@ -17,7 +17,6 @@ var Header = require('./Header.react');
 var MainSection = require('./MainSection.react');
 var React = require('react');
 var TodoStore = require('../stores/TodoStore');
-var Freighter = require('freighter');

 /**
  * Retrieve the current TODO data from the TodoStore
@@ -31,12 +30,16 @@ function getTodoState() {

 var TodoApp = React.createClass({

-  mixins: [Freighter],
+  getInitialState: function() {
+    return getTodoState();
+  },

-  stores: [TodoStore],
+  componentDidMount: function() {
+    TodoStore.addChangeListener(this._onChange);
+  },

-  getStateFromStores: function(){
-    return getTodoState();
+  componentWillUnmount: function() {
+    TodoStore.removeChangeListener(this._onChange);
   },

   /**

To see the example, clone this repo


git clone git@github.com:sstate/examples.git

cd examples/flux-todomvc-feighter

npm install

npm run start