给大家提供思路，可以借鉴哈，有什么问题可以留言 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-…