【小程序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))

全部代码

如果能帮到你帮忙点个 star
https://github.com/wsdo/taro-...

西树与前端
关注西树与前端「[链接]」,每天进步一点。
1 篇内容引用

从事开发多年,前端、后端(go、Python、php)、服务架构都有涉猎,经历过大公司、创业公司,擅长前端及...

7.1k 声望
923 粉丝
0 条评论
推荐阅读
mac 安装mysql
mac 安装mysql文章首发:[链接] {代码...} @ 后面可以跟版本设置全局环境变量 {代码...} 重置密码安装完成后设置密码 {代码...} 输入两次自己设置的密码,一定要记住哦启动mysql {代码...} 安装完后信息 {代码......

西树先森阅读 801评论 1

有意思,小程序还可以一键生成App!
说到小程序,大部分同学的第一反应,可能是微信小程序、支付宝小程序,确实,小程序的概念深入人心,并且已经被约定俗成的绑定到某些互联网公司的 APP 上。

chokcoco4阅读 765评论 2

微信小程序之聊天室(多人聊天室)总结
实现方式一:使用nodejs + socket.io实现缺点:引用weapp.socket.io.js 大小100kb实现方式二:使用小程序云开发- 数据库实时监听 来实现缺点:目前不可以跨端,只能在当前小程序聊天预览效果:未完待续..来源:[...

jigsaw1阅读 5k

NutUI 京东小程序发布了!
NutUI 是一套京东风格的轻量级移动端组件库,目前已有 70+ 高质量组件,覆盖移动端主流场景。NutUI 3.1 版本上线后,增加了多端小程序适配能力,在微信小程序平台取得了很好的效果。而现在,NutUI 支持京东小程序...

京东设计中心JDC2阅读 1.2k

封面图
微信小程序归结
是的,在这个框架满天飞的年代,我既然有有幸使用了原生小程序开发项目,除了麻烦些,倒也不是一无所获,耕耘总有收货嘛,写博客本身不是为了炫技还是什么,单纯的是记性不好,有些知识点 自己是花了时间去查找的...

HappyCodingTop1阅读 970

封面图
Taro 使用 最新 F2 4.x 版本图表
1.安装依赖文章使用的版本:Taro: 3.5.6,f2: 4.0.34 {代码...} 2.拷贝组件将微信组件node_modules/@antv/f2-wx/lib/*,拷贝出来,到src/components/f2-wx/下面。 然后,在 app.config.js 里面,全局引入小程序组...

wzj5cnaz1阅读 1.7k评论 8

魔方带壳截图:让你的截图看起来更加高大上
我们在日常工作和生活中,往往需要截图去做汇报或分享。普通人的做法:手机或电脑截图,然后就拿去汇报或分享。这样你的截图显得平平无奇,没有给人眼前一亮的感觉。但是,如果我们给这张截图穿上一件“衣服”,把...

老人羽海阅读 1.2k

封面图

从事开发多年,前端、后端(go、Python、php)、服务架构都有涉猎,经历过大公司、创业公司,擅长前端及...

7.1k 声望
923 粉丝
宣传栏