flux架構的詳細介紹和使用！

結構分爲四個

視圖 view
動做 action
派發器 dispatcher
數據商店 store

流程:
用戶操做視圖 視圖(view)發送動做(action)到派發器(dispatcher)
由派發器(dispatcher) 對動做類型(action.type)作判斷
而後調用數據商店(store)的相應方法來操做數據模型(store.state)
最後由數據商店(store)通知視圖(view)進行更新

在完整的案例中
action只是起到傳遞數據的做用 本質就是一個對象而已

action最好用專門的工廠函數來進行建立(actions)

在視圖中 經過調用action工廠函數來生產aciton 再由工廠函數將action發送給派發器

同時 在開發時 應將視圖部分進行拆分
拆分紅 : 容器組件和UI組件
UI組件純粹負責顯示數據
容器組件負責處理業務邏輯

由容器組件提供更新視圖的方法
而後在組件加載完成時 將更新視圖方法提供給store

store應將其綁定到更新視圖專用的事件上

例如:
let EventEmiiter = require("events").EventEmiiter

let store = {
...EventEmiiter.prototype,
subscribe(cb){
this.on("update",cb)
},
setUsername(name){
this.state.name = name

this.emit("update") //通知視圖進行更新
},
unSubscribe(cb){ //注意: 在組件的卸載期 記得將更新視圖函數進行解綁
this.removeListener("update",cb)
}
}

 

flux重構步驟：

1 將視圖部分的頁面組件拆分紅容器組件和UI組件

UI組件全部數據(點擊等各類事件所調用的函數)均來自於props

容器組件可繼承 封裝好的 Controller 以自動實現綁定更新視圖方法及卸載組件時自動解綁

2 建立action工廠函數
定義一個初始化 的action工廠函數
請求須要的數據
將拿到的數據封裝到 action中
將action發送到dispatcher (經過.dispatch()方法)

3 在派發器中 配置對應的case
而且從action中拿到數據後 設置到對應store中便可

4 在容器組件的加載完成的生命週期函數中 調用上述步驟封裝好的action工廠函數

5 路由部分引入的組件 注意須要切換成 容器組件