深入浅出React+Redux（三：Flux单向数据流，相关代码在github flux分支）

前言

通过上章，我们能感觉到仅仅通过prop和state 管理React大型项目，简直是个巨大，恐怖乃至不可完成的挑战。因为社区和个人喜爱还是推荐Redux做项目的状态管理。但是作为单向数据流鼻祖的Flux，也是读者需要整理下区别的。

（一）前端MVC 框架的缺陷

附上一篇文章（需要翻墙）： 为什么说客户端MVC已死

MVC框架是业界广泛接受的一种前端应用架构类型，它把应用分成三个部分：

• Model （模型）负责管理数据 ，大部分业务逻辑也应该放在 Model 中；
• View （视图）负责渲染用户界面，应该避免在 View 中涉及业务逻辑；
• Controller （控制器）负责接受用户输入 根据用户输入调用对应的 Model 部分逻辑，把产生的数据结果交给 View 部分，让 View 渲染出必要的输出 。

MVC几个部分组成部分和请求的关系图

这种将一个应用划分为多个组件，就是“分而治之”。但是现实项目足够大后，实际情况是什么样子的呢。如下图

实际上。这是客户端区分服务器的地方，在服务器mvc依旧是霸主地位，它的一个完整请求是以Controller中的request发起，response结束（其实本身数据流也类似单向）·。

但是客户端，总是允许View 和Model 可以直接通信。就会造成上面图中的情况。

（二）FlUX基本概念

Facebook使用 Flux 框架来代替原有的 MVC 框架，他们提出的 Flux 框架大致结构如下图。

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

1. Dispatcher ，处理动作分发，维持 Store 之间的依赖关系；
2. Store ，负责存储数据和处理数据相关逻辑 ；
3. Action ，驱动 Dispatcher 的 JavaScript 对象；
4. View ，视图部分，负责显示用户界面。

Flux和MVC对比

Flux 的 Dispatcher 相当于 MVC 的Controller, Flux 的 Store 相当于 MVC 的 Model, Flux 的 View 当然就对应 MVC 的 View了，至于多出来的这个 Action ，可以理解为对应给 MVC 框架的用户请求 。

当需要扩充应用所能处理的“请求”时， MVC 方法就需要增加新的 Controller，而对于 Flux 则只是增加新的 Action 。

（三）FlUX 简单demo

安装依赖

$ yarn add flux --dev

（1）Dispatcher

首先，我们要创造一个 Dispatcher，

在src/appDispatcher/index.js。创造这个唯一 的Dispatcher 对象

/**
 * @component appDispatcher
 * @description 全局Dispatcher
 * @time 2018/1/16
 * @author jokerXu
 */
import {Dispatcher} from 'flux';

export default new Dispatcher();

Dispatcher 存在的作用，就是用来派发 action ，接下来我们就来定义应用中涉及的 action。

（2）Action

action 顾名思义代表一个“动作”，不过这个动作只是一个普通的 JavaScript 对象，代表一个动作的纯数据，类似于 DOM API 中的事件（ event ） 。 甚至，和事件相比， action其实还是更加纯粹的数据对象，因为事件往往还包含一些方法，比如点击事件就有
preventDefault 方法，但是 action 对象不自带方法，就是纯粹的数据 。

作为管理， action 对象必须有一个名为 type 的字段，代表这个 action 对象的类型，
为了记录日志和 debug 方便，这个 type 应该是字符串类型 。

定义 action 通常需要两个文件，一个定义 action 的类型，一个定义 action 的构造函
数（也称为 action creator ） 。 分成两个文件的主要原因是在 Store 中会根据 action 类型做
不同操作，也就有单独导人 action 类型的需要 。

首先在src/actionTypes/demo.js中定义类型。

/**
 * @component actionTypes
 * @description demo动作类型
 * @time 2018/1/22
 * @author ***
 */

export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';

上面代码表示，执行两次操作，一个事点击”+”，一个事点击”-“。

然后在src/actions/demo.js中定义动作

/**
 * @component actions
 * @description