Update flux
This commit is contained in:
parent
fce6eed68e
commit
6b6792994a
39
flux.md
39
flux.md
|
@ -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
|
Loading…
Reference in New Issue