处理异步利器 -- 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 : "[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服务是模拟场景中的数据服务。首先，我们需要一个用户的信息，然后根据这个用户的信息去获取航班的起飞信息和天气预报，从而我们创建了多个数据面板如下：