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