一、什么是Flux
Flux 是一種架構思想，專門解決軟件的結構問題。它跟MVC 架構是同一類東西，但是更加簡單和清晰。
二、flux的基本概念
(1) 、Flux由4部分組成
1、View：視圖層
2、Action(動作)：視圖發出的消息(比如mouseClick)
3、Dispatcher( 派發器 ) ：用來接收Action、執行回調函數
4、Store(數據層)：用來存放應用的狀態，一旦發生改動，就提醒View更新頁面
(2)、Flux的流程
1、用戶訪問View
2、View發送用戶的Action
3、Dispatcher收到Action,要求Store進行相對應的更新
4、Store更新后，發出一個“onchange”事件
5、view接受到“onchange”事件后，更新頁面
三、store代碼流程
四、組件中調用Store
import Store from "./store";
class App extends Component{
constructor(props){
super(props);
//調用公共數據
this.state = Store.getState();
}
五、創建Dispatcher.js
安裝flux:cnpm install flux --save-dev
(1)在View層的方法中創建Action並傳遞給dispatcher 方法: dispatcher.dispatch(Action)
(2)判斷類型Action的type是否相等，如果相等則調用Store的方法進行修改數據(注意：修改數據的方法只能在Store中使用，這樣的方式很類似於后端的MVC模式)
六、監聽數據變化
數據發生改變View層頁面進行更新
(1)在Store中有提供數據改變的函數，在數據改變的函數中調用事件觸發this.on("事件名稱")
(2)同時在Store中在創建一個函數，函數內部進行事件監聽供View層調用，當事件觸發時會調用這個函數，然后我們this.setState進行數據的改變
Store中的事件監聽和觸發
組件中調用事件監聽的方法用於改變數據
如果還想細化代碼結構我們還可以將Action分離出去(嘗試一下)
在項目中Store和dispatcher可以有多個，非常靈活
除此之外我們的View層既有view層又有controller層所以我們還可以進行再次拆分