Flux

前言

React 本身只涉及UI层，如果搭建大型应用，必须搭配一个前端框架。也就是说，你至少要学两样东西，才能基本满足需要：React + 前端框架。

Facebook官方使用的是 Flux 框架。本文就介绍如何在 React 的基础上，使用 Flux 组织代码和安排内部逻辑，使得你的应用更易于开发和维护。

1. 什么是Flux

简单说，Flux 是一种架构思想，专门解决软件的结构问题。它跟MVC 架构是同一类东西，但是更加简单和清晰。

Flux存在多种实现（至少15种），本文采用的是Facebook官方实现。

2. 基本概念

首先，Flux将一个应用分成四个部分。

View： 视图层
Action（动作）：视图层发出的消息（比如mouseClick）
Dispatcher（派发器）：用来接收Actions、执行回调函数
Store（数据层）：用来存放应用的状态，一旦发生变动，就提醒Views要更新页面

Flux 的最大特点，就是数据的”单向流动”。

1.  用户访问 View2.  View 发出用户的 Action3.  Dispatcher 收到 Action，要求 Store 进行相应的更新4.  Store 更新后，发出一个"change"事件5.  View 收到"change"事件后，更新页面

上面过程中，数据总是”单向流动”，任何相邻的部分都不会发生数据的”双向流动”。这保证了流程的清晰。

3. View

Demo 的首页index.jsx ，你会看到只加载了一个组件。

上面代码中，你可能注意到了，组件的名字不是 MyButton，而是 MyButtonController。这是为什么？
这里，我采用的是 React 的 controller view 模式。”controller view”组件只用来保存状态，然后将其转发给子组件。MyButtonController的源码很简单。

上面代码中，MyButtonController将参数传给子组件MyButton。后者的源码甚至更简单。

上面代码中，你可以看到MyButton是一个纯组件（即不含有任何状态），从而方便了测试和复用。这就是”controll view”模式的最大优点。
MyButton只有一个逻辑，就是一旦用户点击，就调用this.createNewItem 方法，向Dispatcher发出一个Action。

上面代码中，调用createNewItem方法，会触发名为addNewItem的Action。

4. Action

每个Action都是一个对象，包含一个actionType属性（说明动作的类型）和一些其他属性（用来传递数据）。
在这个Demo里面，ButtonActions 对象用于存放所有的Action。

上面代码中，ButtonActions.addNewItem方法使用AppDispatcher，把动作ADD_NEW_ITEM派发到Store。

5. Dispatcher

Dispatcher 的作用是将 Action 派发到 Store、。你可以把它看作一个路由器，负责在 View 和 Store 之间，建立 Action 的正确传递路线。注意，Dispatcher 只能有一个，而且是全局的。
Facebook官方的 Dispatcher 实现输出一个类，你要写一个AppDispatcher.js，生成 Dispatcher 实例。

AppDispatcher.register()方法用来登记各种Action的回调函数。

上面代码中，Dispatcher收到ADD_NEW_ITEM动作，就会执行回调函数，对ListStore进行操作。
记住，Dispatcher 只用来派发 Action，不应该有其他逻辑。

6. Store

Store 保存整个应用的状态。它的角色有点像 MVC 架构之中的Model 。
在我们的 Demo 中，有一个ListStore，所有数据都存放在那里。

上面代码中，ListStore.items用来保存条目，ListStore.getAll()用来读取所有条目，ListStore.emitChange()用来发出一个”change”事件。
由于 Store 需要在变动后向 View 发送”change”事件，因此它必须实现事件接口。