回来的异步操作的示例分析

　　介绍

小编给大家分享一下回来的异步操作的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

<强>一、回来的基础

<强>回来的

<李>

通过调度(行动)→中间件→减速机处理数据→改变存储→使用订阅()监听店改变更新视图的方式管理状态

<李>

将所有状态存储在一个商店对象里面

<李>

减速器为纯函数,而异步操作由于结果的不确定性所以含有副作用,所以需要特殊处理

<强> react-redux
容器组件,负责管理数据和业务逻辑,不负责UI呈现
UI组件,提供UI呈现,无状态即不使用this.state,状态全部由。道具提供
由连接生成容器组件,每次店改变会调用连接,连接接收两个参数:mapStateToProps, mapDispatchToProps
mapStateToProps,将状态映射到UI组件的道具
mapDispatchToProps,将派遣方法映射到UI组件的道具
供应商组件,使用content API将存储从顶层开始传到每一层组件供连接使用

<强>二,回来的处理异步的中间件

<强> redux-thunk
redux-thunk中间件允许行动是一个方法
中间件收到动作后会执行行动方法并将结果提供给减速机
行动混乱导致不易维护
<强> redux-saga
传奇会监听行动并基于这个行动执行影响操作
影响提供灵活的API,包括阻塞,非阻塞调用,取消,等待,种族等操作
方便隔离并执行异步操作,并易于测试

<强>三,redux-request-async-middleware

先从回来的文档中的异步行动说起,每个接口调用需要派遣三个同步行动,分别是:
一种通知减速器请求开始的行动。对于这种行动,减速器可能会切换一下状态中的isFetching标记。以此来告诉UI来显示加载界面。
一种通知减速器请求成功的行动。对于这种行动,减速器可能会把接收到的新数据合并到状态中,并重置isFetching.UI则会隐藏加载界面,并显示接收到的数据。
一种通知减速器请求失败的行动。对于这种行动,减速器可能会重置isFetching。另外,有些减速器会保存这些失败信息,并在用户界面里显示出来。
也就是一个接口发起是这样的

调度(fetchPostsRequest(主题); 　　获取(url)。然后(res=比;{ 　　调度(fetchPostsSuccess(主题,res)); 　　})。抓住(e=比;{ 　　调度(fetchPostsFailure(主题、e)); 　　})

只是将这个操作封装进中间件里,特殊的地方在于:

<李>

所有的异步请求共用这三个动作

<李>

用主题来区分是哪一个请求

<李>

将所有的结果都放到商店。李请求里

中间件源码

出口const reduxRequest=商店=比;下一个=比;action=比;{ 　　让结果=下一个(行动); 　　让{类型、主题模型}=行动; 　　让_next=action.next; 　　如果(type===FETCH_POSTS_REQUEST) { 　　模型()。(反应=比;{ 　　_next,,_next(响应); 　　商店。调度(fetchPostsSuccess(主题、响应)); 　　})。抓住(错误=比;{ 　　console.error(错误); 　　商店。调度(fetchPostsFailure(主题、错误)); 　　}）; 　　} 　　返回结果 　　},/ <李>

和redux-thunk一样,将方法放进行动里

<李>

中间件拦截FETCH_POSTS_REQUEST行动,并进行异步处理

减速器源码

=出口const请求(国家={},行动)=比;{ 　　开关(action.type) { 　　案例FETCH_POSTS_REQUEST: 　　返回指定({}, 　　状态, 　　{ 　　(行动。主题:{ 　　isFetching:没错, 　　状态:& # 39;加载# 39; 　　主题:action.subject, 　　回应:空, 　　错误:空, 　　} 　　} 　　)； 　　案例FETCH_POSTS_FAILURE: 　　返回指定({}, 　　状态, 　　{ 　　(行动。主题:{ 　　isFetching:假的, 　　状态:& # 39;错误# 39; 　　主题:action.subject, 　　回复:[action.subject] .response状态, 　　错误:action.error, 　　} 　　} 　　)； 　　案例FETCH_POSTS_SUCCESS: 　　返回指定({}, 　　状态, 　　{ 　　(行动。主题:{ 　　isFetching:假的, 　　状态:& # 39;成功# 39; 　　主题:action.subject, 　　回应:action.response, 　　} 　　} 　　)； 　　案例FETCH_POSTS_CLEAR: 　　返回指定({}, 　　状态, 　　{ 　　(行动。主题:{ 　　isFetching:假的, 　　状态:& # 39;清除# 39; 　　主题:空, 　　回应:空, 　　错误:空, 　　} 　　} 　　) 　　返回状态; 　　} 　　}

回来的异步操作的示例分析