react-flux

1、flux存在的意义

首先做一个对比，react是用来替换jquery的，而flux则是以替换backbone.js等mvc框架为目的的。
mvc(model,view,controller)的世界里，react相当与mvc的view层，只负责页面的渲染，一旦涉及数据管理的部分，还是要交给 model层和controller层。
flux不是一个mvc框架，事实上flux认为mvc存在很大的问题，它推翻了mvc框架，用一个新的思维来管理数据的流转。

2、flux的运作流程

Action --> Dispatcher --> Store --> View

• Dispatcher ,处理动作的分发，维持Store之间的依赖关系
• Store，负责存储数据和处理数据相关的逻辑
• Action，驱动Dispatcher 的javaScript对象
• View，视图部分，负责显示用户界面

3、flux的使用方法

要想使用flux，必须先通过命令，在项目目录安装flux

npm install --save flux

1.Dispatcher

首先我们要创建一个Dispatcher ，几乎所有应用都只需要拥有一个Dispatcher。在src目录下创建一个AppDispatcher，代码如下：

import {Dispatcher} from 'flux';

export default new Dispatcher();

引入flux中的Dispatcher类，创造一个新的对象，作为这个文件的默认输出。在其他代码中，将会引用这个全局唯一的Dispatcher对象。
Dispatcher存在的作用，就是用来派发action。

2.action

action故名思意代表一个 动作，不过这个动作只是一个普通的JavaScript对象，代表一个动作的纯数据。
作为管理，action必须有一个名为type的字段，代表这个action对象的类型，为了记录日志和debug方便，这个type应该是字符串类型。
定义action通常需要两个文件，一个定义action的类型，一个定义action的构造函数，分成两个文件的主要原因是在Store中会分局action的类型做不同的操作，也就有单独导入action 类型的需要。
在src目录下创建一个ActionTypes.js文件，定义action的类型，代码如下：

export const INCREMENT = 'increment';
export const DECREMENT = 'decrement';

在这个例子中，用户只能做两个操作，一个是点击 + 按钮，一个是点击 - 按钮，所以我们只有两个action类型INCREMENT 和 DECREMENT
现在在 src/Actions.js 中定义action构造函数

import * as ActionTypes from './ActionTypes.js';
import AppDispatcher from './AppDispatcher.js';

export const increment = (counterCaption) => {
	AppDispatcher.dispatcher({
		type: ActionTypes.INCREMENT,
		counterCaption: counterCaption
	})
}

export const decrement = (counterCaption) => {
	AppDispatcher.dispatcher({
		type: ActionTypes.DECREMENT,
		counterCaption: counterCaption
	})
}

虽然处于业界习惯，这个文件被命名为Action.js，但是要注意里面定义的不是action对象本身，而是能够产生派发action对象的函数。
在action.js中，引入了ActionType 和 AppSispatcher，看的出来是要直接引用Dispatcher。
这个Actions.js导出了两个构造函数，increment和decrement，当这两个函数被调用的时候，创造了对应的action对象，并立即通过AppDispatcher.dispatcher函数派发出去。
派发出去的action对象最后怎么样了？在下面的Store里面可以看到

3.Store

一个Store也是一个对象，这个对象存储应用状态，同时还要接手Dispatcher派发的动作，根据动作来决定是否要更新应用状态。
接下来开始创建store文件，因为使用flux后，代码文件会明显增多，导致src目录看起来特别的乱，所以在src目录下创建一个stores文件夹，在这个文件夹里管理所有的store代码。
下面创建两个Store，一个是为 Counter组件服务的ConterStore，一个是为总数服务的SummaryStore
我们首先添加CounterStore，放在 CounterStorem文件中

const counterValues = {
	'First': 0,
	'Second': 10,
	'Third': 30
};

const CounterStore = Object.assign({},EventEmitter.prototype,{
	getConterValues: function() {
		return counterValues;
	},
	emitChange: function() {
		this.emit(CHANGE_EVENT);
	},
	addChangeListener: function(callback) {
		this.on(CHANGE_EVENT,callback)
	},
	removeChangeListener: function(callback) {
		this.removeListener(CHANGE_EVENT,callback);
	}
})