資訊專欄INFORMATION COLUMN
摘要：本文翻譯自首發(fā)于處理異步利器眾成翻譯作者行魏可知鏈接來源知乎著作權(quán)歸作者所有。幾天前，我和同事談了談如何管理異步操作。是基于和生成器函數(shù)，輔助我們快速組織所有異步分散的操作。
本文翻譯自: https://medium.freecodecamp.c... 首發(fā)于: 處理異步利器 -- Redux-saga (眾成翻譯)
作者：行魏可知
鏈接：https://zhuanlan.zhihu.com/p/...
來源：知乎
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
幾天前，我和同事談了談如何管理Redux異步操作。雖然他用了很多插件來擴(kuò)展Redux，但還是讓他對(duì) Javascript 產(chǎn)生疲勞癥。
我們來看看是什么情況：如果你習(xí)慣于根據(jù)你的需要而不是根據(jù)技術(shù)身所帶來的價(jià)值，來使用技術(shù)為你工作，那么搭建React生態(tài)系統(tǒng)是非常煩人和浪費(fèi)時(shí)間的。
過去兩年，我參與了一些Angular項(xiàng)目，并且愛上了 MVC(Model-View-Controller) 開發(fā)模式。有一點(diǎn)我不得不說，對(duì)于Backbone.js出身的我來說，學(xué)習(xí)Angular雖然很困難，但同時(shí)也非常值得。正因?yàn)槿绱耍艺业搅艘环莞玫墓ぷ?，也有機(jī)會(huì)從事自己感興趣的工作了。說真的，我從Angular社區(qū)學(xué)到了很多。
這些日子工作非常順利，但是戰(zhàn)斗還要繼續(xù)，我也在嘗試了新的框架: React, Redux 和 Sagas。
幾年前，我偶然閱讀了一篇Thomas Burleson的文章 -- Promise調(diào)用鏈扁平化，受益良多。兩年前，我還經(jīng)常想起其中很多極好的想法。
這些天我在往React遷移，我發(fā)現(xiàn)Redux非常強(qiáng)大，尤其是使用sagas來管理異步操作的時(shí)候深有感觸。所以我就參考了Thosmas的文章，寫下了這篇文章，用redu-saga實(shí)現(xiàn)了類似的方法。希望本文能給大家?guī)韼椭玫乩斫鈱W(xué)習(xí)redux-saga的重要性。
聲明: 我也在另一個(gè)項(xiàng)目中做了類似的事情，希望在兩個(gè)項(xiàng)目中都能引發(fā)大家討論。本文中，我假設(shè)你已經(jīng)對(duì) Promise，React，Redux 等 Javascript 知識(shí)有了基本的了解。
首先
Redux-saga的作者 Yassine Elouafi 說:
redux-saga 是一個(gè)庫，致力于在React/Redux應(yīng)用中簡化異步操作（side effects，即像異步獲取遠(yuǎn)程數(shù)據(jù)或者瀏覽器緩存數(shù)據(jù)）。
Redux-saga 是基于 saga 和 ES6 生成器函數(shù)(Generator)，輔助我們快速組織所有異步、分散的操作。如果你想要了解更多Saga模式本身，可以看看 Caitie McCaffrey 錄制的視頻；想了解更多關(guān)于Generators的知識(shí)，可以免費(fèi)觀看 Egghead 上的視頻 (至少在本文發(fā)布的時(shí)候，視頻是免費(fèi)的)。
案例：飛行航班表
本文將用Redux-saga重現(xiàn)Thomas舉的例子。代碼最終放在 Github 上，并附上demo。
場景如下：
圖片來自 Thomas Burleson
如你所見，上圖中有三個(gè)API調(diào)用：getDeparture -> getFlight -> getForecast，所以我們的API服務(wù)設(shè)計(jì)如下：
class TravelServiceApi {
static getUser() {
return new Promise((resolve) => {
setTimeout(() => {
resolve({
email : "[email protected]",
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ù)。首先，我們需要一個(gè)用戶的信息，然后根據(jù)這個(gè)用戶的信息去獲取航班的起飛信息和天氣預(yù)報(bào)，從而我們創(chuàng)建了多個(gè)數(shù)據(jù)面板如下：
繼續(xù)閱讀
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/81362.html
摘要：更多參考通過庫掌握函數(shù)組件有些時(shí)候，我們想要?jiǎng)討B(tài)的加載一些組件按需加載，比如在一個(gè)單頁面應(yīng)用中頁面的組件頁面的組件頁面的組件只有真正要實(shí)例化當(dāng)前頁面的時(shí)候，才會(huì)去加載相應(yīng)的組件。 react 前端項(xiàng)目技術(shù)選型、開發(fā)工具、周邊生態(tài) 聲明：這不是一篇介紹 React 基礎(chǔ)知識(shí)的文章，需要熟悉 React 相關(guān)知識(shí) 主架構(gòu)：react, react-router, redux, redux...
摘要：更多參考通過庫掌握函數(shù)組件有些時(shí)候，我們想要?jiǎng)討B(tài)的加載一些組件按需加載，比如在一個(gè)單頁面應(yīng)用中頁面的組件頁面的組件頁面的組件只有真正要實(shí)例化當(dāng)前頁面的時(shí)候，才會(huì)去加載相應(yīng)的組件。 react 前端項(xiàng)目技術(shù)選型、開發(fā)工具、周邊生態(tài) 聲明：這不是一篇介紹 React 基礎(chǔ)知識(shí)的文章，需要熟悉 React 相關(guān)知識(shí) 主架構(gòu)：react, react-router, redux, redux...
摘要：舉例來說一個(gè)異步的請(qǐng)求場景，可以如下實(shí)現(xiàn)任何異步的邏輯都可以，如等等也可以使用的和。實(shí)際上在中，一個(gè)就是一個(gè)函數(shù)。 書籍完整目錄 3.4 redux 異步 showImg(https://segmentfault.com/img/bVyou8); 在大多數(shù)的前端業(yè)務(wù)場景中，需要和后端產(chǎn)生異步交互，在本節(jié)中，將詳細(xì)講解 redux 中的異步方案以及一些異步第三方組件，內(nèi)容有： redu...
摘要：下面會(huì)從淺到深，淡淡在閱讀源碼過程中自己的理解。分拆子頁面后，每一個(gè)子頁面對(duì)應(yīng)一個(gè)文件?？偨Y(jié)上面就是最早版本的源碼，很簡潔的使用了等其目的也很簡單簡化相關(guān)生態(tài)的繁瑣邏輯參考源碼地址 ??dva的思想還是很不錯(cuò)的，大大提升了開發(fā)效率，dva集成了Redux以及Redux的中間件Redux-saga,以及React-router等等。得益于Redux的狀態(tài)管理,以及Redux-saga中...
閱讀 1140·2021-11-24 09:38
閱讀 3245·2021-11-19 09:56
閱讀 2968·2021-11-18 10:02
閱讀 737·2019-08-29 12:50
閱讀 2574·2019-08-28 18:30
閱讀 872·2019-08-28 18:10
閱讀 3678·2019-08-26 11:36
閱讀 2653·2019-08-23 18:23
