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

继续阅读