一、什麼是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-de

　　(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層所以我們還可以進行再次拆分