redux-actions+手写实现createActions

redux-actions

• redux-actions 有三个 api 供我们使用，下面我们只介绍并手写实现其中 createActions 函数，它能够快速帮助我们生成 action 的函数

• createActions 能够让我们快速创建 action，让我们不需要重复体力劳动写很多 action 创建函数，我们以前是这样写的，例如：

//可以看出重复的代码很多
export const createIncreaseAction = () => {
  return {
    type: 'INCREASE',
  }
}
export const createDecreaseAction = () => {
  return {
    type: 'DECREASE',
  }
}
export const createAsyncDecreaseAction = (decrease) => {
  return {
    type: 'ASYNC_DECREASE',
    payload: decrease,
  }
}

而 redux-actions 的 createActions 可以快速的创建，只需要调用它，传递一个对象，actions 类型为属性，如果需要传递参数，值就是一个回调函数，不需要参数直接 Null

createActions({
  //该函数直接传对象，会返回一个对象，包含了我们对象里配置的action的创建函数
  INCREASE: null,
  DECREASE: null,
  ASYNC_DECREASE: null,
  ASYNC_INCREASE: null,
  ADD: (number) => number, //action需要传递参数，值就为回调函数
})

• createActions 返回的对象：上面我们传入的对象键是大写，满足 action 的规范的写法，可以看到返回对象里面是小驼峰命名的 action 创建函数

手写 实现其中createActions函数

/**
 * 手写封装实现createActions创建函数
 * @param {object} actionTypeObj
 * @returns
 */
function createActions(actionTypeObj) {
  let result = {}
  for (const key in actionTypeObj) {
    const newKey = lowerCamelCase(key)
    const payload = actionTypeObj[key]
    result[newKey] = function (...arg) {
      if (typeof payload === 'function') {
        return {
          type: key,
          payload: payload(...arg),
        }
      } else {
        return {
          type: key,
        }
      }
    }
  }
  return result
}
/**
 * 辅助函数，传入一个字符串，返回一个小驼峰格式
 * @param {*} string
 */
function lowerCamelCase(string) {
  return string
    .toLowerCase()
    .split('_')
    .map((item, index) => {
      if (index !== 0) {
        item = item[0].toUpperCase() + item.substr(1)
      }
      return item
    })
    .join('')
}