[Pratique exemplaire du mini programme taro] Pratique élégante de l'action asynchrone (processus simplifié)

Pour vous donner des idées, vous pouvez apprendre de Ha, si vous avez des questions, vous pouvez laisser un commentaire sur l'
échafaudage de taro. Les articles suivants expliqueront lentement plus de compétences
https: //github.com/wsdo/taro -...

Présentation

Quand nous sommes arrivés l'action officielle des demandes de projet
vous devez écrire deux fonctions (un type de retour, une expédition), trouble super, comme indiqué ci - dessous.

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
    })
  }
}

Si chaque fonction est écrite comme ça, ce sera extrêmement douloureux et beaucoup de code redondant, alors comment devrions-nous le concevoir?

La conception

• Paramètres: type type, fonction (répartition automatique)

Après cette conception, nous pouvons utiliser des actions extrêmement simplement

/**
 * 创建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 })
    }
  }
}

Utilisation minimale

Avec l'action asynchrone API encapsulée décrite dans l'article précédent, c'est devenu si simple

import { createApiAction } from './index'

export const list = createApiAction(LIST, params => api.get('news/list', params))

Tous les codes

Si vous pouvez vous aider, aidez-moi à commander une étoile
https: //github.com/wsdo/taro -...