redux是怎样做异步请求的?

简介: redux是怎样做异步请求的?

前言

一般的异步请求,可以在componentDidmount中直接进行请求,无需借助redux

但是在一定规模的项目中,上述方法很难进行异步流的管理,通常情况下我们会借助redux的异步中间件进行处理。

异步流的中间件有很多,当下主流的异步中间件有两种,redux-thunk、redux-saga

一、redux-thunk中间件?

redux-thunk的优点?

  1. 体积小:redux-thunk的实现方法很简单,只有不到20行代码。
  2. 使用简单:redux-thunk没有引入像redux-saga或者redux-observable额外的范式,上手比较简单。

redux-thunk的缺点?

  1. 样板代码过多:与redux本身一样,通常一个请求需要大量的代码,而且很多请求都是重复性质的。
  2. 耦合性严重:异步操作与redux的action耦合在一起,不方便进行管理。
  3. 功能孱弱:有一些实际开发中常用的功能需要自己进行封装

redux-saga中间件?

redux-saga优点?

异步解耦:saga异步操作被转移到saga.js中,不再是参杂在axtion.js或者是component.js

中。

action的摆脱thunk function,dispath的参数依然是一个纯粹的action,而不是充满黑魔法的thunk function。

功能强大:redux-saga提供了大量的saga辅助函数和 Effect创建器供开发者使用,开发者无需封装或者简单封装即可使用。

灵活性:redux-saga可以串行/并行组合起来,形成一个非常使用的异步flow。

易测试:提供了各种case的测试方案,包括mock task,分支覆盖等等。

redux-saga缺陷?

额外的学习成本:redux-saga不仅在使用难以理解的gennertor function,而且有数十个API,学习成本远超过redux-thunk。最重要的是额外的学习成本是只服务于这个库的,与redux-observable不同,redux-observable,虽然有额外的学习成本,但是背后是rxjs和一整套思想。

体积庞大:体积略大,代码近2000行,min版25KB左右

功能过剩:实际上并发控制等功能很难用到,但是我妈依然需要引入这些代码。

ts支持不友好:yield无法返回Ts类型。


相关文章
|
存储 JavaScript 前端开发
vue3 专用 indexedDB 封装库,基于Promise告别回调地狱(二)
https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API 这个大概是官网吧,原始是英文的,现在陆续是出中文版。有空的话还是多看看官网。
Vue3使用hook封装常见的几种异步请求函数场景,让开发更加丝滑🚀🚀🚀
Vue3使用hook封装常见的几种异步请求函数场景,让开发更加丝滑🚀🚀🚀
|
6月前
|
前端开发 开发者
useReducer 的奇妙世界:探索 React 状态管理的新境界(上)
useReducer 的奇妙世界:探索 React 状态管理的新境界(上)
useReducer 的奇妙世界:探索 React 状态管理的新境界(上)
|
6月前
|
存储 前端开发 测试技术
useReducer 的奇妙世界:探索 React 状态管理的新境界(下)
useReducer 的奇妙世界:探索 React 状态管理的新境界(下)
|
6月前
|
前端开发
useReducer 的奇妙世界:探索 React 状态管理的新境界(中)
useReducer 的奇妙世界:探索 React 状态管理的新境界(中)
|
6月前
|
资源调度 JavaScript 前端开发
Redux异步解决方案 1. Redux-Thunk中间件
Redux异步解决方案 1. Redux-Thunk中间件
47 0
|
6月前
|
存储 JSON 前端开发
【第40期】一文彻底搞懂React网络请求
【第40期】一文彻底搞懂React网络请求
175 0
|
编解码 前端开发 JavaScript
【长文慎入】一文吃透React SSR服务端同构渲染
前段时间一直在研究 react ssr技术,然后写了一个完整的 ssr开发骨架。今天写文,主要是把我的研究成果的精华内容整理落地,另外通过再次梳理希望发现更多优化的地方,也希望可以让更多的人少踩一些坑,让更多的人理解和掌握这个技术。 相信看过本文(前提是能对你的胃口,也能较好的消化吸收)你一定会对 react ssr服务端渲染技术有一个深入的理解,可以打造自己的脚手架,更可以用来改造自己的实际项目,当然这不仅限于 react ,其他框架都一样,毕竟原理都是相似的。
1425 0
|
存储 JavaScript 前端开发
【面试官系列】React 中,如何在页面刷新之后保持状态?看看你知道几种~
【面试官系列】React 中,如何在页面刷新之后保持状态?看看你知道几种~
【面试官系列】React 中,如何在页面刷新之后保持状态?看看你知道几种~
|
缓存 前端开发 JavaScript
React 数据请求最佳实践
React 数据请求最佳实践
502 0