[Práctica recomendada de mini programa taro] Práctica elegante de acción asincrónica (proceso simplificado)

Para proporcionarle ideas, puede aprender de Ha, si tiene alguna pregunta, puede dejar un comentario sobre el
andamio de taro. Los siguientes artículos explicarán lentamente más habilidades
https: //github.com/wsdo/taro -...

Resumen

Cuando llegamos a la acción oficial de las solicitudes de proyectos
que necesita para escribir dos funciones (un tipo de retorno, un despacho), muy problemáticos, como se muestra a continuación.

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 todas las funciones se escriben así, será extremadamente doloroso y habrá mucho código redundante, entonces, ¿cómo debemos diseñarlo?

Diseño

• Parámetros: tipo tipo, función (despacho automático)

Después de este diseño, podemos usar acciones extremadamente simples

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

Uso mínimo

Con la acción asincrónica de API encapsulada descrita en el artículo anterior, se ha vuelto tan simple

import { createApiAction } from './index'

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

Todos los códigos

Si puedes ayudarte, ayúdame a pedir una estrella
https: //github.com/wsdo/taro -...