1.簡(jiǎn)介
Flux是一種用于構(gòu)建復(fù)雜用戶界面的應(yīng)用程序架構(gòu)女揭。它避開(kāi)MVC而支持單向數(shù)據(jù)流。這意味著數(shù)據(jù)通過(guò)一個(gè)操作（actions）進(jìn)入栏饮，然后通過(guò)其狀態(tài)管理器（store）向外流動(dòng)吧兔，最后流向視圖（view）。然后抡爹，視圖可以通過(guò)響應(yīng)用戶輸入調(diào)用其他操作來(lái)重新啟動(dòng)流掩驱。
2.安裝使用
npm install --save ?alt
3.文件夾結(jié)構(gòu)
your_project
|--actions/
|???? |--MyActions.js
|--stores/
|???? |--MyStore.js
|--components/
|???? |--MyComponent.jsx
|--alt.js
|--app.js
4.應(yīng)用步驟
簡(jiǎn)單來(lái)講就是4步
《1.創(chuàng)建view，并且在view里監(jiān)聽(tīng)store的變化冬竟；
《2.在view里欧穴，調(diào)用相應(yīng)actions，在actions里處理相應(yīng)邏輯泵殴，使用dispatcher把結(jié)果發(fā)送給store涮帘；
《3.在store里，做相應(yīng)處理笑诅，儲(chǔ)存數(shù)據(jù)调缨；
《4.view監(jiān)聽(tīng)到store有變化，調(diào)用this.setState()或this.forceUpdate()觸發(fā)render()吆你，在render()里根據(jù)不同的state渲染不同的界面弦叶；
5.具體過(guò)程
《1.創(chuàng)建 actions：通過(guò)創(chuàng)建一個(gè)類來(lái)創(chuàng)建一個(gè)action，該類的原型方法將成為動(dòng)作妇多。類語(yǔ)法是完全可選的伤哺，可以使用常規(guī)構(gòu)造函數(shù)和原型。在這些操作中，可以使用this.dispatch通過(guò)Dispatcher將有效負(fù)載分配到store立莉。最后绢彤，確保使用導(dǎo)出已創(chuàng)建的操作alt.createActions；
var alt = require('../alt');
class LocationActions {
?????updateLocations(locations) {?
?????????return locations;?
?????}
}
module.exports = alt.createActions(LocationActions);
《2.創(chuàng)建store：store數(shù)據(jù)倉(cāng)庫(kù)蜓耻。這是應(yīng)用程序狀態(tài)的特定部分的唯一真實(shí)來(lái)源茫舶。與actions類似，為store創(chuàng)建一個(gè)類刹淌。
class LocationStore {?
?????constructor() {?
? ??????????this.locations = [];?
?????????????this.bindListeners({
?????????????????????handleUpdateLocations:LocationActions.UPDATE_LOCATIONS饶氏；
????????????});
?????}
handleUpdateLocations(locations) { this.locations = locations; }
}
module.exports = alt.createStore(LocationStore, 'LocationStore');
《3.創(chuàng)建view：監(jiān)聽(tīng)store并從中獲取數(shù)據(jù)
將狀態(tài)從store中取出很簡(jiǎn)單，每個(gè)alt的store都有一個(gè)返回其狀態(tài)的方法芦鳍。返回時(shí)嚷往，狀態(tài)將作為值復(fù)制，我們可以使用React 的getInitialState來(lái)重置store的狀態(tài)并設(shè)置初始狀態(tài)柠衅；
getInitialState() {?
?????return LocationStore.getState();
},
但是，一旦store中的狀態(tài)更新籍琳，我們就會(huì)想要監(jiān)聽(tīng)更改菲宴。在react組件中，componentDidMount可以使用添加事件監(jiān)聽(tīng)處理程序LocationStore.listen趋急，同時(shí)可使用componentWillUnmount() 來(lái)刪除事件監(jiān)聽(tīng)器
componentDidMount() {?
?????LocationStore.listen(this.onChange);
},
componentWillUnmount() {
?????LocationStore.unlisten(this.onChange);
},
