乐趣区

【小程序taro 最佳实践】异步action优雅实践(简化流程)

给大家提供思路,可以借鉴哈,有什么问题可以留言 taro 脚手架后面文章会慢慢讲解更多技巧 https://github.com/wsdo/taro-…

概要
当我们拿到官方项目请求 action 的时候需要写两个函数 (一个返回 type, 一个 dispatch),超级麻烦,如下所示。
function articleList(data) {
return {type: LIST, payload: data}
}

export function list() {
console.log(‘list’)
return (dispatch) => {
Taro.request({
url: ‘http://api.shudong.wang/v1/article/list’,
data: {
foo: ‘foo’,
bar: 10
},
header: {
‘content-type’: ‘application/json’
}
}).then((res) => {
dispatch(articleList(res.data.article)) // 需要在另一个函数 dispatch
})
}
}
如果每个函数都这样写下去,会极其痛苦的,很多冗余的代码,那么我们应该怎么设计呢?
设计
参数:type 类型,函数(自动 dispatch)
这样设计后我们可以极其简单的使用 action 了
/**
* 创建 API Action
*
* @export
* @param actionType Action 类型
* @param [func] 请求 API 方法,返回 Promise
* @returns 请求之前 dispatch {type: ${actionType}_request }
* 请求成功 dispatch {type: ${actionType}, payload: ${resolveData} }
* 请求失败 dispatch {type: ${actionType}_failure, payload: ${rejectData} }
*/
export function createApiAction(actionType, func = () => {}) {
return (
params = {},
callback = {success: () => {}, failed: () => {}},
customActionType = actionType,
) => async (dispatch) => {
try {
dispatch({type: `${customActionType}_request`, params });
const data = await func(params);
dispatch({type: customActionType, params, payload: data});

callback.success && callback.success({payload: data})
return data
} catch (e) {
dispatch({type: `${customActionType}_failure`, params, payload: e })

callback.failed && callback.failed({payload: e})
}
}
}
极简使用方式
配合上篇文章讲的封装的 api 异步 action 就变得如此简单了
import {createApiAction} from ‘./index’

export const list = createApiAction(LIST, params => api.get(‘news/list’, params))
全部代码
如果能帮到你帮忙点个 starhttps://github.com/wsdo/taro-…

退出移动版