處理異步利器 -- Redux-saga

2501207950 發布于2019-08-20 14:00 / 1837人閱讀

摘要：本文翻譯自首發于處理異步利器眾成翻譯作者行魏可知鏈接來源知乎著作權歸作者所有。幾天前，我和同事談了談如何管理異步操作。是基于和生成器函數，輔助我們快速組織所有異步分散的操作。

本文翻譯自: 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服務是模擬場景中的數據服務。首先，我們需要一個用戶的信息，然后根據這個用戶的信息去獲取航班的起飛信息和天氣預報，從而我們創建了多個數據面板如下：

繼續閱讀

云服務器 GPU云服務器異步處理 asp 異步處理 js寫成異步處理 php 處理異步化

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81362.html

react 前端項目技術選型、開發工具、周邊生態

摘要：更多參考通過庫掌握函數組件有些時候，我們想要動態的加載一些組件按需加載，比如在一個單頁面應用中頁面的組件頁面的組件頁面的組件只有真正要實例化當前頁面的時候，才會去加載相應的組件。 react 前端項目技術選型、開發工具、周邊生態聲明：這不是一篇介紹 React 基礎知識的文章，需要熟悉 React 相關知識主架構：react, react-router, redux, redux...

hersion 2019-08-30 15:54 評論0 收藏0
react 前端項目技術選型、開發工具、周邊生態

摘要：更多參考通過庫掌握函數組件有些時候，我們想要動態的加載一些組件按需加載，比如在一個單頁面應用中頁面的組件頁面的組件頁面的組件只有真正要實例化當前頁面的時候，才會去加載相應的組件。 react 前端項目技術選型、開發工具、周邊生態聲明：這不是一篇介紹 React 基礎知識的文章，需要熟悉 React 相關知識主架構：react, react-router, redux, redux...

kidsamong 2019-08-23 14:07 評論0 收藏0
精益 React 學習指南（Lean React）- 3.4 掌控 redux 異步

摘要：舉例來說一個異步的請求場景，可以如下實現任何異步的邏輯都可以，如等等也可以使用的和。實際上在中，一個就是一個函數。書籍完整目錄 3.4 redux 異步 showImg(https://segmentfault.com/img/bVyou8); 在大多數的前端業務場景中，需要和后端產生異步交互，在本節中，將詳細講解 redux 中的異步方案以及一些異步第三方組件，內容有： redu...

JouyPub 2019-08-19 18:36 評論0 收藏0
React生態，dva源碼閱讀

摘要：下面會從淺到深，淡淡在閱讀源碼過程中自己的理解。分拆子頁面后，每一個子頁面對應一個文件。總結上面就是最早版本的源碼，很簡潔的使用了等其目的也很簡單簡化相關生態的繁瑣邏輯參考源碼地址 ??dva的思想還是很不錯的，大大提升了開發效率，dva集成了Redux以及Redux的中間件Redux-saga,以及React-router等等。得益于Redux的狀態管理,以及Redux-saga中...

bergwhite 2019-08-30 15:55 評論0 收藏0