第六步：Flux架構(gòu)速成教程

第六步：Flux架構(gòu)速成教程

Flux是Facebook為可擴(kuò)展的客戶端web應(yīng)用開發(fā)的應(yīng)用架構(gòu)。它利用單向數(shù)據(jù)流補(bǔ)全了React組件的一些不足。Flux更應(yīng)該看做一種模式而非框架，不過(guò)，這里我們將使用一個(gè)叫做Alt的Flux實(shí)現(xiàn)，來(lái)減少我們寫腳手架代碼的時(shí)間。

以前你看過(guò)這個(gè)圖解嗎？你能理解它嗎？我就不能理解，無(wú)論我看它多少遍。

現(xiàn)在我對(duì)Flux比較了解了，我只能說(shuō)，真是服了他們（Flux作者），能將簡(jiǎn)單的架構(gòu)用如此復(fù)雜的方式展現(xiàn)出來(lái)。不過(guò)需要說(shuō)明的是，它們的新Flux圖解比以前好多了。

有趣事實(shí)：當(dāng)我剛開始寫這個(gè)教程時(shí)，我決定不在這個(gè)項(xiàng)目中使用Flux。我實(shí)在掌握不了這個(gè)東西，還是讓別人去教它吧。不過(guò)謝天謝地，在Yahoo我能在上班時(shí)間把玩不同的技術(shù)并試驗(yàn)它們，所以花點(diǎn)功夫還是學(xué)會(huì)了。老實(shí)說(shuō)，不用Flux我們也能構(gòu)建這個(gè)app，并且寫的代碼還少些，因?yàn)檫@個(gè)項(xiàng)目并沒(méi)有什么復(fù)雜的內(nèi)嵌組件。但我相信，做一個(gè)全棧的React app，包括服務(wù)端渲染和Flux架構(gòu)，看著不同的部分是如何組合到一起的，這本身有它的價(jià)值。

與其重復(fù)Flux那抽象的官方教程，不如讓我們來(lái)看一個(gè)真實(shí)的用例，來(lái)展示Flux是如何工作的：

• 在componentDidMount中，三個(gè)action被觸發(fā)：

OverviewActions.getSummary();
OverviewActions.getApps();
OverviewActions.getCompanies();

• 每一個(gè)action都創(chuàng)建了一個(gè)AJAX請(qǐng)求向服務(wù)器獲取數(shù)據(jù)。
• 獲取到數(shù)據(jù)后，每一個(gè)action觸發(fā)另一個(gè)“success”的action，并且將數(shù)據(jù)傳遞給它：

getSummary() {
  request
    .get('/api/overview/summary')
    .end((err, res) => {
      this.actions.getSummarySuccess(res.body);
    });
}

• 同時(shí)，Overview的store（我們存儲(chǔ)Overview組件狀態(tài)的地方）監(jiān)聽(tīng)所有“success”的action。當(dāng)getSummarySuccess被觸發(fā)后，Overview的store中的onGetSummarySuccess方法被調(diào)用，store被更新：

class OverviewStore {

  constructor() {
    this.bindActions(OverviewActions);
    this.summary = {};
    this.apps = [];
    this.companies = [];
  }

  onGetSummarySuccess(data) {
    this.summary = data;
  }

  onGetAppsSuccess(data) {
    this.apps = data;
  }

  onGetCompaniesSuccess(data) {
    this.companies = data;
  }
}

• 一旦store更新，Overview組件將會(huì)知道，因?yàn)樗嗛喠薕verview store，當(dāng)store更新/改變后，組件將會(huì)安裝store中的值更新自身狀態(tài)。

class Overview extends React.Component {

  constructor(props) {
    super(props);
    this.state = OverviewStore.getState();
    this.onChange = this.onChange.bind(this);
  }

  componentDidMount() {
    OverviewStore.listen(this.onChange);
  }

  onChange() {
    this.setState(OverviewStore.getState())
  }

  ...
}

• 此時(shí)Overview組件已經(jīng)根據(jù)新數(shù)據(jù)更新完成了。
• 在上面的截圖上，當(dāng)從下拉菜單選擇不同的日期范圍，將會(huì)重復(fù)整個(gè)流程。

注意：Action如何命名并無(wú)規(guī)定，你可自由按照自己的習(xí)慣命名，只要它是描述性并且有意義的。

讓我們暫時(shí)先忽略Dispatcher一會(huì)，從上面的描述你看到了一條單向的數(shù)據(jù)流嗎？如果沒(méi)有也沒(méi)什么大不了的，當(dāng)我們開始構(gòu)建應(yīng)用的時(shí)候你自然就明白了。

Flux概要

Flux事實(shí)上不過(guò)是pub/sub架構(gòu)的一個(gè)時(shí)髦說(shuō)法，比如，應(yīng)用的數(shù)據(jù)總是單向的，并被一路上的訂閱者們接收。

在寫這篇教程的時(shí)候，外面已經(jīng)有超過(guò)一打的Flux實(shí)現(xiàn)，在這些實(shí)現(xiàn)當(dāng)中，我只用過(guò)RefluxJS和Alt，在這兩者之間，我個(gè)人比較喜歡Alt，因?yàn)樗暮?jiǎn)潔，以及作者goatslacker的熱心、支持服務(wù)端渲染、非常棒的文檔，以及積極的維護(hù)。

我強(qiáng)烈建議你去讀一下Alt的Getting Started，不超過(guò)10分鐘你就能基本入門了。

如果你對(duì)于該選擇哪個(gè)Flux庫(kù)感到迷茫，可以考慮一下Hacker News上一個(gè)叫g(shù)lenjamin的家伙的評(píng)論，他花了大量時(shí)間試圖弄清到底該用哪個(gè)Flux庫(kù)：

令人郁悶的事實(shí)是：它們（Flux庫(kù)）都很好。你幾乎不可能因?yàn)橐粋€(gè)Flux庫(kù)而讓你的應(yīng)用出現(xiàn)問(wèn)題。即使某個(gè)Flux庫(kù)停止維護(hù)了也不打緊，你要知道，大多數(shù)正常的Flux實(shí)現(xiàn)都非常?。ù蠹s100行代碼），出不了什么致命問(wèn)題，即使出了我想你也能搞定?？傊?，redux很靈巧，但不要在試圖獲得完美的Flux庫(kù)上浪費(fèi)時(shí)間，瞅著哪個(gè)還算順眼就拿來(lái)用，趕緊將關(guān)注點(diǎn)轉(zhuǎn)回到你的應(yīng)用上去。

現(xiàn)在，我們已經(jīng)過(guò)了一遍ES6、React、Flux的一些基礎(chǔ)，現(xiàn)在該將注意力集中到我們的應(yīng)用上來(lái)了。