Fluxの理解が浅いので、頭の中を整理がてらメモ。

1. Flux architecture and design
and implementation examples
Iruca3
Aqutras Inc.

2. What’s Flux?
An architecture of single directional data flow
data-flow programming
or
flow-based programming
https://www.youtube.com/watch?list=PLb0IAmt7-GS188xDYE-u1ShQmFFGbrk0v&v=nYkdrAPrdcw1

3. Flux provides improvements
- Data consistency
- Easier to pinpoint root of a bug
- More meaningful unit tests
2

4. Data consistency
Store component manages all of data.
No other components deal with any data.
3

5. Customer List
Customer Map
Customer Summary
Bad case
Internal DB View Component External DB
Customer
Data
Cached
Customer
Data
Cached
Customer
Data
No consistency
among view components
No consistency
4

6. Internal DB View Component External DB
Like Flux (not flux but having data consistency)
Customer List
Customer Map
Customer Summary
Store Customer
Data
Web API
Action
ex. CLICK, EDIT, ADD, REMOVE
All changes always come
from some action
Data always come from store
External DB or WebAPI
divided from other components
5

7. Flux
Store Customer
Data
Web API
Dispatcher handle actions.
Action provides itself to dispatcher.
Dispatcher
Action
View
ex. Customer List, Customer Map, Customer Summary
Which action
does store want?
Which change events
does view want?
Which elements or data
should redraw?
Where do actions
come from?
6

8. Where do actions come from?
Actions come from View or API.
Web API
View
Action
ex. Update something
ex. Add something
Actions by user interaction
Actions about data changing
7

9. Implementation sample on Action
createMessage: function(text) {
ChatAppDispatcher.handleViewAction({
type: ActionTypes.CREATE_MESSAGE,
text: text
});
var message = MessageStore.getCreatedMessageData(text);
ChatWebAPIUtils.createMessage(message);
}
Calling WebAPI from Action
https://github.com/facebook/flux/tree/master/examples/flux-chat8

10. Implementation sample on WebAPI
getAllMessages: function() {
// simulate retrieving data from a database
var rawMessages = JSON.parse(localStorage.getItem('messages'));
// simulate success callback
ChatServerActionCreators.receiveAll(rawMessages);
}
Generating action from WebAPI
https://github.com/facebook/flux/tree/master/examples/flux-chat9

11. Implementation sample on View
_onKeyDown: function(event) {
if (event.keyCode === ENTER_KEY_CODE) {
var text = this.state.text.trim();
if (text) {
ChatMessageActionCreators.createMessage(text);
}
this.setState({text: ''});
}
}
Generating action from View
https://github.com/facebook/flux/tree/master/examples/flux-chat10

12. Which action does store wants?
Each store registers itself and provides a callback.
Callback is called with action.
Action
http://facebook.github.io/flux/docs/overview.html#content
Dispatcher Store
Store register itself to Dispatcher with callback below:
function (action) {
if ( action == ‘ADD_CUSTOMER’ ) { /* something */ }
}
Preparing
(Register)
DataFlow
ex.
- ADD_CUSTOMER
- RESIZE
- MOUSEOVER
Store can deal with something
when customer data is changed
11

13. More complicated case
Dispatcher
Preparing
(Register)
DataFlow
Dispatcher ProductStore
CustomerStore
SalesStore
CustomerStore register
ProductStore register
SalesStore register
ProductStore
CustomerStore
SalesStore
SOLD
Dispatcher should send SOLD
to all storesWeb API
View
Action
Something is brought and
SOLD action emitted
12
Do something
Do something
Do nothing

14. Implementation sample about
Dispatcher
13
Creating a Dispatcher
http://facebook.github.io/flux/docs/todo-list.html#creating-a-dispatcher
See the document below:

15. Implementation sample on Store
MessageStore.dispatchToken = ChatAppDispatcher.register(function(payload)
{
var action = payload.action;
switch(action.type) {
case ActionTypes.CLICK_THREAD: (...)
case ActionTypes.CREATE_MESSAGE: (...)
case ActionTypes.RECEIVE_RAW_MESSAGES:
_addMessages(action.rawMessages);
ChatAppDispatcher.waitFor([ThreadStore.dispatchToken]);
_markAllInThreadRead(ThreadStore.getCurrentID());
MessageStore.emitChange();
break;
...
Dealing with specified action
https://github.com/facebook/flux/tree/master/examples/flux-chat14
Registering to dispatcher

16. Which change events does view want?
View add event listener to Store.
Store has to implement event emitter.
15
Store View
1. addChangeListener(callback)
Store View
3. this.emit(ON_CHANGE)
2. this.on(ON_CHANGE, callback)
ON_CHANGE is a simple constant string
4. Callback is called

17. Implementation sample on View
componentDidMount: function() {
this._scrollToBottom();
MessageStore.addChangeListener(this._onChange);
ThreadStore.addChangeListener(this._onChange);
}
Registering store change listener
https://github.com/facebook/flux/tree/master/examples/flux-chat16

18. Implementation sample on Store
emitChange: function() {
this.emit(CHANGE_EVENT);
},
addChangeListener: function(callback) {
this.on(CHANGE_EVENT, callback);
}
Registering store change listener
https://github.com/facebook/flux/tree/master/examples/flux-chat17
Event should be fired
on ONLY dispatching
because data flow shows that
input is only Dispatcher.

19. Which elements or data should redraw?
React does very well
if you use props and state correctly.
See the document below:
15
Advanced Performance
http://facebook.github.io/react/docs/advanced-performance.html
Reconciliation
http://facebook.github.io/react/docs/reconciliation.html

20. Flux flow loop
15
Store
Server DBWeb API
Dispatcher
Action
View
Store registers itself
to dispatcher.
View adds event listener
to store.
View creates an action.
Action notify to dispatcher.
Dispatcher handle actions.
Action calls some web api.
Web api creates an action.