batch-manage v0.0.3

使用指南

引入BatchEnhancerUtil，并传入defaultAjax进行初始化

import BatchEnhancerUtil, { typeGenerator, actionGenerator, commonReducerGenerator } from '../../src/BatchEnhancerUtil'
import normalAjaxCreator from '../../src/index'
import { Modal, message } from 'antd'

const HOST = 'web'

let isModalPoped = false
function logout () {
  ...
}

const BasicNormalAjax = normalAjaxCreator({
  codeKey: 'retCode',
  msgKey: 'retMsg',
  successCode: 'T200',
  noPermissions: {
    code: 'T000',
    action: logout,
    actionType: 'function'
  }
})

export class AjaxWithHost extends BasicNormalAjax {
  /**
   *Creates an instance of AjaxWithHost.
   * @param {object} props
   * @param {array} props.types - 请求中-成功-失败三个状态
   * @param {string} props.uri - 请求的地址
   * @param {function} props.formatter - 请求成功之后的处理函数
   * @param {*} props.initData - 请求的请求的初始数据
   * @param {string} props.name - 请求的名字
   * @param {*} props.sagaEffect - side effect
   * @param {string} props.method - 请求方法
   * @memberof AjaxWithHost
   */
  constructor (props) {
    super(props)
    this.uri = `${HOST}${props.uri}`
    this.antdMessage = message
    this.antdNotification = notification
    this.antdModal = Modal
  }
}

const defaultAjax = AjaxWithHost
export default BatchEnhancerUtil({ defaultAjax })

在组件或者模块附近建立saga.js和reducer.js文件,初始化

const batchManage = new BatchManage({ config, nameSpace: 'Sprite' })

export const actions = batchManage.getActions()

export const effects = batchManage.getEffect()

export const sagas = batchManage.getSagas()

export const types = batchManage.getTypes()

const reducers = batchManage.getReducers()

export default combineReducers(reducers)

参数

• config (required, object)

store数据配置对象。通过uri区分有异步请求更改的数据和普通store数据

• nameSpace (optional, string)

模块或者组件的命名空间

const config = {
  'getAllSpiriteInRegion': {
    name: '查询某个区的妖灵列表',
    uri: '/getAllSpiriteInRegion',
    method: 'get',
    initData: {
      data: [],
      msg: '',
      status: -1
    }
  },
  // 用于table组件和chart组件通信，选择的第几行 默认为null
  rowIndex: {
    initData: {
      data: null
    }
  }
}

导出对象介绍

sagas

一个类似[fork(),takelatest(),...]的数组 在saga.js中这样导出使用：

export default function* () {
  yield all([
    ...sagas
  ])
}

reducers

导出reducers

export default combineReducers(reducers)

actions

通过config的键名去访问对应数据的actions， 我们可以像这样发起一个store数据的更改，采用的合并模式类似于state的setState。

this.props.dispatch(actions['getAllSpiriteInRegion']({
  // 注意引用问题
  data: [...getAllSpiriteInRegionCopy.data]
}))

effects

通过config的键名去访问对应数据的actions， 我们可以像这样发起一个请求：

this.props.dispatch(effects['getRegionList']())

types

通过config的键名去访问改变对应数据的type 有包含异步请求改变该数据和同步更改的type为数组，如下： '发起请求的type','请求成功的type','请求失败的type','同步修改的type' 只有同步的type为字符串 '' 我们可以利用types监听请求成功，和请求失败，然后去做一些别的事情，例如:

export default function* () {
  yield all([
    ...sagas,
    takeLatest(types['getAllSpiriteInRegion'][1], saveGetAllSpiriteInRegionCopy)
  ])
}