Update flux

This commit is contained in:
Rico Sta. Cruz 2015-02-26 02:49:04 +08:00
parent 393d6d3a50
commit 0722a615f0
1 changed files with 20 additions and 10 deletions

30
flux.md
View File

@ -5,14 +5,14 @@ layout: default
## Architecture
You have:
* __Dispatchers__ receive *actions* that get dispatched to its listeners.
* __Stores__ are objects that store data, usually changed from a dispatcher listener.
* __Views__ are React components that listen to Store changes, or emit *actions* to the dispatcher.
----
## Dispatcher
A dispatcher emits (`.dispatch()`) events to its listeners (`.register(fn)`).
@ -22,10 +22,10 @@ var Dispatcher = require('flux').Dispatcher;
d = new Dispatcher()
// send a message
// send a payload
d.dispatch({ a: 'aaa', ... };
// receive
// receive payloads
token = d.register(function (payload) {
payload.a === 'aaa'
})
@ -39,17 +39,19 @@ You can ensure one listener is fired after another using `.waitFor()`.
token1 = d.register(...);
token2 = d.register(function (payload) {
// ensure receiver 1 is fired before this
// can only be used within register(...)
d.waitFor([ token1 ])
d.waitFor([ token1 ]);
// process here
})
```
### Subclassing
`Object.assign` is the preferred way to subclass Dispatcher (think `$.extend`).
[Object.assign](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) is the preferred way to subclass Dispatcher (think `$.extend`).
You can make *action creators*, which are shortcuts for `dispatch()`.
You can also make *action creators*, which are shortcuts for `dispatch()`.
```js
var Dispatcher = require('flux').Dispatcher;
@ -57,7 +59,7 @@ var assign = require('object-assign');
var AppDispatcher = assign({}, Dispatcher.prototype, {
// shortcut for dispatching
// action creator
handleViewAction: function (action) {
this.dispatch({
source: 'VIEW_ACTION',
@ -68,6 +70,8 @@ var AppDispatcher = assign({}, Dispatcher.prototype, {
})
```
----
## Stores
Stores are just like objects.
@ -76,6 +80,8 @@ Stores are just like objects.
var TodoStore = { todos: {} };
```
----
## Stores and dispatchers
Make Dispatcher and Stores:
@ -97,7 +103,9 @@ d.register(function (data) {
});
```
## With Components
----
## With Views
Components can listen to Dispatchers.
@ -109,6 +117,8 @@ var TodoApp = React.createClass({
});
```
----
### Also see
* [Dispatcher API](http://facebook.github.io/flux/docs/dispatcher.html#content)