Update flux cheatsheet

This commit is contained in:
Rico Sta. Cruz 2015-02-26 02:59:18 +08:00
parent 0722a615f0
commit fce6eed68e
1 changed files with 47 additions and 14 deletions

61
flux.md
View File

@ -15,12 +15,12 @@ layout: default
## Dispatcher ## Dispatcher
A dispatcher emits (`.dispatch()`) events to its listeners (`.register(fn)`). [A dispatcher][dispatcher] emits events (`.dispatch()`) to its listeners (`.register(fn)`).
```js ```js
var Dispatcher = require('flux').Dispatcher; var Dispatcher = require('flux').Dispatcher;
d = new Dispatcher() d = new Dispatcher();
// send a payload // send a payload
d.dispatch({ a: 'aaa', ... }; d.dispatch({ a: 'aaa', ... };
@ -31,7 +31,7 @@ token = d.register(function (payload) {
}) })
``` ```
### Ensuring order ### Ensuring proper order
You can ensure one listener is fired after another using `.waitFor()`. You can ensure one listener is fired after another using `.waitFor()`.
@ -49,8 +49,7 @@ token2 = d.register(function (payload) {
### Subclassing ### Subclassing
[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`). [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`).<br>
You can also make *action creators*, which are shortcuts for `dispatch()`. You can also make *action creators*, which are shortcuts for `dispatch()`.
```js ```js
@ -60,7 +59,7 @@ var assign = require('object-assign');
var AppDispatcher = assign({}, Dispatcher.prototype, { var AppDispatcher = assign({}, Dispatcher.prototype, {
// action creator // action creator
handleViewAction: function (action) { handleViewAction(action) {
this.dispatch({ this.dispatch({
source: 'VIEW_ACTION', source: 'VIEW_ACTION',
action: action action: action
@ -80,24 +79,49 @@ Stores are just like objects.
var TodoStore = { todos: {} }; var TodoStore = { todos: {} };
``` ```
### Events
Sometimes they're eventemitters, too.
```js
var TodoStore = assign({}, EventEmitter.prototype, {
...
});
TodoStore.emit('change');
TodoStore.on('change', function () { ... });
```
### Model logic
Logic can sometimes belong in stores.
```js
{
isAllActive() {
return this.list.every(item => item.active);
}
}
```
---- ----
## Stores and dispatchers ## Stores and dispatchers
Make Dispatcher and Stores: Make a Dispatcher and Stores.
```js ```js
d = new Dispatcher(); d = new Dispatcher();
TabStore = { tab: 'home' }; TabStore = { tab: 'home' };
``` ```
Dispatch events to alter the store: ### Updating data
Dispatch events to alter the store.
```js ```js
d.dispatch({ event: 'changeTab', tab: 'timeline' }); d.dispatch({ action: 'tab.change', tab: 'timeline' });
d.register(function (data) { d.register(function (data) {
if (data.event === 'changeTab') { if (data.action === 'tab.change') {
TabStore.tab = data.tab; TabStore.tab = data.tab;
} }
}); });
@ -111,9 +135,16 @@ Components can listen to Dispatchers.
```js ```js
var TodoApp = React.createClass({ var TodoApp = React.createClass({
componentDidMount: function () {
AppDispatcher.register(...); componentDidMount() {
this.token = AppDispatcher.register(function (payload) {
switch (payload.action) {
case 'tab.change':
// ...
} }
});
}
}); });
``` ```
@ -121,5 +152,7 @@ var TodoApp = React.createClass({
### Also see ### Also see
* [Dispatcher API](http://facebook.github.io/flux/docs/dispatcher.html#content) * [Dispatcher API][dispatcher]
* [React](react.html) * [React cheatsheet](react.html)
[dispatcher]: http://facebook.github.io/flux/docs/dispatcher.html