处理异步利器 -- Redux-saga

2501207950 发布于2019-08-20 14:00 / 1719人阅读

摘要：本文翻译自首发于处理异步利器众成翻译作者行魏可知链接来源知乎著作权归作者所有。几天前，我和同事谈了谈如何管理异步操作。是基于和生成器函数，辅助我们快速组织所有异步分散的操作。

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

继续阅读

私有云 idc机房托管异步处理 asp 异步处理 js写成异步处理 php 处理异步化

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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 前端项目技术选型、开发工具、周边生态

摘要：更多参考通过库掌握函数组件有些时候，我们想要动态的加载一些组件按需加载，比如在一个单页面应用中页面的组件页面的组件页面的组件只有真正要实例化当前页面的时候，才会去加载相应的组件。 react 前端项目技术选型、开发工具、周边生态声明：这不是一篇介绍 React 基础知识的文章，需要熟悉 React 相关知识主架构：react, react-router, redux, redux...

Hanks10100 2019-08-05 15:48 评论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