React 實踐記錄 02 Flux introduction

Introduction

本文組成:

• React 官方文檔翻譯
• 相關實踐心得。

內容上是Flux的介紹，例子將會在之後寫出。
一旦稍微多瞭解一點React，很難避免聽到Flux這個名詞。
Flux是一個Facebook團隊的前端開發架構。藉助單向數據流等其它機制，使得React能夠發揮了更增強大的功能。比起其它的框架，Flux更像是一種模式，咱們能夠投入較少的學習成本，快速上手Flux。

Flux應用有三個主要的組成部分：調度者(dispatcher), 倉庫(stores)，視圖(view)。view由React組件構成。不要將Flux應用視做MVC架構。的確，Controller在Flux應用中也是存在的，可是他們被稱做controller-views，其實是最外層的React組件，用以從Store中獲取數據，傳送給子組件。

Flux使用單向數據綁定，每當用戶與view交互時，view將會藉助dispatcher傳遞action至各類存儲應用數據與業務邏輯的store，對全部狀態受到影響的react組件進行更新。

Structure and Data Flow

數據在Flux中的傳遞是單向的。

上面這張圖是Flux應用的最基本模型。各個節點都是獨立的。不要將Action想的過於複雜，它們只是數據的傳播包。

若是再考慮到客戶端交互，這張圖會變成下面這樣，view會觸發action，在應用中傳播。

全部的數據經由dispatcher這個中央節點傳播。dispatcher收到action後，會調用store所註冊過的相應回調函數。而store則會告知controller-views新的數據已到達，觸發後者的event handler。後者取得新數據，藉助React的setState，觸發組件的重渲染。

沒有雙向綁定的數據，全部的狀態都在store中維護。可能各個sotre存在着依賴，但這種依賴由dispatcher管理，各模塊良好解耦。

Dispatcher

dispatcher做爲Flux應用數據傳輸的中央節點，實際上管理着store的各種callback註冊，使得其能夠在隨後將action分發。
dispatcher還能夠管理store之間的依賴，即，配置action到來時，按照必定的順序調用已註冊的callback。

AppDispatcher.register(function(action) {
  var text;

  switch(action.actionType) {
    case TodoConstants.TODO_CREATE:
      text = action.text.trim();
      if (text !== '') {
        create(text);
        TodoStore.emitChange();
      }
      break;

    case TodoConstants.TODO_TOGGLE_COMPLETE_ALL:
      if (TodoStore.areAllComplete()) {
        updateAll({complete: false});
      } else {
        updateAll({complete: true});
      }
      TodoStore.emitChange();
      break;
       default:
      // no op
  }
});

Stores and Controller-Views

store包含了應用的狀態與業務邏輯。它們的職責相似與MVC中的M。
store中的callback以action爲參數。如以前的代碼同樣，根據不一樣的action類型，處理不一樣的業務。每當一個store更新，它都會以廣播形式的事件，通知正在偵聽的各種view。
React組件構成了view層，在view結構的最外層，即爲偵聽store廣播的controller-view，每個獨立的controller-view能夠用於處理頁面中一部分組件的狀態。
當收到store傳來的事件時，它首先借助store提供的getter方法，獲取新的數據，接着經過setState() 或 forceUpdate()來觸發渲染。

本文結束。