Add flux
This commit is contained in:
parent
226cd6c430
commit
393d6d3a50
13
es6.md
13
es6.md
|
@ -105,6 +105,9 @@ import Express from 'express';
|
|||
|
||||
// aka: indent = require('...').indent
|
||||
import { indent } from 'helpers';
|
||||
|
||||
// aka: indent = require('...').indentSpaces
|
||||
import { indentSpaces as indent } from 'helpers';
|
||||
```
|
||||
|
||||
### Module exports
|
||||
|
@ -199,6 +202,16 @@ class Circle extends Shape {
|
|||
}
|
||||
```
|
||||
|
||||
### [For..of iteration](http://babeljs.io/docs/learn-es6/#iterators-for-of)
|
||||
|
||||
```
|
||||
for (var i of iterable) {
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
Works for Arrays and iterables (eg, generators).
|
||||
|
||||
## Experimental
|
||||
|
||||
Available via 6to5's experimental mode
|
||||
|
|
|
@ -0,0 +1,115 @@
|
|||
---
|
||||
title: Flux
|
||||
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)`).
|
||||
|
||||
```js
|
||||
var Dispatcher = require('flux').Dispatcher;
|
||||
|
||||
d = new Dispatcher()
|
||||
|
||||
// send a message
|
||||
d.dispatch({ a: 'aaa', ... };
|
||||
|
||||
// receive
|
||||
token = d.register(function (payload) {
|
||||
payload.a === 'aaa'
|
||||
})
|
||||
```
|
||||
|
||||
### Ensuring order
|
||||
|
||||
You can ensure one listener is fired after another using `.waitFor()`.
|
||||
|
||||
```js
|
||||
token1 = d.register(...);
|
||||
|
||||
token2 = d.register(function (payload) {
|
||||
// ensure receiver 1 is fired before this
|
||||
// can only be used within register(...)
|
||||
d.waitFor([ token1 ])
|
||||
})
|
||||
```
|
||||
|
||||
### Subclassing
|
||||
|
||||
`Object.assign` is the preferred way to subclass Dispatcher (think `$.extend`).
|
||||
|
||||
You can make *action creators*, which are shortcuts for `dispatch()`.
|
||||
|
||||
```js
|
||||
var Dispatcher = require('flux').Dispatcher;
|
||||
var assign = require('object-assign');
|
||||
|
||||
var AppDispatcher = assign({}, Dispatcher.prototype, {
|
||||
|
||||
// shortcut for dispatching
|
||||
handleViewAction: function (action) {
|
||||
this.dispatch({
|
||||
source: 'VIEW_ACTION',
|
||||
action: action
|
||||
})
|
||||
}
|
||||
|
||||
})
|
||||
```
|
||||
|
||||
## Stores
|
||||
|
||||
Stores are just like objects.
|
||||
|
||||
```js
|
||||
var TodoStore = { todos: {} };
|
||||
```
|
||||
|
||||
## Stores and dispatchers
|
||||
|
||||
Make Dispatcher and Stores:
|
||||
|
||||
```js
|
||||
d = new Dispatcher();
|
||||
TabStore = { tab: 'home' };
|
||||
```
|
||||
|
||||
Dispatch events to alter the store:
|
||||
|
||||
```js
|
||||
d.dispatch({ event: 'changeTab', tab: 'timeline' });
|
||||
|
||||
d.register(function (data) {
|
||||
if (data.event === 'changeTab') {
|
||||
TabStore.tab = data.tab;
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
## With Components
|
||||
|
||||
Components can listen to Dispatchers.
|
||||
|
||||
```js
|
||||
var TodoApp = React.createClass({
|
||||
componentDidMount: function () {
|
||||
AppDispatcher.register(...);
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### Also see
|
||||
|
||||
* [Dispatcher API](http://facebook.github.io/flux/docs/dispatcher.html#content)
|
||||
* [React](react.html)
|
Loading…
Reference in New Issue