Update flux

This commit is contained in:
Rico Sta. Cruz 2015-02-26 03:09:45 +08:00
parent fce6eed68e
commit 6b6792994a
1 changed files with 32 additions and 7 deletions

39
flux.md
View File

@ -22,18 +22,18 @@ var Dispatcher = require('flux').Dispatcher;
d = new Dispatcher(); d = new Dispatcher();
// send a payload // send
d.dispatch({ a: 'aaa', ... }; d.dispatch({ action: 'edit', ... };
// receive payloads // receive
token = d.register(function (payload) { token = d.register(function (payload) {
payload.a === 'aaa' payload.action === 'edit'
}) })
``` ```
### Ensuring proper order ### Ensuring proper order
You can ensure one listener is fired after another using `.waitFor()`. With multiple listeners, you can ensure one is fired after another using `.waitFor()`.
```js ```js
token1 = d.register(...); token1 = d.register(...);
@ -80,7 +80,7 @@ var TodoStore = { todos: {} };
``` ```
### Events ### Events
Sometimes they're eventemitters, too. Sometimes they're eventemitters, too. Usually it's used to emit `change` events for views to pick up.
```js ```js
var TodoStore = assign({}, EventEmitter.prototype, { var TodoStore = assign({}, EventEmitter.prototype, {
@ -137,22 +137,47 @@ Components can listen to Dispatchers.
var TodoApp = React.createClass({ var TodoApp = React.createClass({
componentDidMount() { componentDidMount() {
this.token = AppDispatcher.register(function (payload) { this.token = AppDispatcher.register((payload) => {
switch (payload.action) { switch (payload.action) {
case 'tab.change': case 'tab.change':
this.render();
// ... // ...
} }
}); });
},
componentDidUnmount() {
AppDispatcher.unregister(this.token);
} }
}); });
``` ```
Or to Stores.
```js
{
componentDidMount() {
TodoStore.on('change', this.onChange);
},
componentDidUnmount() {
TodoState.removeListener('change', this.onChange);
},
onChange(data) {
// ...
}
}
```
---- ----
### Also see ### Also see
* [Dispatcher API][dispatcher] * [Dispatcher API][dispatcher]
* [React cheatsheet](react.html) * [React cheatsheet](react.html)
* [Dispatcher.js source](https://github.com/facebook/flux/blob/master/src/Dispatcher.js)
* [Flux-todomvc explanation](https://github.com/facebook/flux/tree/master/examples/flux-todomvc)
[dispatcher]: http://facebook.github.io/flux/docs/dispatcher.html [dispatcher]: http://facebook.github.io/flux/docs/dispatcher.html