如何在使用 Flux 时使 ReactJS 更好地发挥作用.docx

31.        ） 

32.    } 

33.}） 

34.ReactDOM.render（ < TODO /> , document.getElementById（"example"）） 

可以看到，如果同级组件想要彼此通信，就需要将数据传递到它们的父组件。

像是例子中的TodoForm想告知TodoList有新的item被添加了。

这就是为什么Application组件传递回调方法handleTodoSubmit。

所以在TodoForm提交时它通过回调调用Application组件的handleTodoSubmit方法。

而handleTodoSubmit正在更新Application的状态，这使得通过更新TodoItem和TodoHeader来重新渲染Application组件。

在例子中，只有1个层级，但在实时情况下，可能有多个层级，而最内层的子层想要更新其他层的最内层子层。

这就需要传递的回调方法覆盖所有层级。

但这会使其不易维护，也大大降低可读性，这也使React的优势大打折扣。

现在试试相同的应用使用Flux

正如我们所看到的，Flux有4层。

根据它的这个结构编写一个代码。

Action

Actions被Views调用。

如果View要在Store中更新数据，则View会告知Action这个变更。

这里创建了AppAction。

在这里，只有一个action，即addItem。

当要添加一个新的todoItem时，这将会被调用。

这个action进一步调用dispatcher（AppDispatcher）的handleViewAction。

1.var AppDispatcher = require（'../dispatchers/app-dispatcher'）; 

2.var AppAction = { 

3.    addItem:

 function（item） { 

4.        AppDispatcher.handleViewAction（{ 

5.            actionType:

 'ADD_ITEM', 

6.            item:

 item 

7.        }） 

8.    } 

9.} 

Dispatcher

在AppDispatcher中，定义了由AppLIcation调用的handleViewAction。

在handleViewAction中，action会被传递用做告知执行什么action。

handleViewAction里面有一个this.dispatch，这是一个Dispatcher的预定义方法。

这个方法会在内部调用Store。

1.var Dispatcher = require（"flux"）.Dispatcher;  

2.var assign = Object.assign;  

3.var AppDispatcher = assign（new Dispatcher（）, {  

4.handleViewAction:

 function（action） {  

5.console.log（'action', action）  

6.this.dispatch（{  

7.source:

 'VIEW_ACTION',  

8.action:

 action  

9.}）  

10.}  

11.}）; 

Store（存储）

接下来我们一个个地讨论Store的方法。

dispatcherIndex–由于AppDispatcher.register，执行从这里开始。

每当调用Dispatcher的dispatch方法时，它会在所有定义AppDispatcher.register的地方传递action的信息。

在例子中，只有一个action——“ADD_ITEM”，但在大多数情况下，将有多个action。

因此，需要首先定义action的类型，基于此，还会执行actions并调用emit方法。

这里，在dispatcherIndex方法中调用addTodoItem方法，之后是调用emitChange。

addTodoItem–在这个方法中，除了将新的todoitem添加到到todoItems数组不会做其它事情。

emitChange–在emitChange中，使用this.emit（CHANGE_EVENT）方法可以允许CHANGE_EVENT的监听者知道某些东西发生了变化。

addListener–Views用这个方法来监听CHANGE_EVENT。

removeListener–Views用这个方法来移除监听器。

getTodoItems–这个方法会返回所有的todos。

它会被TodoList组件调用。

getTodoCount–这个方法会返回所有todos的计数。

它会被TodoCount组件调用。

component.

1.var AppDispatcher = require（'../dispatchers/app-dispatcher'）; 

2.var assign = Object.assign; 

3.var EventEmitter = require（'events'）.EventEmitter; 

4.var CHANGE_EVENT = 'change'; 

5.var todoItems = [ 

6.  { id:

 1, user:

 "Adam", task:

 "This is task1"}, 

7.  { id:

 2, user:

 "Ricky", task:

 "This is task2"} 

8.]; 

9.var AppStore = assign（EventEmitter.prototype, { 

10.    emitChange:

 function（） { 

11.        this.emit（CHANGE_EVENT） 

12.    }, 

13.    addListener:

 function（callback） { 

14.        this.on（CHANGE_EVENT, callback） 

15.    }, 

16.    removeChangeListener:

 function（callback） { 

17.        this.removeListener（CHANGE_EVENT, callback） 

18.    }, 

19.    dispatcherIndex:

 AppDispatcher.register（function（payload） { 

20.        var action = payload.action; 

21.        if （action.actionType == "ADD_ITEM"） { 

22.            this.addTodoItem（payload.action.item）; 

23.        } 

24.        AppStore.emitChange（）; 

25.        return true; 

26.    }）, 

27.    getTodoItems:

 function（） { 

28.        return todoItems; 

29.    }, 

30.    getTodoCount:

 function（） { 

31.        return todoItems.length; 

32.    }, 

33.    addTodoItem:

 function（todo） { 

34.        todoItems.push（todo）; 

35.    } 

36.}） 

View（视图）/Components（组件）

在TodoTask中，与上面的例子一样没有改变任何东西。

1.var TodoTask = React.createClass（{ 

2.    render:

 function（） { 

3.        return （  

4.          

5.        ） 

6.    } 

7.}） 

在TodoList组件中，通过在getInitialState中调用AppStore.getTodoItems直接从Store提取todoitems。

现在的问题是，“这个组件怎样才能知道新的todoitem是什么时候添加的?

”

答案就在componentWillMount中。

在这个方法中，调用AppStore.addChangeListener，它监听在Store的addChangeListener中定义的事件。

如果有任何更改，那么它将调用_onChange来重置状态。

1.var TodoList = React.createClass（{ 

2.    getInitialState:

 function（） { 

3.        return { todoItems:

 AppStore.getTodoItems（） } 

4.    }, 

5.    componentWillMount:

 function（） { 

6.        AppStore.addChange