數據流架構學習筆記(一)-Flux

由iOS原生開發轉到React Native開發，再接着慢慢開始學習前端開發，真心以爲搞技術太難了這句話太正確了。當前正在開發的項目中使用了Vue+Vuex+Electron來實現桌面應用開發，在學習了Vuex以後，決定對以前學的各類數據流管理架構作一個系統的總結，因此接下來我還會總結
數據流架構學習筆記(二)-Redux
數據流架構學習筆記(三)-Vuex
數據流架構學習筆記(一)-Flux 是此次系統總結的第一篇筆記，都是一些本身的學習和總結，權當學習參考。

Flux是什麼？

Flux是Facebook官方提出一種架構思想，他的出現一樣也是爲了解決實際項目中軟件結構的問題，若是你瞭解過MVC，MVVM之類的東西，其實就應該知道這是同樣的東西，他們是一種思想，爲了讓你的應用可以更加合理的工做和運行，具體到如何應用在你的項目中，經過代碼和一些工具能夠仁者見仁、智者見智的使用。

Flux如何工做

一個 Flux 應用主要包含四個部分：

• the dispatcher: 處理動做分發，而且向註冊的回調函數廣播payloads，維護 Store 之間的依賴關係
• the stores: 應用程序狀態的容器，而且含有註冊到Dispatcher的回調函數，數據和邏輯部分
• the views: 視圖組件，這一層能夠看做controller-views，做爲視圖同時響應用戶交互
• the actions: 提供經過具體行爲使用dispatcher 傳遞數據給 store，是一些使用Dispatcher傳遞數據的具體方法集合

Flux 的核心單向數據流是這樣運做的：

View -> Action -> Dispatcher -> Store -> View複製代碼

更多時候 View 會經過用戶交互觸發 Action，因此一個簡單完整的數據流相似這樣：

假設如今在項目中，Action模塊、Stroe模塊、View模塊等都已創建成功，Dispatcher來自官方Flux庫，以從頁面登陸的例子進行一次Flux流程說明，流程以下：

1. 頁面點擊登陸按鈕，View觸發點擊動做，調用Action中的網絡請求封裝函數；
2. Action調用網絡庫相關API，併成功返回用戶登陸成功參數，或返回失敗錯誤。
3. 在成功返回的callback中經過Dispatcher分發用戶信息Payload至Store更改數據並存儲新數據中。
4. store經過前期已註冊的對應通知及emit()將最新的數據分發出去，頁面監聽到數據變化，從而更新頁面數據，從新渲染頁面。

實例應用

由於工做偏向React Native，這裏以登陸流程中部分React Native代碼展現如何將Flux應用到React Native開發中進行數據管理,（因爲代碼時間較久，存在一些不合理之處請忽略，但不影響Flux數據流的理解）：

視圖層View：

登陸頁：

...
_login(userName, passWord) {
        LoginActions.login({
            username: userName,
            password: passWord,
            ...
        }, (response) => {
            this.props.navigator.resetTo({comp:MainContainer});
        }, (error) => {
            Alert.alert(
                '提示',
                'error',
                [{ text: '肯定' }]
            );
        });
    }
...複製代碼

主頁：

class Main extends Component{
    constructor(props){
        super(props);
        this.state = {
            user: AppStore.getUser(),
            ...
        };
    }
    componentDidMount() {
       AppStore.addChangeListener(this._userStateChange, 'USER_CHANGE');
    }
    componentWillUnmount() {
       AppStore.removeChangeListener(this._userStateChange, 'USER_CHANGE');
    }
    _onChange: function () {
        this.setState({
            user: AppStore.getUser()
        });
    },
    ...
    ...
}複製代碼

登陸頁是你的點擊交互事件，你經過點擊觸發登陸調用Action，主頁Main會存在登陸後返回的用戶信息，數據來源於你的數據倉庫AppStore，頁面固然還存在頁面監聽者，知道當你的數據改變的時候，知道該如何去更新你的頁面。

行爲Action：

...
const _login = (params, callback, failure) => {
    const requestUrl = CommonLink.login(params.username, params.password);
   return Fetcher.getFetch(requestUrl)
       .then((response) => {
           AppDispatcher.dispatch({
               actionType: AppConstants.LOGIN,
               data: response.body,
           });
           callback(response);
       }).catch((error) => {
           failure(error);
       });
};
...
module.exports = {
    login: (params, callback, failure) => _login(params, callback, failure),
    ...
}複製代碼

觸發一個行爲調用Action方法進行了網絡API的調用，進行登陸，並返回成功用戶信息後，經過Dispatcher將數據和消息分發出去，把接下來的工做交給數據倉庫Store。

數據倉庫Stores：

const dataStore = {
    user: {},
    ...
}

const AppStore = _.assign({}, EventEmitter.prototype, EventEmitter.prototype._maxListeners = 30, {
  emitChange(event = 'DEFAULT_EVENT') {
    this.emit(event);
  },

  addChangeListener(callback, event = 'DEFAULT_EVENT') {
    this.on(event, callback);
  },

  removeChangeListener(callback, event = 'DEFAULT_EVENT') {
    this.removeListener(event, callback);
  },
  ...
  getUser: () => dataStore.user || {},
  ...
});

...

// Register callback to handle all updates
AppDispatcher.register((action) => {
  switch (action.actionType) {
    ...
    case AppConstants.LOGIN:
      _.assign(dataStore, {
        username: action.data.user.username,
        ...
      });
      AppStore.emitChange('USER_CHANGE');
      break;
    ...
  }
});

module.exports = AppStore;複製代碼

在數據倉庫中，你應該定義出倉庫對象AppStore，並對AppDispatcher註冊入各類操做，即當接收到AppDispatcher發來的不一樣消息時，操做數據並保存數據到dataStore中，以後經過AppStore.emit()將更新通知發送到頁面中，讓頁面進行從新渲染。從而完成整個Flux數據流的閉環。

關於AppDispatcher和AppConstants

上述代碼中用到的AppDispatcher和AppConstants代碼以下：
AppDispatcher：

import {Dispatcher} from 'flux'
module.exports = new Dispatcher();複製代碼

AppConstants:

const keyMirror = require('keymirror');

const AppConstants = keyMirror({
  ...
  LOGIN: null,
  ...
});
module.exports = AppConstants;複製代碼

能夠看出這些只是爲了更好的使用Flux而引入庫和輔助工具，你也可使用其餘相似工具。

總結

Flux學習和理解須要的是在項目中實際應用進去，一樣只要理解了單向數據流的思想，理解Flux也是很快的，Flux是單向數據流的一種具體架構實現。接下來會再總結關於Redux的理解和使用，一樣也是單向數據流的一種具體實現，基於Flux，可是比Flux更加方便和強大。而當前的不少React開發項目也都基於使用Redux。

雖然搞技術很難，可是作本身喜歡的事情仍是很開心的，一塊兒學習，努力奮鬥。

參考博客：

Flux 架構入門教程-阮一峯
詳解React Flux架構工做方式