详解redux异步操作实践
一、redux基础
redux
- 通过 dispatch(action) -> 中间件 -> reducer处理数据 -> 改变store -> 使用subscribe()监听store改变更新视图 的方式管理状态
- 将所有状态存储在一个store对象里面
- reducer为纯函数,而异步操作由于结果的不确定性所以含有副作用,所以需要特殊处理
react-redux
- 容器组件,负责管理数据和业务逻辑,不负责UI呈现
- UI组件,提供UI呈现,无状态即不使用this.state,状态全部由this.props提供
- 由connect生成容器组件,每次store改变会调用connect,connect接收两个参数: mapStateToProps, mapDispatchToProps
- mapStateToProps,将状态映射到UI组件的props
- mapDispatchToProps,将dispatch方法映射到UI组件的props
- Provider组件,使用content API将store从顶层开始传到每一层component供connect使用
二、redux处理异步的中间件
redux-thunk
- redux-thunk中间件允许action是一个方法
- 中间件收到action后会执行action方法并将结果提供给reducer
- action混乱导致不易维护
redux-saga
- saga会监听action并基于这个action执行Effects操作
- Effects提供灵活的API,包括阻塞、非阻塞调用,取消、等待、race等操作
- 方便隔离并执行异步操作,并易于测试
三、redux-request-async-middleware
先从redux文档中的异步action说起,每个接口调用需要dispatch三个同步action,分别是:
- 一种通知 reducer 请求开始的 action。对于这种 action,reducer 可能会切换一下 state 中的 isFetching 标记。以此来告诉 UI 来显示加载界面。
- 一种通知 reducer 请求成功的 action。对于这种 action,reducer 可能会把接收到的新数据合并到 state 中,并重置 isFetching。UI 则会隐藏加载界面,并显示接收到的数据。
- 一种通知 reducer 请求失败的 action。对于这种 action,reducer 可能会重置 isFetching。另外,有些 reducer 会保存这些失败信息,并在 UI 里显示出来。
也就是一个接口发起是这样的
dispatch(fetchPostsRequest(subject)); fetch(url).then(res => { dispatch(fetchPostsSuccess(subject, res)); }).catch(e => { dispatch(fetchPostsFailure(subject, e)); })
而我做的事情只是将这个操作封装进中间件里,特殊的地方在于:
- 所有的异步请求共用这三个action
- 用subject来区分是哪一个请求
- 将所有的结果都放到store.requests里
中间件源码
export const reduxRequest = store => next => action => { let result = next(action); let { type, subject, model } = action; let _next = action.next; if(type === FETCH_POSTS_REQUEST) { model().then(response => { _next && _next(response); store.dispatch(fetchPostsSuccess(subject, response)); }).catch(error => { console.error(error); store.dispatch(fetchPostsFailure(subject, error)); }); } return result };
- 和redux-thunk一样,将方法放进action里
- 中间件拦截FETCH_POSTS_REQUEST action,并进行异步处理
reducer源码
export const requests = (state = {}, action) => { switch (action.type) { case FETCH_POSTS_REQUEST: return assign({}, state, { [action.subject]: { isFetching: true, state: 'loading', subject: action.subject, response: null, error: null, } } ); case FETCH_POSTS_FAILURE: return assign({}, state, { [action.subject]: { isFetching: false, state: 'error', subject: action.subject, response: state[action.subject].response, error: action.error, } } ); case FETCH_POSTS_SUCCESS: return assign({}, state, { [action.subject]: { isFetching: false, state: 'success', subject: action.subject, response: action.response, } } ); case FETCH_POSTS_CLEAR: return assign({}, state, { [action.subject]: { isFetching: false, state: 'cleared', subject: null, response: null, error: null, } } ); default: return state; } }
- 将结果放入该subject对应下的response,如果错误的话将错误信息放入error当中
- isFetching表示当前的请求状态
- 另外还加入了当前的状态state和subject信息
将请求进行封装
const request = (subject, model, next) => { _dispatch(fetchPostsRequest(subject, model, next)); return true; };
- 写一个方法来发起FETCH_POSTS_REQUEST action
- 也就是说写请求的时候不用再管action这东西了,直接调用request方法
将结果进行封装
const getResponse = state => state && state.response !== null && state.response; const getLoading = (states = []) => states.reduce((pre, cur) => pre || (cur && cur.isFetching) , false) || false;
- 可以获取结果和多个请求下loading的状态
- 有更多的操作或者格式还可以继续封装,比如列表
使用方法redux-request-async-middleware
四、总结
- 使用了redux来进行状态管理,而并不需要编写redux那一套复杂逻辑,最大程度的减少异步操作的复杂度
- 适用于前端通过接口来处理和存储数据的项目
- 接口由redux处理,而视图组件由内部state来处理,而外部只暴露简单的接口来进行操作,分离业务层和视图层
- 对比react 16.3 new content API,redux的优势在于热插播的中间件和纯函数reducer写法
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
这篇文章主要介绍了微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能,结合实例形式分析了微信小程序自定义顶部TabBar选项卡页面切换功能的相关布局、样式及功能实现技巧,需要的朋友可以参考下2019-05-05基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
这篇文章主要介绍了基于JavaScript判断浏览器到底是关闭还是刷新(超准确)的相关资料,需要的朋友可以参考下2016-02-02浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
下面小编就为大家带来一篇浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-09-09
最新评论