redux-async-promise

Install

npm install @sdp.nd/redux-async-promise --save

Adding as middleware

import asyncPromiseMiddleware from 'redux-async-promise';
let createStoreWithMiddleware = applyMiddleware(
  asyncPromiseMiddleware({
    // 用于控制是否派发 globalLoadingActionType, 默认值，每个 action 可以在 meta 里面覆盖
    showLoading: true,
    // 全局 actionType 后缀，分别表示三个状态 pending, success, error
    actionTypeSuffixes: ['PENDING', 'SUCCESS', 'ERROR'],
    // 全局 loading action type
    globalLoadingActionType: 'RECEIVE_LOADING_STATE',
    // 全局提示消息 action type
    globalMessageActionType: 'RECEIVE_GLOBAL_MESSAGE',  }),
)(createStore)

Usage

// action-creators.js
import { createAction } from 'redux-actions'
import { $inject } from 'redux-async-promise';

function getPropE(propD) {
  return Promise.resolve(propD)
}

export var fetchXxxxx = createAction('Xxxx',
  // payload
  options => ({
    propA: new ModelA.GET(), // a promise
    propB: new ModelB.GET(), // a promise

    propC: $inject((propA, propB) => {
      console.log(propA, propB)
      return Promise.resolve(propA)
    })('propA', 'propB'),

    propD: $inject(propC => Promise.resolve(propC))('propC'),
    
    // uglifyjs压缩导致依赖丢失的，可以使用$inject来显示注入参数
    propE: $inject(getPropE)('propD')
  }),

  // meta
  options => ({
    propA: {
      // 单个请求 types, success, error 处理
      
      // 声明异步请求的 actionTypes，['PENDING', 'SUCCESS', 'ERROR']，可以在 reducer 中处理
      types: [], 
      onSuccess(resonpse) {},
      onError(resonpse) {}
    },
    // 全局处理对象
    finalProcess: {
      success:　{
        showHint: true/false.
        text: '请求成功',
        handler: (response) => {
          // Do something with response
        }
      },
      error: {
        showHint: true/false,
        text: '请求失败', // text 未指定则使用服务端返回的错误信息
        handler: (response) => {
          // Do something with response
        }
      },
      complete(action) {
        // 异步请求结束处理函数
      }
    }
  })
)