当应用复杂程度增加时，state会变得越来越复杂，只用React开发将会变得力不从心。不仅仅是view层的内容，还有其他的比如说数据流向、state管理、路由解决方案等。React的开发者推出了Flux机构及其官方实现。同时业内也推出了很多其他的Flux实现，其中又以Redux这个库为翘楚。
Flux是Facebook官方提出的一套前端应用架构模式。核心是单向数据流。它更像一种软件开发模式，而不是具体的一个框架，所以基于Flux存在很多的实现。
单向数据流
单向数据流是Flux的核心。读者可能接触过MVC这种软件架构，它的数据流动是双向的。controller是model和view之间交互的媒介，它要处理view的交互操作，通知model进行更新，同时在操作成功后通知view更新。这种双向的模式在model和view的对应关系变得越来越复杂的时候，就会遇到很多困难，难以维护和调试。-
Flux流程
Flux单向数据流 Action：是用来描述单个行为的对象，比如说创建文章的Action可以是{actionName: 'createPost', data: {'content': 'new stuff'}}。
Dispatcher：Dispatcher是信息分发中心，是Action和Store的连接中心，Dispatcher可以使用dispatch方法执行一个Action，并且可以用register方法注册回调，在回调方法中处理Store的内容。
Store：Store处理完毕后，它可以使用emit方法向其他地方发送命名为change的广播，告知他妈Store已经发生变更。
View：View层监着change事件，一旦change事件被触发，那么该层可以调用setState来更新整个UI。
Flux架构示例
现在用Flux架构完成一个Todo代办事项的小程序。
- 项目结构
components/
--Todo.jsx（程序框架）
--List.jsx（代办事项列表）
--CreateButton.jsx（新建代办事项按钮）
actions/
--TodoAction.js（程序中所有的action）
dispatcher/
--AppDispatcher.js（程序中的总调度）
stores
--TodoStore.js（管理程序中的数据的存放）
- Dispatcher和action
可以把Dispatcher看作是一个调度中心，把action看作是应用程序的各种交互动作，而每个动作产生后都会交给Dispatcher这个调度中心来处理。Dispatcher有Facebook的官方实现，称为Flux Dispathcer：
// dispatcher/AppDispatcher.js
// 实例化一个Dispatcher并返回
import { Dispatcher } from 'flux';
export default new Dispatcher();
新建或删除一个Todo都会产生一个action：
// Todo.jsx
...
import TodoAction from '.../actions/TodoAction';
...
class Todo extends React.Component {
constructor(props) {
this.createTodo = this.createTodo.bind(this);
this.deleteTodo = this.deleteTodo.bind(this);
}
createTodo() {
// 创建Todo的事件回调
TodoAction.create({ id: uuid.v4(), content: '3rd stuff' });
}
deleteTodo(id) {
// 删除Todo的事件回调
TodoAction.delete(id);
}
render() {
return (
<div>
<List items={this.state.todos} onDelete={this.deleteTodo} />
<CreateButton onClick={this.createTodo} />
</div>
);
}
}
export default Todo;
当按钮被单击时，一个特殊的action会被触发，并交给Dispatcher处理：
// ./actions/TodoAction
import AppDispatcher from '../dispatcher/AppDispatcher';
const TodoAction = {
create(todo) {
AppDispatcher.dispatch({
actionType: 'CREATE_TODO',
todo
});
},
delete(id) {
AppDispatcher.dispatch({
actionType: 'DELETE_TODO',
id
});
}
};
export default TodoAction;
action只不过是一个普通的JavaScript Object，用一个actionType字段表明用途，另外一个字段表明它传递的信息。
在这里，dispatch的是一个对象，但是当应用复杂程度不断增加的时候，就可能在不同的view中dispatch相同的对象，而且必须有着相同的actionType，还要记牢数据的格式，这都不利于代码复用，所以Flux提出了一个新的概念，称为action creator，其实就是把这些数据抽象到一些函数中。就像在TodoAction里面写的一样：
// 在TodoAction中定义的Action Creators
const TodoAction = {
// 用一个函数包裹AppDispatcher.dispatch方法
actionCreator
create(todo) {
AppDispatcher.dispatch({
actionType: 'CREATE_TODO',
todo
});
},
...
};
- store和Dispatcher
store就是整个程序所需要的数据。store是单例的。现在来创建TodoStore，它存放了所有的文章列表。不同类型的数据应该创建多个store，假如程序里还存在用户信息，就应该再创建UserStore.js
// ./stores/TodoStore.js
// 单件类型的一个JavaScript Object
const TodoStore = {
// 存放所有文章的列表，里面有两条默认的数据
todos: [{ id: uuid.v4(), content: 'first one'}, { id: uuid.v4(), content: '2nd one '}],
getAll() {
return this.todos;
},
addTodo(todo) {
this.props.push(todo);
},
deleteTodo(id) {
this.todos = this.todos.filter(item => item.id !== id);
}
};
Dispatcher的另外一个API方法就是register，它可以注册不同事件的处理回调，并且在回调中队store进行处理。
// ./stores/TodoStore.js
...
AppDispatcher.register((action) = > {
switch(action.actionType) {
case 'CREATE_TODO':
TodoStore.addTodo(action.todo);
break;
case 'DELETE_TODO':
TodoStore.deleteTodo(action.id);
break;
default:
// 默认操作
}
});
每个action对应dispatch传过来的一个action，包含actionType和对应的数据。store是更新数据的唯一场所，这是Flux的重要概念。actoin和Dispatcher并不和数据打交道。
- store和view
现在，store已经发生变化，是时候由它来通知view，让view展示新的数据了。我们借助Node.js标准库EventEmitter，让store加上事件订阅特性，就可以把store和view联系在一起了：
npm install events -save
// 使用Object.assign方法把EventEmitter.prototype挂载到TodoStore上
const TodoStore = Object.assign({}, EventEmitter.prototype, {
...
emitChange() {
this.emit('change');
},
addChangeListener(callback) {
this.on('change', callback);
},
removeChangeListener(callback) {
this.removeListener('change', callback);
}
});
AppDispatcher.register((action) => {
switch(action.actionType) {
case 'CREATE_TODO':
TodoStore.addTodo(action.todo);
// TodoStore已经更改，发送一个广播
TodoStore.emitChange();
break;
case 'DELETE_TODO':
TodoStore.deleteTodo(action.id);
TodoStore.emitChange();
break;
default:
// 默认操作
}
});
export default TodoStore;
store的变化已经使用emit方法广播出去，那么view层现在要做的就是接收这个变化的信号，同时更新UI。首先要在组件刚初始化的时候监听store的change事件，这样在store触发这个事件的时候，就会触发回调。那么，我们回到Todo.jsx组件中，在它的生命周期函数中加上这些事件监听：
// Todo.jsx
class Todo extends React.Component {
constructor(props) {
super(props);
this.state = {
todos: TodoStore.getAll()
};
this.createTodo = this.createTodo.bind(this);
this.deleteTodo = this.deleteTodo.bind(this);
this.onChange = this.onChange.bind(this);
}
componentDidMount() {
// 初始化的时候在store中注册这个事件
TodoStore.addChangeListener(this.onChange);
}
componentWillUnmount() {
// 组件卸载的时候记得要清除这个事件绑定
TodoStore.removeChangeListener(this.onChange);
}
onChange() {
// store改变后触发的回到，用setState来更新整个UI
this.setState({
todos: TodoStore.getAll()
});
}
...
}
到现在已经完成了Flux的整个流程。当用户在view上有一个交互时，Dispatcher广播（dispatch方法）一个action（就是一个Object对象，里面包含action的类型和要传递的数据），在整个程序的总调度台（Dispatcher）里注册了各种类型的action，在对应的类型中，store（也是一个Object对象，实现了订阅-发布的功能）对这个action进行响应，对数据做响应的处理，然后触发一个自定义事件，同时在view上注册这个store的事件回调，响应这个事件并重新渲染界面。
