国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

處理異步利器 -- Redux-saga

2501207950 / 1843人閱讀

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

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

作者：行魏可知
鏈接：https://zhuanlan.zhihu.com/p/...
來源：知乎
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。

幾天前，我和同事談了談如何管理Redux異步操作。雖然他用了很多插件來擴展Redux，但還是讓他對 Javascript 產(chǎn)生疲勞癥。

我們來看看是什么情況：如果你習(xí)慣于根據(jù)你的需要而不是根據(jù)技術(shù)身所帶來的價值，來使用技術(shù)為你工作，那么搭建React生態(tài)系統(tǒng)是非常煩人和浪費時間的。

過去兩年，我參與了一些Angular項目，并且愛上了 MVC(Model-View-Controller) 開發(fā)模式。有一點我不得不說，對于Backbone.js出身的我來說，學(xué)習(xí)Angular雖然很困難，但同時也非常值得。正因為如此，我找到了一份更好的工作，也有機會從事自己感興趣的工作了。說真的，我從Angular社區(qū)學(xué)到了很多。

這些日子工作非常順利，但是戰(zhàn)斗還要繼續(xù)，我也在嘗試了新的框架: React, Redux 和 Sagas。

幾年前，我偶然閱讀了一篇Thomas Burleson的文章 -- Promise調(diào)用鏈扁平化，受益良多。兩年前，我還經(jīng)常想起其中很多極好的想法。

這些天我在往React遷移，我發(fā)現(xiàn)Redux非常強大，尤其是使用sagas來管理異步操作的時候深有感觸。所以我就參考了Thosmas的文章，寫下了這篇文章，用redu-saga實現(xiàn)了類似的方法。希望本文能給大家?guī)韼椭玫乩斫鈱W(xué)習(xí)redux-saga的重要性。

聲明: 我也在另一個項目中做了類似的事情，希望在兩個項目中都能引發(fā)大家討論。本文中，我假設(shè)你已經(jīng)對 Promise，React，Redux 等 Javascript 知識有了基本的了解。

首先

Redux-saga的作者 Yassine Elouafi 說:

redux-saga 是一個庫，致力于在React/Redux應(yīng)用中簡化異步操作（side effects，即像異步獲取遠(yuǎn)程數(shù)據(jù)或者瀏覽器緩存數(shù)據(jù)）。

Redux-saga 是基于 saga 和 ES6 生成器函數(shù)(Generator)，輔助我們快速組織所有異步、分散的操作。如果你想要了解更多Saga模式本身，可以看看 Caitie McCaffrey 錄制的視頻；想了解更多關(guān)于Generators的知識，可以免費觀看 Egghead 上的視頻 (至少在本文發(fā)布的時候，視頻是免費的)。

案例：飛行航班表

本文將用Redux-saga重現(xiàn)Thomas舉的例子。代碼最終放在 Github 上，并附上demo。

場景如下：

圖片來自 Thomas Burleson

如你所見，上圖中有三個API調(diào)用：getDeparture -> getFlight -> getForecast，所以我們的API服務(wù)設(shè)計如下：

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服務(wù)是模擬場景中的數(shù)據(jù)服務(wù)。首先，我們需要一個用戶的信息，然后根據(jù)這個用戶的信息去獲取航班的起飛信息和天氣預(yù)報，從而我們創(chuàng)建了多個數(shù)據(jù)面板如下：

繼續(xù)閱讀

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/81362.html

相關(guān)文章

  • react 前端項目技術(shù)選型、開發(fā)工具、周邊生態(tài)

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

    hersion 評論0 收藏0

  • react 前端項目技術(shù)選型、開發(fā)工具、周邊生態(tài)

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

    kidsamong 評論0 收藏0

  • 精益 React 學(xué)習(xí)指南 （Lean React）- 3.4 掌控 redux 異步

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

    JouyPub 評論0 收藏0

  • React生態(tài)，dva源碼閱讀

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

    bergwhite 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<