ThirdMirrors
/
cheatsheets
mirror of https://gitee.com/Hawkin99/cheatsheets.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
flux.md
View File

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