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封装常见的几种异步请求函数场景,让开发更加丝滑🚀🚀🚀
|
3月前
|
前端开发 开发者
useReducer 的奇妙世界:探索 React 状态管理的新境界(上)
useReducer 的奇妙世界:探索 React 状态管理的新境界(上)
useReducer 的奇妙世界:探索 React 状态管理的新境界(上)
|
3月前
|
存储 前端开发 测试技术
useReducer 的奇妙世界:探索 React 状态管理的新境界(下)
useReducer 的奇妙世界:探索 React 状态管理的新境界(下)
|
3月前
|
前端开发
useReducer 的奇妙世界:探索 React 状态管理的新境界(中)
useReducer 的奇妙世界:探索 React 状态管理的新境界(中)
|
3月前
|
前端开发
如何处理Uniapp中的异步请求?
如何处理Uniapp中的异步请求?
270 0
|
3月前
|
资源调度 JavaScript 前端开发
Redux异步解决方案 1. Redux-Thunk中间件
Redux异步解决方案 1. Redux-Thunk中间件
33 0
|
3月前
|
存储 JSON 前端开发
【第40期】一文彻底搞懂React网络请求
【第40期】一文彻底搞懂React网络请求
115 0
|
JavaScript 前端开发 中间件
前端网红框架的插件机制全梳理(axios、koa、redux、vuex)
前端中的库很多,开发这些库的作者会尽可能的覆盖到大家在业务中千奇百怪的需求,但是总有无法预料到的,所以优秀的库就需要提供一种机制,让开发者可以干预插件中间的一些环节,从而完成自己的一些需求。
|
前端开发
react 事件机制04-事件触发原理(完结)
本文继续接上一篇 react 事件机制03-事件注册 来说下 react 事件机制的事件触发过程,一起研究下在这个过程中主要经过了哪些关键步骤,本文也是react 事件机制的完结篇,希望本文可以让你对 react 事件触发的原理有一定的理解。
144 0
react 事件机制04-事件触发原理(完结)