處理異步利器 -- Redux-saga

本文翻譯自: https://medium.freecodecamp.c... 首發於: 處理異步利器 -- Redux-saga (衆成翻譯)

做者：行魏可知
連接：https://zhuanlan.zhihu.com/p/...
來源：知乎
著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。

幾天前，我和同事談了談如何管理Redux異步操做。雖然他用了不少插件來擴展Redux，但仍是讓他對 Javascript 產生疲勞症。

咱們來看看是什麼狀況：若是你習慣於根據你的須要而不是根據技術身所帶來的價值，來使用技術爲你工做，那麼搭建React生態系統是很是煩人和浪費時間的。

過去兩年，我參與了一些Angular項目，而且愛上了 MVC(Model-View-Controller) 開發模式。有一點我不得不說，對於Backbone.js出身的我來講，學習Angular雖然很困難，但同時也很是值得。正由於如此，我找到了一份更好的工做，也有機會從事本身感興趣的工做了。說真的，我從Angular社區學到了不少。

這些日子工做很是順利，可是戰鬥還要繼續，我也在嘗試了新的框架: React, Redux 和 Sagas。

幾年前，我偶然閱讀了一篇Thomas Burleson的文章 -- Promise調用鏈扁平化，受益良多。兩年前，我還常常想起其中不少極好的想法。

這些天我在往React遷移，我發現Redux很是強大，尤爲是使用sagas來管理異步操做的時候深有感觸。因此我就參考了Thosmas的文章，寫下了這篇文章，用redu-saga實現了相似的方法。但願本文能給你們帶來幫助，更好地理解學習redux-saga的重要性。

聲明: 我也在另外一個項目中作了相似的事情，但願在兩個項目中都能引起你們討論。本文中，我假設你已經對 Promise，React，Redux 等 Javascript 知識有了基本的瞭解。

首先

Redux-saga的做者 Yassine Elouafi 說:

redux-saga 是一個庫，致力於在React/Redux應用中簡化異步操做（side effects，即像異步獲取遠程數據或者瀏覽器緩存數據）。

Redux-saga 是基於 saga 和 ES6 生成器函數(Generator)，輔助咱們快速組織全部異步、分散的操做。若是你想要了解更多Saga模式自己，能夠看看 Caitie McCaffrey 錄製的視頻；想了解更多關於Generators的知識，能夠免費觀看 Egghead 上的視頻 (至少在本文發佈的時候，視頻是免費的)。

案例：飛行航班表

本文將用Redux-saga重現Thomas舉的例子。代碼最終放在 Github 上，並附上demo。

場景以下：

圖片來自 Thomas Burleson

如你所見，上圖中有三個API調用：getDeparture -> getFlight -> getForecast，因此咱們的API服務設計以下：

class TravelServiceApi {
static getUser() {
return new Promise((resolve) => {

setTimeout(() => {
   resolve({
        email : "somemockemail@email.com",
        repository: "http://github.com/username"
   });
 }, 3000);

});
}

static getDeparture(user) {
return new Promise((resolve) => {
setTimeout(() => {

resolve({
  userID : user.email,
  flightID : 「AR1973」,
  date : 「10/27/2016 16:00PM」
 });
}, 2500);

});
}

static getForecast(date) {
return new Promise((resolve) => {

setTimeout(() => {
    resolve({
        date: date,
        forecast: "rain"
    });
  }, 2000);

});
}
}
這些API服務是模擬場景中的數據服務。首先，咱們須要一個用戶的信息，而後根據這個用戶的信息去獲取航班的起飛信息和天氣預報，從而咱們建立了多個數據面板以下：

繼續閱讀