基于redux的一些网络请求的理解（react相关）

最新推荐文章于 2024-03-27 15:29:10 发布

ConanZzz_

最新推荐文章于 2024-03-27 15:29:10 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：技术相关文章标签： redux 前端 react

本文链接：https://blog.youkuaiyun.com/ConanZzz_/article/details/89766078

技术相关专栏收录该内容

2 篇文章

订阅专栏

本文探讨了在react项目中，为何网络请求通常在componentDidMount生命周期中触发，并介绍了使用redux中间件redux-thunk和redux-saga进行异步处理的方式。redux-thunk允许在action-creator中直接发送请求，简化测试，而redux-saga则集中处理异步请求，适于复杂的业务逻辑，但学习曲线较陡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于新项目前端框架选型用到了react+redux+react-router的技术栈，最近一段时间终于重拾起了扔了两年的react，老泪纵横。。。react已经出到16+版本，据说facebook团队对react进行了大规模重构，但是对使用者没有丝毫的影响，牛啤！

-------------------------------碎碎念结束--------------------------

实际上在react中，如果不借助redux中间件，一般的网络请求是在 componentDidMount 生命周期中触发的，对于为什么是componentDidMount中发请求呢？
componentDidMount是官方推荐的用来发网络请求的生命周期，它是在组件完全挂载之后才会去触发的。因为本人之前的项目有用过Angular5，给我的感觉就像是componentDidMount和angular5中的ngOnInit，那为什么不在constructor中调用呢？合理的解释是因为这个时候组件还未挂载，在这个时候进行一些数据绑定的操作可能会找不到一些相应的DOM，导致报错。

OK，以上说明了为什么是在componentDidMount中发送网络请求，但实际上在项目中我看到很多人推荐用redux中间件去发送网络请求，以下会介绍我两种中间件。

1，redux-thunk使用方法详见readme。这个中间件的作用实际是给redux中的dispatch方法做了拓展，dispatch方法本身是接收一个对象的，通过redux-thunk，dispatch方法可以接收一个函数并调用。这个中间件的好处在于我们我们可以在action-creator中去发送请求，而不用写在生命周期函数里面，还有很重要的一点就是方便进行单元测试。但是如果在请求过后需要对response进行复杂的数据处理，写在action-creator中会显得比较臃肿。第二种中间件就是为了处理这种状况的。

2，redux-saga使用方法详见readme。这个中间件实际是将所有异步请求放在一个文件中进行处理，如果有对请求数据进行操作的需求，建议放到这里，但是。。。saga的入门门槛好像有点高，因为他使用到了ES6中的generator函数（说实话我在接触saga之前完全没有用过generator函数），另外就是在error handle方面要用try-catch。以下可供参考：
function* getReq(){ let res = yield axios.get(url); let action = initAction(res.data); yield put(action); }