首页 男生 其他 深入浅出React和Redux

7.3.1 如何挑选异步操作方式

深入浅出React和Redux 程墨 2209 2021-04-06 02:29

  您可以在百度里搜索“深入浅出React和Redux 艾草文学(www.321553.xyz)”查找最新章节!

  

  7.3.1 如何挑选异步操作方式

  所有这些辅助库,都需要通过一个Redux中间件或者Store Enhancer来实现Redux对异步操作的支持,每一个库都足够写一本书出来讲解,所以没法在这里一一详细介绍,在这里我们只是列出一些要点,帮助读者研究让Redux支持异步操作的库时需要考虑哪些方面。

  第一,在Redux的单向数据流中,什么时机插入异步操作?

  Redux的数据流转完全靠action来驱动,图7-2显示了数据流转的过程,对于redux-thunk,切入异步操作的时机是在中间件中,但是这不是唯一的位置。

  通过定制化Store Enhancer,可以在action派发路径上任何一个位置插入异步操作,甚至作为纯函数的reducer都可以帮助实现异步操作。异步操作本身就是一种副作用,reducer的执行过程当然不应该产生异步操作,但是reducer函数的返回值却可以包含对异步操作的“指示”。也就是说,reducer返回的结果可以用纯数据的方式表示需要发起一个对服务器资源的访问,由reducer的调用者去真正执行这个访问服务器资源的操作,这样不违背reducer是一个纯函数的原则,在redux-effects中使用的就是这种方法。

  很遗憾,很多库的文档并没有解释清楚自己切入异步操作的位置,这就容易导致很多误解,需要开发者自己去发掘内在机制。只有确定了切入异步操作的位置,才能了解整个流程,不会犯错。

  第二,对应库的大小如何?

  有的库看起来功能很强大,单独一个库就有几十KB大小的体积,比如redux-saga,发布的最小化代码有25KB,经过gzip压缩之后也有7KB,要知道React本身被压缩之后也不过是45KB大小。

  不同的应用对JavaScript的体积有不同的要求。比如,对于视频类网站,观看视频本来就要求访问者的网络带宽比较优良,那多出来的这些代码大小就不会有什么影响。但是对于一些预期会在网络环境比较差的情况下访问的网站,可能就需要计较一下是否值得引入这些库。

  第三,学习曲线是不是太陡?

  所有这些库都涉及一些概念和背景知识,导致学习曲线比较陡,比如redux-saga要求开发者能够理解ES6的async和await语法,redux-observable是基于Rx.js库开发的,要求开发者已经掌握响应式编程的技巧。

  如果一个应用只有一个简单的API请求,而且使用redux-thunk就能够轻松解决问题,那么选择一个需要较陡学习曲线的辅助库就显得并不是很恰当;但是如果应用中包含大量的API请求,而且每个请求之间还存在复杂的依赖关系,这时候也许就是考虑使用某个辅助库的时机。

  切记,软件开发是团队活动,选用某种技术的时候,不光要看自己能不能接受,还也要考虑团队中其他伙伴是否容易接受这种技术。毕竟,软件开发的终极目的是满足产品需求,不要在追逐看似更酷更炫的技术中迷失了初心。

  第四,是否会和其他Redux库冲突?

  所有这些库都是以Redux中间件或者Redux Store Enhancer的形态出现,在用Redux的createStore创建store实例时,可能会组合多个中间件和多个Store Enhancer,在Store这个游戏场上,不同的玩家之间可能会发生冲突。

  总之,使用任何一个库在Redux中实现异步操作,都需要多方面的考虑,到目前为止,业界都没有一个公认的最佳方法。

  相对而言,虽然redux-thunk容易产生代码臃肿的问题,但真的是简单又易用,库也不大,只有几行代码而已,在第9章中我们会详细介绍redux-thunk的实现细节。 深入浅出React和Redux

目录
设置
手机
书架
书页
评论